Hello again! This post is part two of a tutorial which introduces you to the basics of Adobe Photoshop's animation tool set
. If you've never heard that Photoshop has animation tools, then I encourage you to do a quick read
before jumping into this one.
A quick lesson in animation: there are two techniques to animating, straight ahead and pose to pose
. Which you use depends largely on what you're animating. Straight ahead means you animate each frame sequentially one after another. Pose to pose, however, requires a bit more planning. You first draw the extremes, or the most expressive frames, followed by the frames in between those extremes.
In game development, I typically use pose to pose for cycle animations (i.e. run cycles, walk cycles, jumps, idles). Straight ahead I save for actions (i.e. climb, punch). For the bouncing ball we're about to do, we'll use pose to pose.
1. Let's get started: if you haven't already, open Photoshop up and create a blank canvas, let's say 256 by 256.
2. From here, we can open our Animation Pane. It can be found under Window > Animation.
3. Create 12 frames of blank animation. Once that's done, create a new layer and label it "blocking". On "blocking", draw a circle. This will be used to basically sketch out where our bouncing ball will bounce.
4. Once open, make sure the Frame option is selected. Also, uncheck "Propagate Frame 1" at the top of your layers pane. This option toggles whether or not any changes made on the first frame occur in all the other frames.
5. Remember that since we're doing pose to pose, we want to block out the extremes of our animation. For a bouncing ball, we'll say those are the highest and lowest points. Select the 6th frame, and move the Blocking layer to a high point on the canvas, or the highest point you want your bouncing ball to travel.
6. Now select the 12th frame, and move that same layer to the lowest point. For anyone a little more experienced out there, don't worry about adding any details like squash and stretch quite yet. We'll get to that later.
7. There! Both of your extremes are in place. Now, fill in the frames in between by moving your same "blocking" layer on each frame. At this point, make sure you play the animation occasionally, and make any tweaks necessary to give it a nice arc. Bounce a real ball if you have to remember how it looks! Keep in mind that any minor changes now, save you from major changes down the road.
8. I've found that a great way to stay organized is to have a folder represent each frame. Since this is a simple animation, create 12 layers instead and label them corresponding to each frame. Once you do so, make sure only the blocking layer and the corresponding layer are visible in each frame.
9. Using your blocking as reference, draw a ball on each new layer. Here's where you can take into consideration some of the principles of animation
: squashing the ball when it hits the ground, and stretching it as it rockets to the sky.
10. Make sure you still keep it relatively simple, and play it often to see how it looks. Once you have each layer drawn and it feels good, you can make a second pass to add detail like shadows and highlights.
There you go! Your first Photoshop animation. You can save it as an animated GIF, an image sequence (one image for each frame), or you can use Retro Affect's custom animation exporter
that puts each frame into a sprite sheet.
Here's the finished PSD
used in the example for reference too.
Comment with any questions or tips you may have!