Creating Animated GIFs in Photoshop 7 and
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
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
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.
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
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 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
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
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.
and do not save if prompted.
from the chap_13 folder. It contains only a single frame in the
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
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.
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.
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.
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.
| Animation Must Be Saved As GIF
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.
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
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.
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
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
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
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.
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
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.
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.
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.
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.
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.
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.
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.
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
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.
the Animation palette, select frames and click on the New Frame icon.
the frames and appends them to the end of your animation.
on the arrow in the upper-right corner of the Animation palette to
access the Copy Frames and Paste
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
7. Tweening a Tweened Sequence
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%.
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.
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.
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.
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.
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.
Leave this file open for the next
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.
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