Photoshop Tutorial - Animated GIF Animal

Add a little humor to your web posts with an animated animal GIF file. This Photoshop tutorial is for intermediate to experienced users of Photoshop 6.0 and higher. The same techniques can be used in Photoshop CS3 Extended, using the animation palette feature.

In this example, we will be using an elephant from one of my paintings. To use the image here (for practice or teaching only, please, no commercial use),
right click on the enlarged image, select "Save picture as" and save it to your desktop. Then, extract the head and ears as shown in this previous tutorial (click here). If you already know how to use the extract tool, please continue.

Our elephant will be wagging his head from side to side.

Step 1: make 2 copies of the elephant image. Save one for the background and use the other copy to extract the head.

Step 2: Select the extracted head and copy it. (first click "Select All", then Edit > Copy)

Step 3: Paste the head into the copy for the background image three times. Each time will make a separate layer. (Edit > Paste). Then erase the head on the background layer.

Step 4: On the first of the three layers use the selection tool to rotate the head as if the elephant is wagging his head off to your left side side. (make sure the little box on the toolbar that says "Show Transform Tools" is checked.)

Step 5: Leave the second layer's head facing straight forward and go to the third layer.

Step 6: Rotate the head to tilt to your right. (Hint: Use the clone tool to copy some of the skin texture and sky, in the spaces exposed on the background layer when the head tilts from side to side.)

Step 7: We will make our "jump" to Image Ready. Click the icon at the very bottom of the toolbar. Image-ready will open in a new window. Click on "Window" in the menu bar at top and make sure "Show layers" and Show animation" is checked in the dropdown.You should see the first frame displayed in the animation palette. Create three more frames by clicking on the new frame icon at the bottom right (next to the trash-can icon). (Refer to image #3)

Step 8: On the first frame, make the first layer (only) visible by clicking on the "eye" icon on the other two layers to make them invisible. (The one with head wagging to your left)

Step 9: On the second frame, make the middle layer (only) visible by clicking the eye icon on the other two to make them invisible. (The one with the head facing forward)

Step 10: Do the same on the third frame to make the top layer (only) visible.(the head wagging to your right)

Step 11: Make the fourth frame just like the second, that is, the one facing forward. So you should have 4 frames, one with the head wagging left, one with the elephant facing straight forward, one with the head wagging left and the last with the head facing forward again. All that is left to do is to set the frame rate for each frame. This is easy to do.

Step 12: Directly below each small frame in the animation palette is the frame-rate selector that reads "0 sec" by default. Click on the tiny arrow at the right of the frame-rate and, in the pop-up dialog box, enter the frame-rate "0.2 sec". Play the animation. The elephant wags his head. Set the sequence to run "Forever" (on the bottom right), and your elephant will wag as long as he is displayed. Make sure to save the animation by selecting "File > Save Optimized As". Save it as a GIF file.

Try this out with other animal images, people or cartoon characters. Happy Animating!