How to Animate a GIF

GIF animations were heavily used for web advertisement before Flash-based advertisement became the more popular tool for the web. Still, GIF animations have the advantage of not needing to be programmed by the designer. GIF animations also have no conflicts with browser compatibility, and additional plug-ins are not required to display the GIF. Any Photoshop user can easily create GIF animations. This article with show you how to use Photoshop and ImageReady to create an animated GIF.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Adobe Photoshop
• ImageReady

1. Create your graphics in Photoshop. For this article we will create a smiley face, since it is easy to draw and animate. Choose the "Ellipse" tool from the tool palette and draw a black circle. Make sure the foreground color is selected as black.

2. Create a layer for each motion of the image you wish to animate. You do this by clicking inside the "Layers Options" section at the bottom right corner of the Photoshop interface.

3. To ensure that you are not skipping any motions for your animation, just click on the eyeball in each layer.

4. Once you are finished creating all motions in Photoshop, select the first scene in "Layer(s)" and save the file.

5. Switch to ImageReady by clicking the switching icon on the bottom of the tool palette. Or go to "File--Edit" in ImageReady.

6. With the same file opened, go to "Window--Animation" to set the animation palette.

7. Click on a new document icon to create a duplicate frame. You will see the name of this button floating around, reading “Duplicates selected frames.”

8. Click the next scene in layer.

9. Repeat Steps 5 and 6 until the end of the animation sequence. (It's your decision where it ends.) To delete any frames that you do not want, click on the "Trash Can" icon in the palette.

10. Choose how many times you want the animation to loop by clicking on the "Forever" button. Decide how many minutes you want for each frame. Keep in mind that the frame counts as one movement.

11. Play the animation by clicking on the "Play" button to see the final animation.

12. Open up the “Optimize” palette (Window--Optimize). Click on the "2-Up" or "4-Up" tab to compare the file sizes.In Optimize palette, adjust the file size from the number of colors, "Reduction" and "Dither" options.Once you've finalized the animation and file size, go to "File--Save Optimized As.” In the pop-up window, name the file, and choose “Image Only (*.gif)“ with the default settings. Enjoy your new animation!