Find » Arts & Entertainment » Photoshop Tutorial - Animated GIF A...

Photoshop Tutorial - Animated GIF Animal

Create Animation Using Photoshop and ImageReady

By David Claerr, published Dec 06, 2007
Published Content: 49  Total Views: 95,096  Favorited By: 4 CPs
Embed:  
Rating: 4.0 of 5
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)

Photoshop Tutorial - Animated GIF Animal
Photoshop Tutorial - Animated GIF Animal

Image for practice use - re-save as .psd file

Credit: David A.Claerr

Copyright: David A. Claerr

Takeaways
  • Ad interest to your web posts with simple Animated GIFs
Comments
Type in Your Comments Below - (1000 characters left)
Your name:

Submit your own content on this or any topic. Get started »
Advertisment