Photoshop CC: The Missing Manual

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 140x140-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 the images you want to string together, putting each image on its own layer within the same Photoshop document.

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

   At the bottom of Photoshop’s Application Frame (or near the bottom of your screen if you’ve got the Application Frame turned off), a long horizontal Timeline panel appears. This panel also has controls for video editing (see Chapter 21), so you need to switch it to animation mode by clicking the downward-pointing triangle to the right of the Create Video Timeline button (Figure 18-5, top). Choose Create Frame Animation, and then click the Create Frame Animation button to the triangle’s left. Photoshop then displays one frame representing what’s currently visible in the Layers panel (each frame serves as a ...