How to Make Animated Gifs

An animated gif

If you want a little bit of animation on your website but don't necessarily need all the bells and whistles of a Flash animation, an animated gif may be just what you're looking for. Unlike Flash, which uses vector graphics and streaming audio and video, an animated gif is simply a gif image with several frames that repeat over and over. While Flash is essential for truly complex animations, an animated gif can serve the purpose of bringing just a little bit of eye-catching animation to your website.

Things You'll Need

• Photoshop CS3

Instructions

1. 

   Create a new document in Photoshop that is the size you want your final animation to be. For web purposes it should be 72 pixels per inch (ppi) and RGB color. If it is for a web ad, follow the Internet Advertising Bureau's (IAB) standard specifications for web ads (see Resources section).

2. Make sure the "Layers" menu is showing. Go to Window>Layers and check "Layers" if it is not already.

3. 

   Create a new layer for each frame you want. For example, if you want a word to show up on one frame, type it in on a separate layer. Create a new layer for the next word you want to appear and type that word in. Repeat these steps for each animation frame you desire.

4. 

   Open the "Animation" menu (Window>Animation). Make sure it is in "Frames" mode by clicking the button in the lower-right-hand corner of the menu that toggles between "timeline" and "frame" mode.

5. 

   Click the eyeball icon in the 'Layers" menu to show only the layers you want in the first frame. In the example in the picture, only the word "Sample" and the background appear in the first frame.

6. 

   Choose "New Frame" in the "Animation" menu. Click the eyeballs in the "Layers" menu to show the layers you want to appear in the next frame. Continue these steps until you have all the frames you want.

7. 

   Select any or all of the frames to create the transition between them. For example, in the photo all the frames have been selected, and a one-second delay has been applied to the transition. This means the animation will have one second between each frame.

8. Click the "Play" button in the "Animation" menu to preview your animation. Adjust the timing until it looks the way you want.

9. 

   Go to File>Save For Web & Devices. This will allow you to save the graphic as an animated gif.

Tips & Warnings

• This tutorial uses Photoshop CS3. Earlier versions of Photoshop used ImageReady to create animations. Experiment with your layers and other options in the "Animations" menu to create different effects in your animation.

Resources

• The IAB's ad unit guidelines