I get e-mails from you guys all the time and consistently get the same question, "How do I make an animated .gif?" Actually it's not as tough as you would think. But lets start from the beginning�.

First of all, what is an animated .gif? Basically, it's a moving graphic. You know those blinking ads you see all over the net, those are animated .gifs. Due to the capabilities of the GIF89a specification (don't worry if that doesn't make sense, it's not important to making them) all browsers can view animated .gifs without any special plug in. Even if the browser cannot view all the frames of the animation, the user will still at least see a static image. All in all, animated .gifs are THE BEST way to have movement that ALL visitors can see.

If you can make a .gif, you can make an animated .gif. You don't need to be an artist extraordinaire or a cartoonist to make these babies. All you need is a traditional graphics program with an animation utility. There are tons out there, some are even free. In the interest of time I will explain how to make an animated .gif using Adobe ImageReady. In my opinion it's the most popular and easiest to use. Regardless of the tools you use, the steps are pretty much the same and involve making decisions about the same basic settings and effects.

1. To begin start with a regular image.
   • You can create the image in ImageReady (or your chosen software) or open an existing image in the animation program. I would suggest using an image with layers, it gives you much more animation control.
   
   
   
2. Open the animation tool.
   • If you do not see the animation box in ImageReady when you open your graphic, select Window > show animation. This box is where all the magic happens. You will see a miniature version of your image in the #1 box. That is the first frame of your animation.
   
   
   

   Remember your animated .gif is a little cartoon, so plan accordingly. Each frame you create is almost like a piece of paper in a flipbook. You can control how fast the book flips and the number of times the animation will run, but the frames are all still necessary. It helps to plan how you want your animation to move before you begin this process.

   
   
3. Design your first frame.
   • Select which layers will be visible and where they will be, just the way you do when making a regular image.
   • For example if you are going to have a circle move across the image, make sure the circle layer appears in its starting position in this frame.
   
   
4. Continue creating the layers of your animation.
   • Once you are happy with the first frame, select the small rectangle with the corner folded up. Selecting the little rectangle will make a new frame, marked 2.
   • This frame will be exactly the same as the first if you don't change it. Move items around, make more layers visible, whatever you want.
   • Continue this process until you have created all your frames.
   
   
   

   It is important to note that the changes you make to your frame will NOT affect the way other frames appear. Each frame is like its own image. From the first frame on, any changes you want to make to your frames will need to be made in each individual frame. You can go back and make changes by clicking on the frame in the animation window.

   
   
5. Test your animation speed.
   • Select the play button (it looks like > in ImageReady) and see how your image "moves".
   • By default there is no delay between the frames in ImageReady. That means that the frames flip just the way they would if they were a flipbook.
   • To slow the animation down select the down arrow next to the 0 sec. Choose one of your options or create your own with other. (no delay will appear faster in Netscape than it will in IE)
   • It is necessary to change each frame's speed separately.
   • Hit Play again and continue to adjust the frame speed until you are satisfied with the animation
   
   
   

   You might find that you have more frames than are necessary for your desired effect. Just select the frame and drag it to the little garbage can. Remember, the more frames your animated .gif has, the bigger the megabyte size and the longer it will take to load. I would suggest keeping it under 15K if you can.

   
   
6. Decide the number of times your animation will loop
   • Once you are happy with the speed of your animation you will notice that it just keeps going and going� you can control this.
   • Select the little arrow under the first frame that says forever. This is where you determine how many times the animation sequence repeats.
   • Remember, repetition, like number of frames, will increase the file size of your graphic. Unless you have a pretty good reason, try to avoid repeating an animation more than 2 or 3 times.
   
   
   

   Note that the last frame of your animation will be what a visitor will see once the animation stops repeating.

   
   
7. Save your animated gif
   • Select "File" > "Save Optimized As" and save your animated .gif.
   • You insert the animated .gif into your HTML exactly the way you put a regular image in <img src="your_gifs_name.gif">