Create Animated GIFs With Photoshop (And Without ImageReady)

Regular Feature: How-To's Day

With CS2, Photoshop now carries its own Animation palette outside of ImageReady, thus giving you all the tools you need to create animated GIFs. Here’s how!

animated GIF

It’s true—with Photoshop CS2, you can now create sophisticated animated GIFs exactly as in ImageReady. The key is the recent addition of the Animation palette, which allows you to build the frames that make up the animation, and the Save For Web menu item, which has been a part of Photoshop for a couple iterations now but I don’t think gets much action unless you are saving slices at different optimizations or GIFs with customized color tables.

In this How-To article I am going to animate a clock face and save it as an animated GIF; you can see the final product rolling away above. We’re going to assume that you know how ImageReady works and how layers are used to create animations. In the case of my clock face, I have to create a layer for each hand movement (see Figure 1 to see all my layers visible at once).

howto1Figure 1: My clock face with all layers visible. One hand per layer, so this clock gets pretty crowded….

Step 1: Create the layers needed for your animation (in my case, one layer for each minute hand and hour hand movement, plus the clock face).

Step 2: Open the Animation palette (Window –> Animation). The Animation palette will appear exactly as in ImageReady, as well as the icons in the Layers palette associated with animations such as Match Position, Match Visibility and Match effects.

Step 3: Create the frames in the Animation palette needed for animation and set layer visibility for each frame. For this example I require twelve frames, and for each one I make visible the hour hand and minute hand each one calls for. Figure 2 shows frames 8–12 of my animation.

howto2Figure 2: Frames 8–12 of my animation. You can see how the clock hands are moving.

Step 4: Set timing as required. I don’t want my clock to run at the speed of light, so I’ll select all frames by selecting frame 1 and shift-clicking frame 12, then click any one of the frames’ delay times to get a drop-down menu where I can change the delay timing. I set the delay of my frames to 0.2 seconds.

Step 5: At this point it may be a good idea to play the animation by clicking the Play button in the Animation palette. Photoshop will scroll through the frames and run the animation.

Step 6: Once the layers are doing what you want and the frames are running the speed you want, select File –> Save For Web…. The Macintosh keyboard shortcut is Shift-Cmd-Ctrl-S, and on the PC it’s Shift-Alt-Ctrl-S. Figure 3 shows the Save For Web dialog box, a complex interface for optimizing and saving web images. You’ll see at the top that it’s “powered by ImageReady”, which is something of an understatement—this technology was lifted right out of the application, the same way the Animation palette was. On the right side you’ll see the same playback controls that were in the Animation palette—this is a new addition required by the introduction of this palette, and give you one more opportunity to play your frames.

howto3Figure 3: The Save For Web dialog box.

Save For Web has too many features and options to be covered fully in this How-To, but for our purposes the only thing to make certain is that “GIF” is selected in the drop-down menu on the right side. This drop-down menu controls file format output and is surrounded by several other optimization settings including colors, dithering, lossy amount and transparency. If you create a lot of animated GIFs for the web you’ll want to learn how these work, as they can make a too-large web graphic small enough to run well online.

Step 7: With GIF selected in the Save For Web dialog box, click Save. You’ll be presented with the Save dialog box, and your image will now have .gif after its file name. Click Save once more to save your image.

animated GIFFigure 4: The final product: an animated GIF!

That’s it! You now have your animated GIF (Figure 4) ready to insert into your website, and ImageReady wasn’t required. If you have questions about this How-To tutorial, please comment in the field below and I’ll try to post some answers or even a follow-up article. And if you have a whole new question about Photoshop (“How do you do this?” “Is it possible to do this?” “I have a client who wants this, but I don’t know how to do it…”) drop me a line and I’ll cover it either as a How-To tutorial or in my Ask D:Photoshop section!

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.