How to Make Animated GIFs on a Mac

An animated GIF created on a Mac.

Animated GIFs are a great alternative to Flash animations if all you need is a web banner with some simple transitions. While animated GIFs can't provide all the features of Flash animations, they can make a nice, dynamic addition to a web page. The easiest way to make animated GIFs is in Adobe Photoshop--and of course, Macs were made to run graphics programs like Photoshop.

Things You'll Need

• Photoshop CS3

Instructions

1. 

   Create a new document in Photoshop by going to File>New or hitting "Cmd+N" on the keyboard. Create a document of whatever size you like; keep in mind that the Internet Advertising Bureau has standardized sizes for web ads (see Resources). Web graphics should be RGB color and 72 pixels per inch (ppi).

2. Make sure the "Layers" palette is showing by going to Windows>Layers or hitting "F7".

3. 

   Create a separate layer for each frame by clicking "Shift+Cmd+N" in Photoshop and typing or placing art in the new layer. In the example, in the photo the words "Sample," "Animated" and "Gif" will appear in separate frames, so they are each on separate layers.

4. 

   Open the "Animation" palette by going to Window>Animation. Set the palette to "frame animation" by clicking the icon in the lower right-hand corner of the palette. Click the eyeball icon next to each layer in the "Layers" palette to show or hide separate layers--the eyeball should be "on" only on 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.

5. 

   Choose "New Frame" in the "Animation" palette. Click the eyeballs in the "Layers" palette to show the layers you want to appear in the next frame. Continue these steps until you have all the frames you want. Adding the blank background layer at the end of the frame gives the animation the effect of cycling from a blank canvas.

6. Select each frame to create the transition between them. In this example, a half-second delay has been applied to the transition. This means the animation will have a half-second between each frame.

7. Click "Play" in the "Animation" palette to preview the animated GIF. Continue to experiment with timing until you have the desired effect.

8. Go to "File>Save For Web & Devices". This opens up a new window. Click "Save" to save your animated GIF.

Resources

• Internet Advertising Bureau's ad unit guidelines