Inside Web Design: Creating Animated GIFs with Illustrator 8 and ImageReady 2

Body: 

iwd-form.gifekjgenftsm.gif

While it's true that ImageReady has a number of the great features that allow you to modify graphics, it just really wasn't designed to be the end-all be-all for creating graphics. Granted, you can do a few things in it, but it's really more of a Web support program for Adobe Photoshop and Adobe Illustrator. In fact, that's probably why Adobe discontinued selling it as a stand-alone product and instead chose to bundle it with the ever-popular Photoshop 5.5. We're also imagining some poor product manager out there on the streets somewhere (but that's a totally different story altogether). So in this article we'll highlight how we think you can get the most out of the program by integrating its use with another application--in this case, Illustrator. For our example, we'll use Illustrator's Blend tool to create the foundation graphics and then export the graphics as a Photoshop file and bring them into ImageReady for animation.

Working in Illustrator
Since both Photoshop and ImageReady are bitmap applications, you don't have a lot of the groovy graphic features that are available in programs like Illustrator, Flash or even Fireworks. And, since Illustrator is such a good starting point for most projects due to its drawing tools and flexible vector environment, we'll start with it first.

For this article, we'll focus specifically on using Illustrator's Blend tool to generate the necessary steps for an animated GIF. Granted, ImageReady does have a tween setting, but it's really more like a fade between two specified bitmaps--you can't tween between two shapes and expect to get quality intermediate steps. And after all, if you can't get quality intermediate steps in your illustrations, is life as a Web designer really worth living? Fortunately, you can do it in Illustrator, with a few limitations.

The Blend Tool
Illustrator's Blend tool allows you to create shape and color blends between two or more objects. You can also blend between grouped objects, but you really should be careful here--the Blend tool in Illustrator isn't that sophisticated. In Figure A, we constructed a blend between a logo and an ever-so-slightly-rotated copy of itself. Although the two graphics are the same otherwise, you can see that the Blend tool couldn't create an accurate intermediate step. Yes, we're being a bit picky here, but after all, isn't that what being an artist is all about?

img_12635a.gif
Figure A
Illustrator's Blend tool can't handle shape tweening with complex graphics, even with equal points on the beginning and end subjects.

If you do want to work with complex graphics, the only thing you can do with them accurately and easily is create a color blend, as shown in Figure B. You could then animate smooth fades from one color set to the next.

img_12635b.gif
Figure B
You can blend colors smoothly across complex graphics.

Creating the Blend
Now with your newfound knowledge of the limitations of Illustrator's Blend tool, create some relatively simple graphics with different colors, such as ours in the top portion of Figure C. The simpler your graphics are, the better the blend will work. If your graphics contain multiple objects, be sure to group each set that will be involved in the blend.

Now, select both graphics and then click on the Blend tool. Position the Blend tool on a point on the first graphic, and then click to select it; don't get too excited--there won't be any changes on the screen. Now, move to the second graphic and click on a point that corresponds somewhat to the point on the first graphic. The blend generates instantly. Oooh ... your blend will differ somewhat depending on the points you selected.

For our animated GIF, we know that we want an eight-step animation. We have the two originating steps already, so we'll need to create six intermediate steps with the blend. To do this, first double-click on the Blend tool to display the Blend Options dialog box. Choose Specified Steps from the Spacing pop-up menu, and then enter 6 in the text box. Now, when you click the OK button, you'll see the results of that blend, as illustrated in Figure C.

With the blend finished, you now need to separate the blend objects from one another. To do so, choose Object > Blend > Expand. The objects are no longer part of a blend, but they're still grouped. Man, life is never simple, is it? To ungroup the items, choose Object > Ungroup. Finally, each graphic is a group unto itself, but not grouped to any other unit that made up the blend. Got that? Good!

img_12635c.gif
Figure C
Illustrator creates a nice blend between the two original graphics.

To the layers with you all!
Next, you need to move each graphic onto its own layer, because we all know that graphics love to have their own layers. Fortunately, ImageReady allows you to convert layers into animation frames, so by doing it here in Illustrator you'll save yourself a step in ImageReady. The easiest way to do this is to align your graphics first. For our example, we want the graphics centered. To do this quickly, select all the graphics and then click the Vertical Align Center and Horizontal Align Center buttons on the Align palette. Your graphics should now be centered like ours in Figure D.

img_12635d.gif
Figure D
If you center the graphics for animation purposes, you'll make them easier to place on their own layers.

Next, distribute the graphics to individual layers. Again, always trying to save ourselves even a single mouse click, we'll distribute the graphics by selecting the top graphic and then clicking the New Layer button at the bottom of the Layers palette. A new layer, wondrously named Layer 2, appears selected, just above Layer 1. On the right side of Layer 1, you'll see a small blue square. This tells you that something on that layer is selected. Click on the blue square and drag it onto Layer 2. By doing so you've moved the top graphic, in this case, the starfish onto Layer 2. Now, turn off the visibility of Layer 2 and click the graphic to select the next object in the stack. If you keep repeating this process your graphics will be on separate layers, in order and centered. When you've finished, you'll have a total of eight layers.

Export a Photoshop File
Now, you need to do a few more things to get the file ready for the ImageReady workout. First, make sure that your colors are in RGB mode. To do so, select the graphics and then choose Filter > Colors > Convert To RGB. This converts any CMYK colors you may have inadvertently used to RGB.

Next, draw a bounding box around your graphics to determine the canvas size of the export, and then set the fill and stroke of the box to None. If you don't do this, a file the precise size of your largest graphic will be exported, leaving you no space to work with around the image. The bounding box doesn't have to be a perfect fit, since you can always crop the file to the precise pixel size that you need later in ImageReady.

Now you're ready to export the images. Choose File > Export, and in the resulting dialog box, name your file and choose Photoshop 5 from the Format pop-up menu (or the Save As Type dropdown menu in Windows). Click Save and in the following dialog box, select the Screen (72 dpi) option button in the Resolution area. Also, be sure that the Color Model is set to RGB and that the Anti-Alias and Write Layers check boxes are selected as well. Click OK and you're set to begin animating.

Working in ImageReady
Now, open ImageReady and then open your Photoshop file. When you look at the layers in the Layers palette, you'll notice that ImageReady has inserted a Background layer at the bottom of the stack. While we're sure the program meant well, you won't need the layer, which, in fact, will get in the way. So, just drag it to the Trash button at the bottom of the palette to dispose of the layer in a tidy manner.

Because of how you set up your file, animating it will be a snap. Your graphic will automatically appear in Frame 1 of the Animation palette. From the palette's pop-up menu, choose Make Frames From Layers. When you do, the program distributes all the layers to frames, as shown in Figure E.

img_12635e.gif
Figure E
The Make Frames From Layers command quickly converts a layered file into an animation.

At this point, your animation is essentially done--all that's left to do is tweak it. For instance, you may want to fine-tune the final animation by altering the frame delay time for each frame. This changes the rate at which each of the frames appears, basically altering how smooth the animation will be to the viewer. To do so, choose the pop-up menu beneath each of the desired frames, and select an appropriate value. Though you may have some idea of how you want the animation to appear, you'll probably want to test the delay times by clicking the Play button at the bottom of the palette until you're satisfied with the delay between frames.

Now, once you have your timing set, you'll need to optimize the file. In the Optimize palette, set the file type to GIF and choose the color palette you want to compress to, such as Adaptive or Web. As with any Web graphic, adjust the settings to make the file as small as possible.

Since this is an animated GIF, rather than a regular GIF, choose Optimize Animation from the Animation palette's pop-up menu. Then, in the resulting dialog box, you'll have two options--Optimize By Bounding Box and Optimize By Redundant Pixel Removal. The first setting crops each frame to preserve only the region that changes from the preceding frame, while the second setting makes pixels transparent if they don't change from the preceding frame. Adobe recommends leaving both of these options enabled. (And after all, if they don't know what they're talking about, who does?) Click the OK button and then choose File > Save Optimized to save out your animated GIF.

The Payoff of a Little Planning
As with most things on the Web, spending a little time on the front end to set up your file properly makes your other work easier. In this case, planning made the animation process within ImageReady very quick and painless--almost fun. Okay, so maybe it wasn't what you'd call fun, but with this knowledge, you'll be able to spend more time creating a phenomenal animation that might actually be fun. Just maybe!

ekjgenftsm.gif
Copyright © 2000, Element K Content LLC. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Element K Content LLC is prohibited. Element K is a service mark of Element K LLC.

Liked This? Read These!

This tutorial is an installment of The Russell Brown Show. In this video, Russell demonstrates how to use Photoshop CS3's Auto-Blend feature to combine multiple photos. The resulting image... Read More
Each month Design Tools Monthly reviews some of the best plug-ins and XTensions on the market. Most of the mentioned products can be purchased through The PowerXChange. Read More
Adobe Photoshop gives you more than 20 different file formats from which to choose. Using the right one can spell the difference between a file that prints perfectly and one that looks like it's... Read More
When you go to save or open a file in Photoshop, do you ever stop and wonder what exactly all of the file formats you can choose from really are? Photoshop's Open and Save dialog boxes together... Read More