Graphics Tutorials
Image Ready Basics

Wed, 25 Apr, 2007
Lee Thompson-Herbert

How to make simple animated GIFs using Adobe ImageReady.

If you have PhotoShop, you should also have ImageReady. ImageReady is the program you use to make animations. I use PhotoShop to prep everything and make all the layers pretty and do any fancy lettering and layer effects (just be sure to rasterize each layer, as it may not translate between the two programs correctly otherwise). If you think you may need to edit those layers again, keep a pristine copy of the file with the layers and all text and effects intact, then make a copy that you rasterize each layer. Send that copy to ImageReady. If you re-edit, you'll have to make a new copy and rasterize the layers again, but at least you'll be able to back up instead of re-creating the whole thing from scratch again.

That said, If you have set your file up so that each layer is meant to be one frame of animation, and the layers are stacked in order (layer 1 is meant to be frame 1, layer 2 is frame 2, and so on), then you can simply open the file in ImageReady, go down to the frames pallet (it's the strip at the bottom) and from the pull-down menu for that pallet select:

Create Frames From Layers


Be careful, because there's also an option called

Create Layers From Frames


That's used when deconstructing a piece of animation that you want to edit.



At this point, push the PLAY button on the frames pallet and see if your animation does what you want it too. Notice that each frame has some numbers in the lower right corner. That's the frame delay, or how long each frame is displayed before it goes on to the next one. Default is set to NONE or 0.0. Most animations need a longer delay. For example, regular film footage is often .03 seconds--get that by selecting other and typing the value into the box. If you have text on your frames, you may need a much longer delay, more like 1 or even 2 full seconds per frame to allow people to read the words. You can select all frames from the frames pallet pull-down menu, then adjust the nearest frame. All frames will set to the same value. Click on one specific frame to change the selection from all back to one frame.



If your animation has a background and then some elements (like speech bubbles) that pop up, you'll need to have each element on its on layer. Do that part in PhotoShop. When you get to ImageReady, make your background Layer 1. By default, under the Layer Menu, the option Propagate Frame 1 Changes will be checked. In the Frames Pallet, in Frame 1, click next to Layer 1. An Eye icon will appear, meaning it's visible. The rest of the layers should be invisible at this time. Go up to the Layers Menu and TURN OFF the Propagate Frame 1 Change option. Now, make any other changes you want to Frame 1. Click the New Frame Icon in the Frames Pallet for Frame 2. Clicking next to a layer in the Layers Pallet will turn that layer's visibility on or off for that frame. Continue for as many frames as you need.

When you have the animation adjusted to do what you want, hit SAVE. That saves the file in Photoshop (.psd) format. To use the file in your sig, you need a gif. The window that's showing your animation has some tabs at the top. Hit 2-Up to see an optimized version side-by-side with the original. You can change the optimized file settings with the pallet on the upper RIGHT.



When you have everything looking right, select Save Optimized from the main File Menu. You now have an animated GIF.

The next instructions are for use if your optimized version looks choppy, blocky or the colors are off. Or if the file size is just WAY too big. Otherwise, you can give this a miss.


Changing the number of colors used will give you a larger or smaller file (265 colors = larger, clearer. 16 colors = smaller, much splotchy-er). The matte color can also be selected, as well as transparency. Selecting transparency will allow you to use the Optimize Animation option in the frames pallet-pulldown. Checking Use Bounding Box and Remove Redundant Pixels will get you a smaller file when Transparency is checked in the Optimize pallet.



Matte is the color blending around the edges of a transparent gif. For most photo and film clip gifs, it's not neccessary, so none is the correct setting. If your gif has open edges, then you may get smoother look by selecting either black or white (or a specific color if you're embedding this in a webpage that you know the background color). If your gif looks like:


you should pick a matte color.


If it looks like:

Don't bother with a matte color.

Graphics Tutorial Pages ChibiJack Start Page Lee's Home Page