Mobile Video Shorts for Still Image Artists (Part 1)

Part One: Animating a Walk Cycle in Photoshop

If you do not regularly create graphics for the web, or graphics for video, and you use Adobe Photoshop, then you might not have explored a program that comes bundled with Photoshop, called Image Ready.

Image Ready can create gif animations, those small animated images you see on many web sites that preceded Flash animation. Gif animations can be imported into video editing programs like Adobe Premiere where they retain their step-by-step motion. You can also convert gifs to a common video interchange format, avi, and then import it into a program for adding music and sound effects. Just do a search on Google for “gif to avi convert”. You can also import gifs into Flash, a subject we will cover in the next tutorial.

Animations like a waving flag or a flying bird are simply a series of images with small incremental changes, like the flapping of a bird's wing broken down to 15 different stages. When individual frames are played back fast enough in a gif animation, they fool the eye into seeing continuous motion.

The advantage of using Photoshop for simple frame-by-frame animation is the wealth of tools found in the Photoshop application. And Photoshop image layers have special advantages for frame-by-frame animation, as we will see.
In this tutorial we are going to use a series of images of a man walking up stairs. The images come from studies of motion made by the Victorian photographer Eadweard Muybridge, who used stop-motion photography to freeze movement into discrete frames. Our source is a study of a man walking up stairs, from a photographic plate he published in the late 19th century:






Here is the finished animation we will be creating. We created him so he is walking on one spot...as if the camera is following him at right angles.



So you can follow along with this tutorial, we have uploaded the full size Muybridge asset here.

Save this image to your hard drive.
We assume a working knowledge of Photoshop in this tutorial and that you have a recent version.

Introduction

Refer back to the Muybridge plate above. Muybridge has shot a complete walk cycle that begins with the man's right leg propelling him up the stairs, then the other. The first and last frame match, so we are going to use only eleven of the twelve frames to create the stair climbing animation cycle. If we left in the last (twelfth) frame the man would appear to hesitate on the last frame of the cycle before continuing on.

We could simply cut up the individual frames in Photoshop, save them as a numbered sequence and then load them into Image Ready. But this would create an animation where the man would appear to bob around in the frame because the body would be framed differently in each image of the animation cycle. In some frames he would weave back, then forward, jumping erratically up and down. To correct this, we will use semi-transparent Photoshop layers to line up the body to the same reference point.
We cleaned up the background and adjusted the colors in each frame of the original reproduction because each frame is exposed slightly differently. We'll also use Photoshop's filters to give the sequence a more graphic and colorful look.

Preparing the Image

1. Load the image into Photoshop.
2. Use the Image > Adjustments > Warming Filter to give the image a slight greenish tone. (You can change the selected color by clicking on the color swatch and choosing a different color.)



Now we are going to cut the image up into individual frames and save them as individual files on the hard drive.

3. Using the Rectangular Marquee Tool, drag around the first frame of the man walking up the stairs, use Image > Crop to trim and save the resulting single frame as an uncompressed windows bitmap (bmp) with the file name 01.bmp. After saving, undo the last action (Ctrl-Alt-Z) to return the image to full size again. Use the marquee tool to select the second frame, crop that and save it as 02.bmp. Repeat until you have created all 11 frames as individual bmp files. The twelfth frame is skipped.

Tip: We have done the grunt work for you. To download the eleven frames click here.

Now we are going to load these individual items back into a single image file with layers, using as our new image size the pixel dimensions of the QCIF cell phone screen.

4. Open a new file, select RGB color and size it as 176x144 pixels. This will create a portrait-oriented file.

5. Create eleven new layers by clicking on the New Layer button at the bottom of the Layers Palette.


6. Select Layer 11, use the File > Place command, and select the 01.bmp image, press Enter to confirm.

7. Select Layer 10 and place 02.bmp. Do the same for the other layers and images.

8. The images will have white borders on each side. Using the paint bucket and a black foreground color, click on the 01 layer, answer "yes" to the question about rasterization, and fill in the white sides. Then turn off the visibility of layer 01 by clicking on the "eye" icon beside the layer name.

9. Click on Layer 2 to select it and fill in its white sides. Click on the eye icon to hide the layer. Repeat for all the layers. Delete the empty ground layer.

10. The visibility of all the layers should now be turned off. Turn on layer 11 and remove the staircase. (We used the marquee tool to select the area to delete and then press the Delete key. We then fill in the deleted area with the black of the background. Then we centered the walking man horizontally and moved him down in the frame to match what you see here:


The man is not actually going to walk up the stairs...he is going to march on the spot. We are going to use the position of the man in Layer 11 as a reference for all other layers. Lock the layer by clicking on the Lock Icon at the top right of the Layer Palette.

11. Select Layer 10 and turn its visibility on. Delete the staircase. Using the Opacity slider at the top right of the Layers Palette, make the layer semi-transparent by moving the slider to about the 50% mark. You should see the man on Layer 11 showing through. (Make sure Layer 11 is visible.) Now select the man and move him so that his head and shoulders overlap reasonably well with the man in Layer 11. Move the opacity slider back over to 100% and hide Layer 10.

12. Do the same for each successive layer, deleting the staircase and moving the man so that he lines up with the man in Layer 11.

You now have an image with 11 layers of a man walking up the stairs. Now we are going to load the images into Image Ready.

Creating the GIF Animation in Image Ready

The next step is to export the layers of the image as images. Then the images can be loaded into Image Ready. Make sure all the layers of the image are at 100% opacity before you start.

1. Create a folder on your hard drive.

2. Under the Photoshop files menu, select Scripts > Export Layers to Files. Save the layers to BMP type files in the folder you just created.

3. Now open up Image Ready.

4. Under the File menu, select Import > Folder as Frames. Navigate to the folder where you just saved the Photoshop layers as files and select it.

You should see a whirl of activity as each frame of the animation is read into Image Ready

Eventually the animation palette will fill and should look like this:



5. Click on the play animation button just below the third frame of the animation in the animation palette.

You should see an animation like this:


At this point you can save the animation as a GIF (using the file menu's "Save Optimized As...") and then load it into a program like Adobe Flash for further animation, such as a walk up stairs. Or you can use the actual BMP files in the Photoshop export folder you created earlier.

This is the end of Part One of this tutorial. In Part Two we'll explore a more ambitious technique.