Creating Animated GIFs in Photoshop 7 and ImageReady

By Lynda Weinman, Jan Kabili. Sample Chapter is provided courtesy of Peachpit Press.  

One of the coolest things about authoring for the Web is that you can include animation, which is something that print publishing obviously can't offer. If you have a background in printing, It's likely that this is the first design medium you've ever worked in that supports animation. If that's the case, you're very lucky that you get to learn with such great tools as Photoshop and ImageReady. If you've done animation before, you'll still be grateful for these tools, because you probably had to learn on systems that were much more difficult.

 

Although animation appears to move when seen on a computer screen, the movement is actually created from a series of still images. The GIF format is popular for Web animation because it can contain a series of static images and display them one after the other in sequence, much like a slide show. It's also popular because it is backwards-compatible with older browsers.

 Although you can prepare images for animation in Photoshop, the only place that you can write animated GIFs is inside ImageReady. For this reason, all the exercises in this chapter take place in ImageReady.

Animation Terms

If you are new to creating animation in ImageReady, here are some illustrations to help familiarize you with several new terms and interface elements.

Animation palette: You'll create animations in ImageReady by using the Animation palette. A: This displays the frame number. B: Here is where you set how many times the animation plays. C: Here is where you set the delay of each frame. D: These are the playback controls. E: The Tween button tells ImageReady to automatically generate intermediate frames between keyframes you create. F: The New Frame icon creates a new frame by duplicating the selected frame. G: Use the Delete Frame icon to delete a frame.

Frames: ImageReady's Animation palette numbers frames sequentially. A single frame indicates that the image is static, but two or more different frames displayed in sequence will create the illusion of movement.

Frame-by-frame animation: You create this kind of animation by turning on and off different layers over a series of frames.

Position tween: You create a tween in ImageReady by taking two different frames (called keyframes) and applying the Tween command, which automatically creates additional frames between the keyframes. When you apply a position tween, one layer of artwork changes position over a number of frames.

Opacity tween: You can apply an opacity tween to a layer of artwork to change its opacity over a number of frames.

Layer effect tween: You can apply a layer effect to a layer of artwork and then tween that effect so that it changes over a number of frames.

Animated GIF Format

The GIF file format supports animation, but the JPEG format does not. A Web browser treats an animated GIF file no differently than a static GIF file, except that an animated GIF displays multiple images in a sequence, much like a slide show, instead of a single image. Additionally, different frames can contain different timings, allowing you to design your animations so that one frame pauses for a few seconds while other frames display in a quicker sequence.

Animated GIF files do not require browser plug-ins, which means they are accessible to all Web browsers (with the exception of text-only or 1.0 browsers). The HTML code for inserting an animated GIF is no different than that for a static GIF, so working with these animation files requires no extra programming expertise. Animated GIF files can be instructed to loop (or repeat endlessly), to play only once, or to play a specific number of times. The number of repetitions is stored in the file itself, not in the HTML code.

Compression Challenges

The animated GIF format uses the same principles of compression that apply to static GIF images. Large areas of solid color compress better than areas with a lot of noise or detail. If you do use photographic-style images in an animated GIF, be sure to add lossy compression. It will make a substantial difference in file savings.

Animated GIFs will always be larger than static GIFs. ImageReady has two animation compression features—Bounding Box and Redundant Pixel Removal that are turned on by default. What this means is that ImageReady will add file size only for the areas that have changed in your animation. If you have a photographic background, and the only thing that changes is some lettering that fades up over it, the photographic area will be written only once to the file, limiting the total file size. If you change every pixel of an animation, as in the animated slide show example in Exercise 10 in this chapter, the Bounding Box and Redundant Pixel Removal features won't be able to help keep the file size down.

When you compress an animated GIF, keep in mind that the file will stream in, meaning that frames will appear before the entire file has finished loading. For this reason, we usually divide the file size by the number of frames, and that makes us feel a lot better about big file sizes. For example, if we have a 100K animated GIF file that is 10 frames long, in reality each frame is only 10K, which makes us feel more at ease about publishing such a big file to the Web.

Controlling the Timing of Animated GIFs

Animation is time-based, meaning that it depends on time passing as well as its artwork changing. If you alter artwork very slowly in an animation, it doesn't appear to move, but to sit for a long time and then change. If you change artwork very quickly, it appears to have more fluid movement.

Sometimes slide-show style animation is what you'll want, and other times you'll want to make movement happen more quickly. The GIF format supports delays between frames, which allows for the timing to change within a single animation file.

Video and film animation are also time-based mediums, with one key difference from animated GIFs: Video and film play back at specific frame rates (30 frames per second for video, 24 frames per second for film). Unfortunately, animated GIF files may play back at different speeds depending on the computer upon which they are viewed. A slow Mac or PC (386, 486, 030, 040, or Power PC) will play an animation much more slowly than a new G4 or Pentium IV. There's no controlling that the animation you author will play back at different speeds on different processors. The only suggestion we can make is that you view your work on an older machine if you can, before you publish it to the Web. This isn't always possible or practical, and the truth is that most people don't have a lot of old computers lying around to test with. It doesn't stop anyone from publishing animation, but it does mean that you might be surprised when you view your work on older machines.

Animation Aesthetics

Animation draws your end-user's eye much more than a static image. Make sure that the subject matter you pick for animation is worthy of more attention than other images on your screen. We've seen Web pages containing so much animation that it distracts from the important content rather than enhancing it. Good uses for animation might include ad banners, making certain words move so they stand out, diagrams brought to life, slide shows of photographs, or cartoon characters. You'll learn how to do some of these different kinds of animation in this chapter.  

 

1. Frame-by-Frame Animation with Layers

This exercise walks you through the process of establishing frame-by-frame animation by turning layers on and off.

ImageReady can work with existing files made in Photoshop, or with artwork you create in ImageReady. It is important to note, however, that Photoshop 7 cannot write animated GIF files, which is why this entire chapter takes place in ImageReady.

Make sure the Animation and Layers palettes are open (Window > Animation and Window > Layers). Click the Play button at the bottom of the Animation palette to watch the animation play inside the document window. You'll see the letters in the word coffee jitter on the screen. (If the image doesn't look any different, either make sure you clicked the Play button, or cut back on the caffeine!)

When you clicked the Play button, it immediately became the Stop button. Click the Stop button now that you've watched the animation.

Select each frame in the Animation palette, and notice that as you do, the Visibility icons (the Eye icons) on different layers in the Layers palette turn on and off.

This animation was created by writing the word coffee three times, on three different layers. The layers were then selectively turned on and off in each frame of the animation. You will learn how to build this file in the following steps.

Close animation_finished.psd, and do not save if prompted.

Open animation.psd from the chap_13 folder. It contains only a single frame in the Animation palette.

To make this document into an animation, the Animation palette must contain at least two frames with different content in each one. One way to achieve this is to turn the visibility of different layers on and off between frames, as you just witnessed. The layers in this exercise have already been created for you. You will learn to create new frames and turn layers on and off in the following steps.

 

On the first frame, make sure that there is an Eye icon next to the animation 1 and white background layers, so that those layers are visible.

 

Click the New Frame icon at the bottom of the Animation palette to create frame 2, which will be a duplicate of frame 1. Make sure frame 2 is selected in the Animation palette (it should be selected by default). In the Layers palette, turn off the visibility of the layer animation 1 by clicking its Eye icon off, and turn on the visibility of the layer animation 2 by clicking its Eye icon on. Leave the layer white background turned on.

It does not matter which layer is selected in the Layers palette when you are turning layer visibility on or off with the Eye icons. ImageReady and Photoshop allow you to turn layers on and off without selecting a particular layer.

With frame 2 selected, click the New Frame icon on the Animation palette again to create a third frame. Frame 3 is a duplicate of frame 2. With frame 3 selected, turn off animation 2 and turn on animation 3 in the Layers palette. Leave the layer white background turned on.

Click the Play button on the Animation palette to watch your work. Click Stop when you're through admiring it.

Choose File > Save and leave the file open for the next exercise.

You might be surprised at how easy it was to set up your first animation in ImageReady. Animated GIFs have never been easier to make as far as we're concerned!  

 

2. Setting the Speed and Looping

This exercise focuses on how to slow down the speed and change the looping from a Forever setting, like the one you just played and stopped, to a specific number of repeats.

With animation.psd open from the last exercise, play the animation again by clicking the Play button on the Animation palette. Notice that it loops indefinitely? Click and hold down on the Forever pop-up menu at the bottom left of the Animation palette. Change it to Once, and click Play again. The animation should play only once. Return the setting to Forever once you've explored this setting.

TIP

If you want the animation to play more than once but less than forever, choose the Other setting and enter the number of repeats you prefer. This particular animation will look best if it loops forever, but now you know how to change the looping if you want to for future animation projects.

 

 

Preview this file in a browser by clicking the Preview in Default Browser button in the ImageReady Toolbox. Notice that the animation plays much faster than it did when you previewed it by clicking Play. That's because ImageReady builds the animation as it plays back, while the browser plays the animated GIF that is already built. You'll notice that the animation plays too fast in the browser. Return to ImageReady to slow down the pacing.

NOTE

 

If you see the message above when clicking on the Preview in Default Browser button, make sure that you have GIF selected in ImageReady's Optimize palette. Only GIFs can be animated.

It's impossible to estimate the speed of the animation unless you preview it in a browser. In most cases, this one included, the animation plays much faster in the browser than it does in ImageReady. For this reason, it's always important to view the animation in a browser before you finalize your speed settings. However, even in your browser you can't tell the true speed of the animation, because that depends in part on the speed of the processor in each viewer's computer.

 

Click the arrow in the upper-right corner of the Animation palette and choose Select All Frames.

Don't be confused by the fact that all the frames don't have a black border. The highlighting that's now around all the frames indicates that they are all selected.

 

Click and hold down on any of the frame delay settings that currently read 0 sec. From the pop-up menu choose 0.1 seconds. All the frames should change at once.

 

All of the frames should now appear with the 0.1 sec. timing in the pop-up menu. Preview in the browser (Preview in Default Browser button) to see how the timing of the animation slowed down a little. Tip: You can change the rate of individual frames if you want, or change all of them at once by selecting all the frames first, as you did here.

Leave the document open for the next exercise. Don't save yet. You'll focus on saving an animated GIF in the following exercise.  

 

3. Optimizing and Saving an Animated GIF

Has all of this seemed too simple so far? Perhaps you're thinking that there must be something more to creating animations in ImageReady? Nope. The only thing left to do is to optimize this animation and save it as a GIF. You'll see that there is little difference between saving an animated GIF and saving just a plain old static GIF.

Make sure that the Optimize and Color Table palettes are open (Window > Optimize). Note that there may be nothing in the Color Table, and the warning symbol may appear at the lower-left corner of this palette, which is there to alert you that this document has never been optimized. Switch to the Optimized tab in the document window, and the warning symbol will disappear.

NOTE | Animation Must Be Saved As GIF

When creating animation, it's essential that you use the GIF setting instead of JPEG. There is no such thing as an animated JPEG. If you do use JPEG or PNG, you'll see only the first frame of the document in the browser, and the animation won't play.

Go ahead and experiment with changing the settings in the Optimize palette.

The optimization settings that you apply to an individual frame will automatically apply to all the frames in your animation. So if you've used very different artwork on different frames, it's a good idea to click through the frames in the Animation palette to check that the optimization settings you've chosen look good on all frames. This isn't an issue with this particular file, because the artwork on each frame is so similar.

Notice that we have set Lossy to 38. Lossy compression will often help animated GIFs (as well as static GIFs) get much smaller. This compression feature was introduced back in ImageReady 2.

hoose File > Save Optimized As, and you'll be prompted to save this as animation.gif. You do not need to save HTML in this instance, just choose Images Only in the Format (Mac) or Save as type (Windows) field. Navigate to the chap_13 folder that you copied to your hard drive and click Save. That's all there is to it.

You might wonder why we suggested that you save the images (but not the HTML) in this instance. An animated GIF file knows to function properly with or without the accompanying HTML. You can insert this animated GIF into an HTML editor just as you would insert any static GIF. You can even load an animated GIF directly into a browser without having any HTML. Try it, if you'd like. In Netscape Navigator, choose File > Open > Page, or in Internet Explorer, choose File > Open File, and navigate to animation.gif, or simply drag and drop animation.gif into an open browser window. How does the browser know to display this file as an animation? The browser recognizes an animated GIF if more than one frame has been saved in the file.

Choose File > Save to save animation.psd, and keep it open for the next exercise.  

 

4. Making a Transparent Animated GIF

What if you want to make a transparent animated GIF? The process is almost identical to making a transparent static GIF, with a few other issues thrown into the mix, like how to effect a change throughout an entire animation by using the Match Layers Across Frames setting. This exercise lets you practice this technique.

 

With animation.psd still open from the last exercise, make sure you have frame 3 selected. Turn off the Eye icon for white background in the Layers palette. Click on the Original tab, and you should see a checkerboard background inside the document window. This indicates a transparent GIF.

If you look carefully at the Animation palette, you will see that this change was made only for the frame that was selected, which means that ImageReady doesn't yet know that you want this change to occur throughout the entire animation. You'll remedy that next.

 

Select the white background layer inside the Layers palette. If the Eye icon appears, click it to turn it off again. Click on the arrow in the upper-right corner of the Layers palette, and choose Match from the pop-up menu.

In the Match Layer dialog box, click Current Animation in Frames to Match, and make sure all three check boxes are selected under the What to Match section. Click OK. You'll see that all the frames now have a transparent background.

When using the Match Layer Across Frames feature, it's essential that the layer you are matching is selected inside the Layers palette.

Choose File > Output Settings > Background, and click on Choose to select fine_bg2.gif from the chap_13 folder. Click Open and then OK.

Click on the Optimized tab of the document window to check the optimization settings. Make sure the Optimize and Color Table palettes are open. Make sure that Transparency is checked in the Optimize palette. If you cannot see the Transparency check box, click on the arrow in the upper-right corner of the palette and choose Show Options.

 

Preview this in a browser by clicking the Preview in Default Browser button in the Toolbox. The animation appears over the background image.

 

There's that unattractive white edge again, which you might remember from making transparent GIFs in Chapter 9, "Transparent GIFs." The next step will show you how to fix the problem.

 

Return to ImageReady, choose File > Open, and navigate to fine_bg2.gif in the chap_13 folder. Use the Eyedropper tool from the Toolbox to capture the color from this image. Go back to animation.psd. (You can either click on it to make it active, or choose Window > Documents > animation.psd.)

 

In the Optimize palette, click on the arrow to the right of the Matte field and choose Foreground Color from the pop-up menu. Changes in the Optimize palette apply to all the frames in the animation.

Preview in the browser again and you should see a perfect transparent animated GIF.

If you need help running through this process, revisit Chapter 9, "Transparent GIFs," to jog your memory. Making an animated transparent GIF has the same challenges as making a static transparent GIF. It's our hope that you can now transfer the skills you built in Chapter 9 to this new application of the same principles.

Return to ImageReady and save animation.psd and close it. Close fine_bg2.gif.  

 

5. Tweening with Opacity

So far, you've been making animations by turning on and off layer visibility. This is one way to do it, but ImageReady has a few other tricks up its sleeve. This next exercise will introduce you to the Tween feature.

Make sure the Green Tea layer is selected in the Layers palette; then enter Opacity: 1%. The words Green Tea should disappear.

Click the New Frame icon at the bottom of the Animation palette.

 

This will create a second frame with the exact settings that were in frame 1. To create another Opacity setting, which you need for the tween, you'll change frame 2 in the next step.

Frame 1 and frame 2 are the keyframes for this animation. When you tween later in this exercise, ImageReady will generate intermediate frames between these keyframes.

 

The new frame 2 you just created is highlighted, so any changes you make will apply to it. Select the Green Tea layer in the Layers palette and enter Opacity: 100%. This makes the words Green Tea visible in frame 2.

Now that you've established the two keyframes, you'll have ImageReady tween the animation between the two frames.

 

Click the Tween button on the Animation palette.

NOTE

Another way to tween is to click the arrow on the upper-right corner of the Animation palette and choose Tween from the pop-up menu.

 

When the Tween dialog box appears, enter Frames to Add: 10. Make sure there is a checkmark next to the Opacity parameter, because opacity is the quality you want to tween. 

Click OK.

The default is for all three of the parameters—Position, Opacity, and Effects—to be checked in the Tween dialog box. We usually leave it that way, so we don't have to think about which box to check each time.

You now have 12 frames in the Animation palette. Click Play to test the animation. You should see the word Green Tea fade up over the photographic background. Click Stop.

This particular animation might look best if it only plays once. Do you remember how to change the Forever setting? If not, revisit Exercise 2 in this chapter.

Click on any frame, click on the Optimized tab in the document window, and change the settings in the Optimize palette to match those in this figure. Click the Preview in Default Browser button to preview the animation in a browser.

Although it's convenient to preview your animation in ImageReady, don't forget to test this file in a browser as well, because you'll always get the best indication of speed in the browser, not in ImageReady.

We asked you to optimize because otherwise ImageReady will use the optimization settings from the last image that you worked on, which will make it difficult to see this animation in a browser. But don't get too worried about how you optimize this image. This exercise was created to familiarize you with tweening; other exercises in this chapter cover optimization techniques for animated GIF files.

Save and leave the file open for the next exercise.  

 

6. Selecting, Duplicating, and Reversing Frames

What if you wanted to make the words fade up, then hold, then fade out? This type of change is not only possible to do in ImageReady, it's easy once you know the steps.

 

With green_tea.psd still open from the previous exercise, click on frame 1 in the Animation palette. Hold down your Shift key and click the last frame. All the frames should be selected.

With all the frames selected, click on the New Frame icon at the bottom of the Animation palette. This duplicates all the selected frames and appends them to the end of the frames that were already there.

TIP

This technique offers a fast way to copy and paste. There's another way to do this in ImageReady. With all the frames selected, you can click the arrow at the upper-right corner of the Animation palette, and choose Copy Frames from the pop-up menu. Then click on the last frame (frame 12), click the same arrow again, and choose Paste Frames. In the Paste Frames dialog box that appears, choose Paste After Selection, and click OK.

Use the scroll bar at the bottom of the Animation palette, and you'll see that the 12 frames you copied were just pasted at the end of the animation sequence (as frames 13–24). They should already be selected.

NOTE

If you accidentally click off of these frames and deselect them, you can use the Shift+click method to reselect them. Click frame 13, hold down your Shift key, and click frame 24. This selects all the frames that you just duplicated.

Click the arrow in the upper-right corner again and choose Reverse Frames. This puts all the selected frames in the reverse order.

 

Change the Looping options setting to Forever and click Play. The animation fades up and down. Click Stop when you're through admiring your handiwork.

 

Click on frame 12 and change the timing of that frame to 1.0 second, as shown above. Rewind the animation by clicking on the Rewind button at the bottom of the Animation palette. Click Play to watch the result of this change. The animation should now stop and hold in the middle and then continue to play. When you're finished watching, click the Stop button.

You can change the timing of all the frames, like you did in Exercise 2, or you can change the timing of individual frames.

Save and leave the file open for the next exercise.

This exercise taught you how to set the number of repeats with which an animation will play. You learned to create a loop by selecting, duplicating, and reversing frames, and how to set delays on individual frames.

Different Ways to Duplicate Frames

In Exercise 6, you learned to duplicate a series of frames that were selected by clicking on the New Frame icon. Before you duplicate frames, you must first select them. You can select frames by holding down the Shift key, or you can use the arrow in upper-right corner of the Animation palette to choose Select All Frames from the pop-up menu. There are a few different ways to duplicate frames, and this chart outlines them.

Methods for Duplicating Frames

Method Results
From the Animation palette, select frames and click on the New Frame icon. Duplicates the frames and appends them to the end of your animation.
Click on the arrow in the upper-right corner of the Animation palette to access the Copy Frames and Paste This is the method to use for copying animation from one document to another—ImageReady copies all the appropriate artwork to the target document. You'll also use this method when you want to append the copied frames someplace other than at the end of your animation. The Paste Frames dialog box gives you the choice of pasting before or after frames you've selected, or of replacing selected frames, all without creating additional layers. Replacing frames might be good if you had, let's say, an animation of a logo in one PSD file that you wanted to transfer to an ad banner that was being built inside a different PSD file. Another option in the Paste Frames dialog box is Paste Over Selection, which not only replaces the selected frame, but also creates additional layers in the Layers palette.

 

7. Tweening a Tweened Sequence

 

1.       In green_tea.psd, be sure that the Green Tea layer is selected in the Layers palette. Next, click on frame 3 in the Animation palette to select it. In the Layers palette on the Green Tea layer, enter Opacity: 100%.

 

2.       With frame 3 selected, hold your Shift key and click on frame 1 to select frames 1–3. Click the arrow in the upper-right corner of the Animation palette to choose Tween. Click OK. Notice that you are not given the option to choose the number of frames, but that the Tween With setting is on Selection. That's because you selected multiple frames before you selected the Tween option.

TIP

The Tween button doesn't work when you're trying to tween a selection of frames. You have to use the method described in this step.

3.       Play the animation or preview it in a browser. You'll see a short fade up at the beginning and an abrupt change in opacity as a result of the changes you made.

If you don't see the animation when you preview in a browser, it's because you didn't optimize the file in the last exercise. Try increasing the number of colors in the Optimize palette to fix the problem.

ImageReady allows you to tween either by defining a selection or defining a number of frames to insert between two keyframes.

 

4.       If it seems too fast for you, can change the speed. Select all the frames by Shift-clicking on the first and last frame, or by clicking the arrow in the upper-right corner of the Animation palette and choosing Select All Frames. Click the Selects frame time button on any frame and pick a new delay duration. The change will affect all the selected frames.

5.       You've completed this exercise and don't need to save this document. In fact, the next exercise will require this same file without any animation. Delete the animation in green_tea.psd by clicking the arrow in the upper-right corner of the Animation palette and selecting Delete Animation. When prompted, click Delete (Mac) or Yes (Windows). This will leave the layers intact in the Layers palette but delete all the frames in the Animation palette.

6.       Leave this file open for the next exercise.  

 

8. Tweening with Position

So far, you've learned to create animations two different ways. Exercise 1 showed you how to create animation by turning on and off layers on different frames. Exercise 5 introduced you to creating animation by using the Tween setting and adjusting opacity between frames. There are two other types of tween parameters you can work with—Position and Effects. This exercise will show you how to tween with position. ImageReady will memorize the position of a layer between two frames, and those two stored positions can be tweened. You'll see how in this exercise.

With green_tea.psd still open from the last exercise, make sure the Green Tea layer is selected in the Layers palette and that Opacity is 100%. Make sure that you are on the Original tab.

 

Using the Move tool from the Toolbox, click and drag inside the document window to move the lettering to the top. Note: If you are not on the Original tab, you will not be able to move the lettering.

Click on the New Frame icon at the bottom of the Animation palette. With the second frame selected, move the lettering to the bottom of the document window by using the Move tool. It's even okay to position the artwork so that it goes off the edge. 

Tip: If you're having trouble moving the artwork off the edge, try using the arrow keys to move the artwork instead of clicking and dragging. To do this, you must have the Move tool selected.

Click the Tween button at the bottom of the Animation palette. Enter Frames to Add: 5. Make sure there's a checkmark next to Position. Click OK.

Preview the results. You've just learned to create an animation by letting ImageReady tween between two different positions on the screen.

If you aren't pleased by what you see, you can go back and select any frame and make adjustments with the Move tool; but the main point is that you have now learned how to tween with position changes.