Building Animations

GIF animations are commonplace on web pages, and you'll probably see dogs wagging their tails endlessly, cats catching mice, balls bouncing. It's enough to make you dizzy. Photoshop and ImageReady can create the graphics elements and add motion to any of these goodies . If they aren't too big and flashy, they can be cute.

Today's animation is done, as it was 50 years ago, using layers . Figure 24.10 is my animation model, a Japanese Happy Cat. This one, in black, represents good health. I'm going to make him wave at you in a very simple three-step animation.

Figure 24.10. This cat will soon wave his paw.

The first step is to copy the cat into a new image file in Photoshop. (If you want to work along, the cat is in the collection of images that you can download from this book's companion website. See the Introduction if you've forgotten where the downloads are.)

Duplicate the layer twice, so you have three in all. The bottom layer is the "resting" state for the animation, so you don't need to do anything to it. It will be the first frame in our animation. The second layer is the "transition" state and the third layer is the "final" state. You can insert as many transition layers as you need. More steps will give you smoother animation, and a much larger file. Unfortunately, it might not play well on some computers, or if Internet traffic is tied up, as it sometimes is.

Move to the top layer and make the changes necessary to take the picture to the final state. In Figure 24.11, you can see that I have moved the cat's paw to a fully extended wave position. To do so, I cut it loose with the Lasso, rotated it, and filled in the gaps in black and pink with a small brush.

Figure 24.11. The waving cat.

Next, move to the middle layer. Because this is a small animation and the cat's paw has to move only a short distance, one middle step is enough. If the paw had farther to travel, we could put in more transitional steps, but the animation will look fine with just one step here. Cut the paw loose and rotate it halfway between where it is on the first and third layers. Again, use a small brush to fill in any gaps. Now your animation should look like Figure 24.12. The "art" part of the job is nearly complete.

Figure 24.12. Midpoint of the wave.

Copy the middle layer and add it to the top of the stack, and then copy the background layer and add it to the top, so the cat's paw will end up where it started. You now have five layers.

Now, open the Animation palette. Open the pop-up menu and choose Make Frames from Layers. You will see the frames in the Animation window, and clicking the forward arrow will run through them so you can preview the animation.

From the pop-up menu at the bottom of the Animation palette, choose Forever or Other if you want it to go continuously. Otherwise, it will run its steps once and stop. If you choose Other, you can specify a number of repeats. If it seems to run too fast, you can add a delay between each frame in the animation by setting the Frame Delay value. Then save it as a GIF file with animation, either using Save for Web or by switching to ImageReady and using Save Optimized. Figure 24.13 shows the final settings for the animation as seen in ImageReady. You don't need very many colors for this particular example, so you can make it a 16- color GIF with no noticeable change.

Figure 24.13. Here are the five frames in order.

When saving, choose HTML and Images to let ImageReady write the code and optimize the individual frames. Then copy that HTML code into the Web page file and place the frames in the image folder. Check the animation out in your regular browser, and then if possible in other browsers to make sure it works for all.

If you want to get serious about web page design and using HTML, run to your local bookstore or computer store and look for The Web Wizard's Guide to Photoshop . It's a great source for tips and tricks to spiff up your website.