Creating animated gifs in Photoshop
This article is very old (2009-ish?) and the screenshots may be a bit outdated! Photoshop has changed a lot over the years, but the basic steps haven't.
This article is about creating animated gifs for banner ads (because my art director colleagues have asked me about this specifically), but really you can apply these concepts to any kind of simple animated gif that's basically a slideshow. Okay, let's use the example of a 160x600 pixel banner ad with three frames. Here's one I just made:
Start by designing your three frames and making them into three different Layer Comps. I've named mine Frame 1, Frame 2, and Frame 3.
Open up the Timeline dialog by going to "Window / Timeline."
Look at the Timeline dialog. If there's a button that says "Create Video Timeline," click that.
At the lower left, click the Frames icon with three tiny squares. (It's at the lower right in older versions.) This will change the Timeline view to show your frames of animation.
Once you're viewing the Timeline dialog as Frames, you'll see that you have one frame already present. Click the new frame icon twice to create two more frames.
Click on frame 2 and turn on the Layer Comp called Frame 2.
Click on frame 3 and turn on the Layer Comp called Frame 3.
You should now see all three frame thumbnails with the correct artwork in each.
Now let's tweak the timing. Click on the number of seconds below each frame and choose how many seconds you want it to play for.
Now let's set how many times the animation will play. Below frame 1, click to choose Once, 3 Times, Forever, etc.
You can test the timing of your animation by clicking the Play button under the frames.
Now you're ready to export your gif file.
Go to "File / Save for Web" (or "Save for Web & Devices" in some versions). A dialog will open up where you can choose preferences for your export.
At the top, choose the "2-Up" tab to see your original, uncompressed art on the left, and a preview of the compressed gif on the right.
At the right side of the screen, choose "GIF" in the dropdown of file formats.
Choose "Perceptual" in the next dropdown.
Choose "No Dither" in the next dropdown.
Under "Colors," choose 256.
Now look at your side-by-side comparison of the images. On the left side you're still looking at the lossless, uncompressed version of your Photoshop file, and on the right side you're looking at the preview of the GIF, as it will look when exported with the settings you just chose at the right.
Underneath of this preview on the right, you'll see the file size of the exported gif. Our file size limit for these gif banners is usually 40 kb, but check with your digital producer to be sure. If the file size you're seeing below the preview falls within our limit, then you're fine. You can click "Save" to export the finished gif file. This is the final file you can give to your producer so they can hand it off to the media company who will be serving the banners.
If the file size displayed under the preview is larger than your limit, you can try to reduce it by limiting the color palette. Where you chose 256 colors, try changing this to 128. Now take a look at both the new file size, and also the preview image itself. Your file size should be much lower, but the quality of the preview image might be a lot worse. Compressing gifs is alway this kind of give-and-take; a trade-off of file size for quality. If you're able to find a good balance that looks good and fits within your file size limit, then great. If you're not able to find a good balance, then that means your artwork is too complicated and has too large a color palette. This is why simpler is always better for these gifs.
The preview pane will only show you the first frame of your animation. In order to the see compressed animation actually playing, look for the buttons to the lower right side that look like video player controls. You can click the play button to see the animation of the compressed gif in the preview pane at right. If the animation looks okay and the file size is fine, then you're done; you can click "Save" to export the finished gif file. This is the final file you can give to your producer so they can hand it off to the media company who will be serving the banners. If you want to be absolutely sure the exported file is working correctly, you can drag it into your web browser to see it playing as it will when it is displayed on a webpage.
That's it!
Now, this example is really just the absolute most basic type of animated gif. In Photoshop you can also set up more interesting transition effects with tweens and stuff. That's an article for another day. But once you're comfortable with the steps above, you should feel encouraged to experiment with some more advanced techniques. It's all pretty easy.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.