How to Make Animated GIFs on a Mac

by Liz Turner

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.

Creating a new document.

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).

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

These three layers will each become separate animation frames.

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.

The first frame has only the

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.


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.

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.

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

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

Items you will need

About the Author

Liz Turner has been writing since 1994. Her work has been published in several technology publications and local newspapers, as well as on eHow and LIVESTRONG.COM. She has writing and editing experience in technology, business, children's issues, travel, animal care, beauty, health and fitness topics. She has a Bachelor of Arts in English from the University of Central Florida.

Photo Credits

  • photo_camera Amy Weiss