#aardm | Explore Tumblr Posts and Blogs

zak-graphicarts · 6 years

Text

Building a Stop Motion Puppet

In this post, I’m reflecting on the puppet building process - creating a stop motion puppet ready for filming.

I’ve already began some stop motion experiments with a walk, and the process poses some challenges that I don’t really face in any other medium of animation, mostly arising from the physicality of the technique.

I identified that animating the armature was interesting, but I need to give it an actual character, by sculpting a head and neck piece, bulking the armature up and finding some clothes.

Step 1: Foam

The first move was building the head, which started with a square piece of foam. I created a few quick sketches for sizing reference, and then cut a 7x4 block out of the foam using the band saw.

From these pieces, using a Sharpie I added my character’s face to the blocks and using these lines as reference, but the foam block into a rough head shape. I repeated this for three model heads, and then began working into each one with a dremmel tool.

Using the dremmel, my job was to carve into the head and ‘skull’ it out, adding indents and smoothing each foam piece. This was probably the most difficult part of the process, it was a new tool and kept shorting out when I attempted to carve into the head. However, after keeping with the process for a while, and with the help of the sanding machine and some very fine sand paper, I was able to create some foam heads that followed the shape of my sketches.

I kept the third piece to show the process, to demonstrate how I got to the other two heads. In terms of just a basic headship, I was quite happy with how these turned out - I’d be sculpting over them anyway with clay, but I was able to create an accurate foam representation of my drawings.

Step 2: Sculpt

For the sculpting process, I was working with two processes - one using poxy resin to add features and the other, using modelling clay to skin the foam head. As it had to dry, this process was split over a couple days.

The actual process for using the epoxy putty meant we had to work quickly, as once the two have bonded the adhesive quality begins to wear off and hardens, usually after fifteen minutes. After having been shown the process by our tutor, I set to work on creating the basic facial features, and giving my character a more defined chin, as per my sketches.

After cutting a small piece from both sticks, I needed to mix the two up which creates a soft, adhesive putty ready for modelling. This was actually rather an intuitive process, something I found relatively easy to follow. The main challenge was the sculpting process, an area in Graphic Art that I’m not particulary comfortable with or successful with. However, where I would normally jump to using an assortment of tools - our tutor explained that the most effective tool when sculpting with epoxy putty (and clay) is our own hands. With this knowledge, I would primarily use my finger to do most of the sculpting work, and simple sculpting tools to bridge each facial feature to the foam head. Dipping the tools in water granted me a few extra minutes of sculpting time.

To complete the sculpting process using the putty, I added some ear pieces and finally ‘skinned’ the model using an artex ceiling mix. It’s the mix that builders use to achieve a textured finish to ceilings, but is also a great way to ‘skin’ my character. From here, I would then paint the model and place it onto the armature.

However, during this process I was working on my clay head which turned out to be much more successful and appealing. Sculpting the clay head turned out to be more intensive, but resulted in a much better piece, I think. As the clay doesn’t need to set like the putty, I was free to just continue working on the piece throughout the two days.

The process was rather different, too. Instead of using the foam head as a face and adding features using the putty, I was skinning the head from clay, using the foam piece as a skull to cover. After adding the eyes as reference using two white pins, I could begin work on sculpting facial features on the clay model including mouth and nose.

I revised the nose piece, however, as through this process I realised just how flat my drawings are. My designs of the character show Michael with a big nose, but a flat one too - like a melon. When I was trying to adapt this to the physical realm, the result is a weirdly flat sculpture. After discussing this with my tutor, I realised that when I’m working in 3D, I need to think in 3D too. Up until now, I’d been purely working off my flat sketches, and so got to work sculpting an actual nose piece, working off a more realistic approach. Instead of trying to sculpt it as one piece as I had previously, I built the nose from two balls of clay for the nostrils and a larger piece that allowed the nose to stick out in profile, as my sketches show.

It was this realisation that allowed me to properly sculpt the features in a way that I was actually happy with, to build pieces instead of just sculpt them straight away. The final step was to sculpt a neck piece, and following this it was just a matter of smoothing the head down.

To do this, I just smoothed out any cracks or marks in the clay using my hands - a process I actually found rather addicting towards the end. As a way to further smooth the piece, I used a cup of white spirit and brush to lightly brush any marks or dirt off the clay surface, as the spirit cuts into the piece. It was important to keep this a light brushing, but unfortunately I didn’t quite keep to this as the spirit cut into the clay and revealed the blue foam underneath around the cheek bone. This was a relatively easy fix, however, just added more clay and smoothed it down using my fingers.

As a comparative review of the two processes, I can definitely see the potential in the putty head, painting over the artex skin would allow me to further customise the design. However, I found sculpting using modelling clay to be more engaging and most importantly, successful. The timed nature of the poxy putty means I’m somewhat rushing with the other piece, whereas with the clay head I’m able to take my time and really work into the surface to create a smooth face with plenty of character and personality.

I think this was the most successful element about the head sculpt - the amount of personality and character I was able to inject into just the facial expressions. My initial idea was to keep him rather neutral, but when sculpting I decided to go in a more melancholic tone, producing a character that looks deeply saddened by his own existence.

Having sculpted the head, my next move was to bulk the body up, using foam. My sketches, however, described the character as being rather lanky and slim - so I wanted to keep that stature here.

Using small pieces of foam, I would bulk up parts the body and wrap them to the armature using wire. There was a fair bit of sculpting in this process too, using the wire and then scissors to cut the foam into the desired shape and size. Like the putty, this was a rather straightforward process - but not without challenges. The main one arises from the sharp nature of the wire, which unknowingly tore into my fingertips whilst sculpting. As an improvement upon this process, I’d want to use gloves or explore a different way of wrapping the foam to the armature. Despite this, I was able to wrap up the entire armature, keeping with my character’s tall and slim build whilst giving the entire figure a much needed weight.

Just using wire, I was able to make some hands - but I decided to leave that part due to the time constrictions and the fact that the audience won’t really be able to tell after I play around with colour correction and chroma keying in post production. In terms of foam sculpting, I was happy with the exaggerated and cartoon-like proportions of the character, which featured a rather skinny torso with baggier legs, ready for clothing.

Step 3: Dress

The final step in the production of my stop motion model was finding some clothes. Whilst I could have attempted to make them myself, I’m not a skilled dressmaker and wanted the model to have a professional and industry standard look - so went to a carboot sale on the hunt for some action men figures.

My puppet uses the 12″ scale, which is the same scale as most dolls and most importantly, action men figures. I purposely chose this scale as a way to ensure fitting clothing at a decent quality. This way, I didn’t need to make my own and could have a range of options.

Going to the car boot sale allowed me to find a handful of acton men figures with a range of clothing, from baggy trousers to a brown leather jacket - clearly inspired by Indiana Jones himself. Whilst I wasn’t to replicate my initial sketches exactly, the character has baggy trousers and black boots but instead of a long-sleeved hoodie sports a black polo and jacket - which received a lot of praise from other students in the class! I’m happy with the clothes I was able to find, and the final piece represents my growth as an artist in sculpting and 3D as a medium.

Something worth mentioning, I think, is just how appealing the stop motion model turned out to be. When I brought it into class, almost everyone commented on him, meaning I’ve done something right, atleast. Just with my own class, I’ve noticed a big difference in audience reaction: my armature didn’t really get that many comments, but when I actually add a character to the walk - it becomes something so much more than a metal skeleton. We’re able to empathise with this obviously human character, and the minutaure clothes only adds to this engaging effect. The accurate facial features (particularly the nose) drew the most praise from everyone, as did the clothes and minature boots. There’s something inherently fun and appealing about a stop motion model, an idea that studios like Aardman and Laika have been capitalising off for years now.

It was Aardman’s puppets that I was primarily responding to over these sessions, from their brilliant series of animated shorts Animated Conversations. It was animator Nick Park’s use of actual fabric clothing that I wanted to emulate with my puppet, as opposed to the claymation style of something like Wallace and Gromit. I think both approaches work, of course, but there’s a life behind the character when we use actual clothing - its more like real people, I think. We’re able to move the clothing in ways that real clothing would move, as this example, Sales Pitch, demonstrates.

When smoothing the face down, I was reminded by my tutor to look at the first Wallace and Gromit claymation cartoon. Looking back at it now, there’s quite a lot of imperfections and fingerprints in the clay that I hadn’t realised watching it as a kid. There’s an appealing, imperfect and hand-made charm to these early claymation works that I think results from these marks, however. If we compare it to something like Kubo and the Two Strings, a more recent stop motion feature, the characters are polished and clean up to the point of looking like a digital model. There’s a low-tech appeal to claymation, and it’s something that can still be seen in their most recent outputs, like Early Man. Clay is such a mouldable medium that it lends itself to being sculpted around, and as an audience, we know that. It was after realising this hand-crafted appeal that I stopped smoothing the character down and embrace the material a bit more - as these claymations did.

In this post, I’ve discussed the process of building my stop motion puppet, and the various challenges I’ve had to overcome along the way. It wasn’t easy, but I honestly enjoyed it. The brief, Under the Influence, asks us to make practical work and research that we are inspired by - whilst also challenging ourselves as artists. For me, that’s not just stop motion animation, but animation in general. Sculpting the head and the building process proved a challenge, but one that I was able to overcome through persistence and problem solving . It’s not something that I’d liked before this, but I think as I’m starting to get better at it - I’m liking the process more.

I’ve mentioned this before, but working with 3D processes is something that always intimidated me. Something like this requires a craftsmanship and level of control that I didn’t think I could pull off. I’ve discussed how a successful final major project should challenge us to grow as artists, and for me, this was one way of doing just that. Through this process, I’ve been able to really get stuck into the building a stop motion puppet and sculpting - to challenge my 2D, flat disposition and create a character with depth and form. This was my first attempt at creating an actual stop motion puppet, and although the model is a departure form my initial sketches, I think I was able to create a successful character in his own right. No longer the IT guy, Mick remembers the good old days. From the character I’ve created, it seems to echo more of an older vibe than I was initially going for, but this allows me to to explore a slower walk and a wider variety of character types.

Having built and prepped my stop motion model, the next step is to begin some stop motion walk cycles! I want to be exploring different approaches to a walk, and I’ll be attaching the rig at the torso as suggested by an animator’s comment on my work.

Actions

Create some stop motion animations using my puppet, exploring walk cycles and character acting

References

Wallace and Gromit: A Grand Day Out. (1990). Nick Park.

Kubo and the Two Strings. (2016). Travis Knight.

Sales Pitch. (1983). Aardman Studios.

0 notes

mbaljeetsingh · 7 years

Text

Moving Beyond WordPress for CMS with Component IO

Over the past 15 years, WordPress has had a great run. Unfortunately, its age has started to show, with newer technologies enabling faster, cheaper, more secure, and all around easier to use content management.

In this tutorial, we'll build a web page with a modular, embedded CMS that is 10x faster, 10x cheaper, more secure, and has better editing tools than a standard WordPress install, and it works with any website. Sounds awesome, right? Let's get started.

Setup

We'll use several state of the art tools that are either free or inexpensive in order to build our WordPress replacement page. We have a few important things to consider:

Hosting - We'll host our website on Amazon Web Services because it has a free tier and it's extremely secure and reliable. We'll only be hosting static files, so it will be very inexpensive and easy to scale (when we go viral!)

Themes - There are many places where you can get quality themes for free or very cheap. We'll use Templated because it has almost 1,000 free themes, and if you want to look around, there are many other places you can try such as ThemeForest, Bootswatch, Template Monster, and more.

Content Management - We'll build our CMS with Component IO, which allows us to embed content, images, forms & more anywhere we want and to edit everything live from our own web page. It has a generous free tier and even includes a built in code editor for 100% customization.

Our goal is to create a web page that loads immediately and is free to host, live-editable, and can't be turned into a spambot or shut down by ransomware the way WordPress can.

With our tools in hand, we're ready to get started!

1) Get the website template running locally

We've found a nice-looking theme on Templated called "Phase Shift" which you can view live here.

Working on the template page named "No Sidebar", we'll make the following parts of the page editable with our CMS:

A content block at the top

A feature section in the middle

A form at the bottom

All three parts will be editable through our CMS, and we'll make the form submit responses to our CMS too so that everything is in one place. But first, let's get the static site running locally.

Download the template files from Dropbox or GitHub and open the file titled "no-sidebar.html" with your favorite browser (you can right-click the file and choose which application to open it with). It should look like the following:

If the page looks different, be sure you have all of the folders (/css, /fonts, /images, /js) downloaded and in the same directory as the html file. Now that we have the site working locally, let's make it editable.

Go ahead and open the "no-sidebar.html" file in a text editor too. It should now be open in your text editor and in your browser.

2) Make the static content block editable

For the CMS portion of our site, we'll use Component IO. In a new tab, visit https://component.io and create a free account & sign in. Your dashboard should look something like this:

Let's create an editable content block for our page. Click the "Content block" button on left side to create an editable content component. Doing so will take you to a page where you can edit or install the component.

From here, click the "Install" button so that we can install it on our web page.

To install, we just need to copy and paste the component code into our HTML file. Copy the component tag and the script together, and paste the component tag

on line 41 of "no-sidebar.html", just above the <section> tag with content. Then paste the script tag at the bottom of the page on line 140, just before the other <script> tags.

Note that if you've created your own account and your own component, you will have a different key= value for the component and a different project= value for the script.

Now save the file and refresh our template web page in the browser. It should look like this:

So just like that, our CMS content is being delivered to our page!

There should also now be a pencil icon on the right side of our page. This button will appear on the page if we're logged into Component IO, and it lets us make live edits. Click on the pencil icon to show the editable components on the page.

Now click on our new component to open the editor:

From here, we can edit the content to say whatever we want. Since we're just trying to mimic the existing template, close the editor by clicking the "X" buttons, then copy the content from our original page (starting with "NO SIDEBAR / Integer sit amet...)", and then re-open the editor and paste this content to replace the "Lorem ipsum…" text and image.

Click the "Save" button to save. Then in our "no-sidebar.html" file delete the old static content <section> starting on line 42 so that lines 39-43 of "no-sidebar.html" look like the code below.

<div id="page" class="container"> <component key=oadmb></component> </div>

Note: if you're following along with your own project, make sure you use your own key= for the component instead of the one used here.

Save the file and reload the web page. Our page should look exactly like it did before, except now our content block is editable. Success!

3) Add a custom component

Now we'll replace the feature section in the middle of the page and make it editable too. Since this section is a custom layout for our template, we'll build a custom component from scratch that will be editable by anyone on our team, even non-technical teammates.

Back in the Component IO dashboard, click the Component IO logo to get to the dashboard's home page:

Click the "Blank component" button on the sidebar to create a blank component that we can build from scratch.

The first thing we'll do is copy the HTML from our template's feature section into Component IO so that we can mimic the content. Click the "Edit" button in Component IO and then click the "Code" toggle at the top to show the code editor:

Let's copy our existing feature section's HTML as a starting point for our new component. In the "no-sidebar.html" file, cut out lines 48-75

<div class="row">  <div class="6u"> <section> <ul class="style"> <li class="fa fa-wrench"> <h3>Integer ultrices</h3> <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span> </li> <li class="fa fa-leaf"> <h3>Aliquam luctus</h3> <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span> </li> </ul> </section> </div> <div class="6u"> <section> <ul class="style"> <li class="fa fa-cogs"> <h3>Integer ultrices</h3> <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span> </li> <li class="fa fa-road"> <h3>Aliquam luctus</h3> <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span> </li> </ul> </section> </div> </div>

And paste this code into the HTML section of the Component IO code editor.

Now our component will deliver the exact same HTML as is on our web page currently. To see this, let's replace our web page's static HTML with the component tag for our new component.

Click the "Save" button in the code editor on Component IO and then click the "X" to exit the editor. Next, click the "Install" button like we did when installing our first component:

This time we don't need to copy the <script> tag because we already have it on our web page. We just need to copy the component tag

Paste the component tag on line 48 of "no-sidebar.html", inside the <div id="main"> container. Delete the rest of the code in the container so that only the component tag is there:

Save the file and go to the tab with our web page on it. When you reload the page, it should look the exact same as before.

The difference is that now our feature section is part of our CMS and we can edit it! We could choose to always edit the raw HTML in the Component IO code editor, but that isn't much of an improvement on just editing the static HTML. Instead, let's set it up so that even non-technical users can make changes.

To do this, we need to add some fields for our CMS that can be edited easily. It looks like our feature section has 4 parts, with each part having an icon (wrench, gears, leaf, and a road) as well as some content. So let's use two fields: one called "icons" and one called "content".

Back in the Component IO dashboard, click "Done" from the install page and then click on the dropdown arrow on the "Edit" button and choose "Add / remove fields".

This takes us to a page where we can add fields to our component. Use the form on the page to create the 2 fields we mentioned:

One called icon that is a repeat Simple text field; and

One called content that is a repeat Rich text (HTML) field

Be sure to check the "Repeat" box since we'll be using these fields 4 times each. Once you've added both repeat fields, your screen should look like this:

Now let's add some content to the fields we just created.

Click "Done" and then click "Edit". This brings up the same content editor as before, but now we have custom fields.

Click "Add repeat item" to add the first item in our features section.

If we toggle over to the Code section, it looks like the first item has an icon called fa-wrench. This is from the Font Awesome icon set, and we could use any icon from there that we wanted. For now though, we'll still use "fa-wrench" for the icon.

Toggle to the Content section and add fa-wrench for the items[0].icon input. Then toggle back to the Code section and copy the first block of text (starting with "Integer ultrices / In posuere...") and paste it in for the items[0].content input. Delete the <h3> and <span> tags from the content editor and instead use the WYSIWYG tools to make "Integer ultrices" a "Heading 3" section.

Now our component editor should look like this:

Repeat this process for the remaining 3 feature sections, entering fa-cogs, fa-leaf, and fa-road for the icons, as well as the associated text content for each.

Now that the content is in place, let's make it show in our component.

Click the "Code" toggle to switch to the code editor view. We're ready to replace our static HTML with something dynamic.

We'll want to replace our component HTML with code to insert the icon and content fields we just created. With Component IO, we can access these fields through the items array, which starts at zero index. For example, to get the first icon value, we would use items[0].icon. Similarly, the second content value would be items[1].content.

Component IO uses Vue.js syntax for inserting content, so replace the above HTML in the editor with the following HTML that will insert our content:

In Vue.js, :class= is used to generate a class name, and v-html= is used to insert raw HTML. There are more ways to insert values, but this is all we need for now.

Once you've updated the HTML, click "Save" and then visit our template web page tab and reload it.

Again it looks the same as before, but now it's editable. Click the pencil button on the right hand side and you can now edit the content in our feature section. Try re-ordering the boxes, changing the icons and content, and anything else you might want to do.

At this point, we have 2 CMS components on our page: one content block and one fully custom component, and both are now editable without touching or redeploying our code!

4) Add a form

Finally, let's add a form that will automatically send responses to our Component IO dashboard where we can view and manage the messages. Component IO has a library of components that includes ready-to-use forms, so visit the "Library" tab at Component IO and click the "Forms" tag on the left to filter components.

Let's choose the first one: Contact Form with reCAPTCHA option. Click on this component and then click the "Add to your project" button.

Install it the same way we installed the last 2 components: click on the "Install" button and then copy the component tag

And paste it into our "no-sidebar.html" file, just above the <form> element around line 63. Delete the existing <form> code so that the footer section looks like this

<div id="footer" class="wrapper style2"> <div class="container"> <section> <header class="major"> <h2>Mauris vulputate dolor</h2> <span class="byline">Integer sit amet pede vel arcu aliquet pretium</span> </header> <component key=mnark load=b></component> </section> </div> </div>

Again, make sure to use your specific key= for the component tag if you are following along with your own project.

Save the file and reload our template web page. It should look like this:

It doesn't look how we want, and the reCAPTCHA form isn't working because we're serving the web page from our file system. If we were serving it from localhost or as a live website, the reCAPTCHA would already be working.

Fortunately, just like with our last component, we can customize it and style it however we want. Click the pencil on the right side to open the editor and then click on the form to edit it. In the Content tab, disable the reCAPTCHA by changing the reCaptcha checkbox from "true" to "false". Then in the Code tab, replace the form's HTML with the following:

<form @submit="submit" v-if="!success"> <div class="row half"> <div class="12u"> <input class="text" type="text" name="name" v-model="name" placeholder="Name" /> </div> </div> <div class="row half"> <div class="12u"> <input class="text" type="text" name="email" v-model="email" placeholder="Email" /> </div> </div> <div class="row half"> <div class="12u"> <textarea name="message" v-model="message" placeholder="Message"></textarea> </div> </div> <div class="row half"> <div class="12u"> <ul class="actions"> <li> <input type="submit" :value="buttonText || 'Submit'" class="button alt" /> </li> </ul> </div> </div> </form> <h3 v-if="success"> Message sent </h3>

At the bottom of the editor's CSS panel, also add the following rule:

h3 { color: white; }

Click the "Save" button to save changes to the HTML and CSS, then reload our web page. Now our form should be working. Try entering a message into the form:

When you submit the form, you should see text that reads "Message sent".

Back in the Component IO dashboard, click the Component IO logo to go to the dashboard home page and then click the dropdown menu for our project and select "Responses".

Here we can see the message was saved in the dashboard. We didn't have to do any backend work, and now we have a completely customizable form we can embed anywhere and collect responses.

Our page is now exactly like the template we started with, but with the added benefit of content we can edit live and a form that works for visitors to contact us. Now let's deploy it for the world to see.

5) Deploy to AWS

Hosting a website on AWS is as simple as creating a "bucket" on their S3 service and uploading the files for our web page. First, create an account at https://aws.amazon.com, then choose S3 from the "Services" dropdown menu.

Now click "Create bucket" so that we have a place to upload our files.

Give the bucket a name -- it must be something that no one else has used before, so you may need to try a couple of times to find one. Once you have one, click the "Create" button to create the bucket.

Next, click on the bucket name and then click the "Upload" button. Upload the folders and files for our website:

/css /fonts /images /js index.html no-sidebar.html

Make sure these files are at the "root" of our S3 bucket, not inside of another folder.

Once all the files are uploaded, click the checkbox to select all the files and folder and then right click and select "Make public". This will allow anyone to download and view our website files.

Now click the "Properties" tab, and select "Static website hosting". Click the radio button that says "Use this bucket to host a website" and enter index.html for the index document.

Now our website is available for anyone to view at the url above the radio button.

You can click to see your hosted website or can view this tutorial's web page at http://ift.tt/2wigo3y. Click the "No Sidebar" link at the top right of the page to see the "No Sidebar" page we've been working on.

Just like before, you can click the pencil on the right side of the web page to make live edits to the content. Also, the form will submit responses to the Component IO dashboard just like before. We're all done!

Conclusion

We've set up a web page that is extremely fast to load (~800ms), free to host for hobby amounts of traffic, and has CMS features and a working form built in. If we wanted, we could invite other team members or clients to our project on Component IO and they would be able to make edits to the site too.

We used a basic HTML template, but we could have used any framework we wanted, including React, Angular, Vue.js, and more. We hosted our website on AWS, but again we could have also hosted the site anywhere we wanted, on any platform, and it would work the same because ultimately our solution is just HTML, CSS, and JavaScript.

From here on out, we can make edits with Component IO -- we don't have to change our codebase or redeploy our website every time we want to make a change. This will save us valuable time and let us focus on more important things.

If you enjoyed this tutorial, take a second to share it with your team or someone you think will benefit from it. It can be hard to find new tools that work well, so they'll be happy to know about it.

Whoever you tell will probably thank you -- for freeing them from the tyranny of WordPress!

via Scotch.io http://ift.tt/2uSIuVb

#IFTTT #Feedly

0 notes