Photoshop CC: The Missing Manual, 2nd Edition

Animating a GIF

You may think that creating an animation is a complicated process, but it’s really not. In Photoshop, all you do is create a slideshow that plays automatically. You can control which images the program uses, how long it displays each one, whether it loops the slideshow (automatically starts over), and so on.

This kind of control is really handy when you’re making website ads. For example, say you’re designing a 140 x 140-pixel ad for a costume shop, and you need to include a logo, a few costume samples, and a 10% off coupon. Since you’ll never fit all that into a tiny space, you can make an animated GIF that cycles through several images automatically. Here’s how:

1. Create a new document in the sRGB color workspace that’s the size you want the animation to be.

   Since sRGB is the predominant color space used on the Web, it’s helpful to design in that color space, too (doing so prevents colors from shifting when you save the GIF using the “Save for Web” command). Choose File→New. In the resulting dialog box, enter the size of your animation in the Width and Height fields, choose sRGB from the Color Profile menu, and then click OK.

2. Create the images you want to string together, putting each image on its own layer within the document you created in Step 1.

3. Open the Timeline panel by choosing Window→Timeline, and then create a frame animation.

   At the bottom of the Photoshop window (or near the bottom of your screen if you’ve got the Application Frame turned off on a Mac), a long ...