Introduction
Welcome to my tutorial on How to Create Animation Assets in Adobe Photoshop. This tutorial will not teach you "how to draw" items specifically. It's more concerned with how to think about the elements for animation. What does my animator need and why? We'll cover what Title Safe is, and the importance of correct labelling.
Assets
Our Story to Animate
For this tutorial I will be using Little Miss Muffet as our story.
Little Miss Muffet
Sat on a tuffet,
Eating of curds and whey;
Along came a spider,
Who sat down beside her
And frightened Miss Muffet away.
Assets We Will Be Creating
To make asset creation easy, we will make a list of what we need to create. This will also help us set up our Photoshop document in advance.
Little Miss Muffet
- Profile walk
- Profile run
- Seated
- Head
- Face: eating, eyes blink
- Arms
- Legs
- Body
- Hands
- Arms: no hands
Tuffet
- Large cushion
Curds & Whey
- Bowl
- Spoon
- Cottage cheese
Spider: Side and Front On
- Legs x 6; Arms x2
- Top hat
- Cane
- Eyes
- Mandibles
- Abdomen
- Upper body
Environment
- Tree
- Hill
- Sun
- Cloud
- Grass
PSD Setup: Storyboard
For our storyboarding, you can really set up the document to whatever size you like. However, just to keep things in proportion, I have gone for 1920 x 1200 px at 72 dpi, with the Color Mode set to RGB (Monitor Colour)
Here's how I've set up the storyboard. Each line of the rhyme has been given its own panel. For this we don't need it to be really detailed—think of it like thumbnailing. We just need a basic idea of the action, which can be shown with arrows and comments if need be. This is useful for the animator to have so they know what has to happen. These frames can also be used to work out how long each action has to be on screen for and to make sure it matches up when set to audio.
Here's my roughed out storyboard, and the animator, Dave Bode, is happy with how it's looking, so I can get started creating the assets.
PSD Setup: Assets
Because for this the scene doesn't change, we will be creating all of the .psds in the same document. After Effects is like a time-based Photoshop, so it uses layers and groups in the same way. For more complex animations it would be advisable to create characters, assets and/or environments in separate documents.
For this animation Dave would like the document size to be 3840 x 2160 px at 72 dpi, which is 4K resolution. This is so he can have a little play room when it comes to zooms and pans if need be. I create a New Document by going to File > New.
In the Layers panel I have created Groups to place our assets in. Groups can be created by clicking the folder icon at the bottom of the Layers panel. In this you can drag in or create New Layers. This keeps everything tidy.
As an added bonus you can assign a colour to the group by right clicking on it and selecting a colour. This will automatically change all the Layer names inside that Group to that colour. You can change the colour of the Layers inside the Groups by right clicking on them.
Being organised with Layers is a great time saver and is especially important when you've got a tight deadline, it's late at night and you've just drunk the last of the coffee.
The most complex element in the tale of Miss Muffet is the spider, mostly due to his number of limbs. Here is how I have organised the layers in preparation for asset creation. This is our starting point, but we may add more layers in the future for extra expressions, props and so on.
There is a very good chance some of the layers may be changed, moved, updated, duplicated and removed, so don't take this template as verbatim. It's just to give an idea of how things can be set up. When creating assets it's easy to miss seemingly simple things, either by your own planning or from your client or (art) director, so expect changes!
Title Safe: What Is It and Why Do We Need it?
What is title safe? All over the world people are using devices that are of different aspect ratios and resolutions, and we have to account for the lowest common denominator. Most people will be viewing this animation on a 16:9 screen, but someone out there may still have a 4:3 monitor, so we need to make sure that no vital info is cut off on the edges. Below is an example of title safe bounds.
In this example the blue area will be seen on all devices, and the purple area is pretty much the limit of where any action should happen. We need to keep this in mind for our asset creation, so when working on an animation, ensure that you have the title safe bounds from your animator.
The cross on the blue square indicates the centre of the scene, and the perpendicular lines on the periphery indicate the halfway points of the scene.
Next what I will do is select this image and place it into my psd. This will vary depending on how your title safe is provided to you. A quick way to get this image is to have a print screen from After Effects of a 4K scene with title safe applied. This may not be as clean and crisp as the above example, so if you feel you are going to be doing a lot of animation work in Photoshop it may be worth cleaning up the lines.
Our Process
We start off with rough sketches of all the elements. Why do we do this? This is so we can get the relative sizes right. Things like: "Is the tuffet big enough for two to sit on?" "How big does the sun need to be in the sky?" "Is there enough room for the action to happen?"
For each set of elements, I will show you the process from the sketch stage to the complete asset stage. Let's begin with the setting of the scene: The Background.
Start Off With the Background
First of all I have roughed in the background with the tuffet, Little Miss Muffet and the Spider in the seated pose to make sure everything fits. Each element of the sketch is on a separate layer for convenience.
Next I turn off the character and tuffet layers and deal just with the background elements.
Now that we have our basic scene roughed out, we need to work out what we need. The cloud will move, but there will be no form changes. However, I think it'd be interesting to have the sun rays animate, so I think we will have two sets of rays that Dave can fade or cut between.
With some animation projects there would probably be things like model sheets and colours pre-arranged with the client, but in this case as it's for fun I'm just designing on the fly!
Here I have turned off any unnecessary layers and lowered the opacity of the sketch. Set the sketch folder to Multiply in the Layer styles so it's easier to see.
I've decided to scale the sun down as it's too big. I do this by selecting the sun plus the two rays layers and pressing Control-T to Transform. We need to make sure the scene elements don't overpower the action.
Here's how the environment layers have been organised.
Tuffet
The tuffet is a fairly simple thing to add to the scene, but is also quite important, as both Little Miss Muffet and the Spider have to be able to sit on it. A tuffet is like a foot stool or a large cushion.
Below we have the scene sketched out with the tuffet centrally, as this is where the majority of the action needs to take place.
When creating scenes, always plan them out. Characters need to be sized relative to their surroundings and each other. As you can see, I have also included a rough of the bowl for curds and a spoon for a one stop reference for us. A little planning can save a lot of work later on. Here we have drawn up the tuffet and using a rough sketch of the characters we can check that they will both fit comfortably. This can be a useful image to send to your animator.
Here is how the assets will be provided to our animator. I have drawn some overlapping grass to ground the tuffet, but I have kept this on a separate layer in case the animator wishes to do some effects on it in After Effects.
.
Spider Multiple Assets: Time-Saving Trick!
When it comes to things like spiders you're going to get repeating elements, so why draw each one by hand? Here's an easy way to get multiple features in the blink of eight beady eyes!
Eyes
Step 1
Now spiders can have varying numbers of eyes, and we don't want to draw each one individually. On a New Layer paint out one eyeball.
Step 2
By holding Alt and having the Move Tool (V) selected, drag the eye out a further seven times, and position all the eyes onto the face.
Step 3
On a New Layer, paint a closed eyelid over one of the eyes. Repeat the copy paste process over the other seven eyes.
Step 4
Arrange the layers so that the corresponding lids sit above the eyeballs. Hide the closed lid layers and select each set of eyes and lids. Next press Control-T to scale them, and repeat the process with the other sets of eyes and lids.
You should end up with a set like this. If you switch the lids layer on and off it looks as if it's winking at you!
Arms and Legs
Step 1
Unless you're going to be animating a millipede, Mr Spider will probably be an example of the most leg assets you will need to create. Luckily spider legs are fairly uniform so we can save ourselves some time.
Below are our spider roughs: front on and side on. Because of the simple design we can utilise the leg shapes for the front and side views. Have your model sheet roughs on hand for this section.
Step 2
Draw the three sections of the leg: the thigh, the calf and the foot. I'll make each on a New Layer so that Dave can animate these sections independently. When drawing the three sections, I'll make sure they overlap slightly. He may choose to use the Puppet Tool in After Effects, so he may join the three leg sections together. In my experience it's better to give the animator options!
Step 3
Once you've painted up your three sections of leg, select the thigh, calf and foot and copy them a further three times. You can do this by selecting the three layers by holding Shift and dragging them to the New Layer icon at the bottom of the Layers panel, which is a square with a folded corner.
Step 4
Select two legs and using Transform, which is Control-T, Flip them Horizontally by going to Edit > Transform > Flip Horizontal. Group each leg individually and give them a helpful name like Leg copy 2.
Step 5
We will be repeating the process of creating three sections for the arms: upper arm, lower arm and hand. Remember when painting up the sections to allow a little overlap.
Step 6
Here are the completed front-on Spider assets. He's in this pseudo T-pose for convenience and I'm sure Dave will find it easier to start animating with him laid out like this.
Next copy all the legs and arms layers, paste them into the side-on group, and rearrange them as required.
Spider Asset Organisation: Front Facing Spider
Here comes the non-creative, organisation section which, although not hugely fun, is very necessary. You will thank yourself later for checking everything is in order. Here's a breakdown of the front-on Spider assets.
The Cane
The cane is one of these wonderful assets where we can just copy and paste it for the front and side views. We could just have this as one asset but as the front-on and side-on spiders are in their own groups, this means that your animator will not have to search for the individual sections.
The Arms
Arrange all the arm sections into clearly defined folders. It can be helpful to colour code them. Ensure the hands and the lower and upper arms for each group are labelled.
The Legs
As before, this is a labelling task and here's how I have laid this out for Dave.
The Eyes
The eyes! For this, make sure that the correct closed eye corresponds with the correct open eye which should be directly below it.
The Head
This is, thankfully, a simpler one to organise! Here we have the base head and the spider's mandibles (if you're unfamiliar with arachnid anatomy, these are the bits around the spider's mouth). I have these separately so that Dave can animate them if he so wishes.
The Body
Another simple section! Here we have the abdomen (the bum of the spider) and the upper body. Both are on separate layers for potential animation purposes. Keep parts labelled!
Spider Asset Organisation: Profile
Because most of the assets are copies of each other, the only differences between the profile spider and the front-on are:
- The pupils of the eyes have been moved to the front of the eyeballs.
- There are only five eyes, as some would not be seen from this angle.
- The placement of the anatomy has been shifted.
I have included screen grabs of the layer setup for your convenience. Remember to keep everything clearly labelled!
The Cane
The Arms
The Head
The Eyes
This is the only massive change for the spider, where the pupil has been moved to the front of the eyeball in all cases and rather than eight eyes there are only five.
The Legs
Finally: The Body
Here we have our spider assets laid out in a clear fashion for Dave!
REMEMBER: Proper labelling is very important.
Curds and Whey
Whey-hey! The spider section is done and now we just have Little Miss Muffet's lunch to do. This has been broken down into the bowl, curds, a spoon, and some curds on the spoon.
"Why?" you ask. Because I thought it might be cool if when Miss Muffet gets scared, the contents of her bowl go flying!
Group them, and then label as before.
Little Miss Muffet's Side-On Assets
Now that the simple elements have been created, we have the trickier tasks of making assets for things that move. For Little Miss Muffet we will need two lots of elements: profile and front-on. The front is for her sitting eating, and the side is for her running off camera.
Miss M is a little trickier than the spider in the sense that she needs different anatomy and clothes, and thus will look different in profile to being straight on. Here's a breakdown of all the parts I've created.
Here's how the lovely Little Miss Muffet looks all painted up. They grow up so fast! *sniff*
Clothing
Here are the main parts of her clothing, with the exception of her shoes and sleeves. For convenience I have kept the sleeves with the arms and shoes with the legs.
Head and Expressions
Here are her side expressions, which are pretty much just pure terror.
Arms
Pretty straightforward here. I painted out the arm straight to represent pure fear.
Legs
Most of the leg will be hidden by the skirt, but I've given Dave some extra just in case.
Hair
I've kept her hair separate so that when she runs Dave can animate it trailing behind her!
Little Miss Muffet's Face-On Assets
Mouth and Hair
To keep this really expressive I've created a variety of mouth and lip shapes so Dave can animate her eating and shocked. The hair is in there, as the mouth parts are at the top of the Layers stack and the hair needs to be over everything.
Eyes
Much like the spider, Miss Muffet has open and closed eyes, but with the addition of eyebrows for expression.
Face Base and Body
I've grouped her body and clothing together here as they won't move much while she's seated. If you note the skirt seated layer, there is a mask which I have included to allow the legs to show through, and if Dave needs the whole skirt it's there for him.
Arms
Arms are as before, although I felt we needed hands on their own for when she holds the bowl and spoon.
I've added arms without hands in a separate folder for animation with the hands.
Legs
Straightforward legs that can be used while seated or standing.
Pigtails
As with the profile run, I have put her pigtails as their own pieces to use as another emotional tool.
That sums up our base elements. Next to tweak the assets so they look as good at they possibly can!
Final Touches
We also need to ground Little Miss Muffet and the Spider, so I am going to create a layer of grass for the characters' feet to move behind.
Step 1
On a New Layer, draw in a rough line where you would like the grass to go. Make this in an obvious contrasting colour.
Step 2
Begin painting blades of grass along the line using a brush of your choice.
Step 3
Once you have painted all along the line, Copy the layer by pressing Control-C and then Paste (Control-V). Then Transform (Control-T) and manually flip and rotate the grass to make it a little more lush.
Step 4
Next lock the transparency of the layer by pressing the small chessboard icon next to Lock on the Layers panel. Add in a variety of greens to give variety. Unlock the transparency and take a soft eraser (E) and soften the edge of the grass base.
Step 5
I duplicate the grass layers and then flip, transform and warp them to make them slightly different. On the grass closest to the camera, I blur the grass using Gaussian Blur to give the illusion of depth. Gaussian Blur can be found by going to Filter > Blur > Gaussian Blur. I have blurred the horizon of the grass in the Environment folder slightly just to give a little depth, using the same Gaussian Blur method.
Here I've changed to Little Miss Muffet to make sure that it looks good with both characters.
Step 6
I'm really happy with how the grass looks, so I flatten the eight grass layers into four simple grass layers and name them accordingly.
Credits
Dave will be taking care of the credits so I have simply placed some text into the psd to save him time. The font I am using is Futura Handwritten.
For this I have created a title screen, Dave's credit and my own credit. You can do this by simply selecting the Horizontal Type Tool (T), selecting your font of choice and typing what you need on each layer. Align the text in the middle of the screen by pressing Control-T to Transform and aligning the cross hairs of the text with the cross hairs of the 4K title safe.
Final Step
Our final step is to check all the layers are named and there are no layers that shouldn't be there, e.g. roughs, empty layers, colour palettes.
Save the .PSD to a folder such as "Dave Animation Assets". In this folder place everything your animator will need, such as the storyboard, the script, a voiceover (if you are providing it) and any fonts (which you can distribute and have rights to). If not, rasterize any text layers. Next deliver that folder to your animator via FTP, USB drive or network, and then hide!
Conclusion
I hope you enjoyed learning how to create animation assets in Adobe Photoshop. Once you have the organisation side of this nailed, you can let your creativity go wild! I can't wait to see what Dave Bode creates with my elements!
