First, select the animation dimensions and load the web palette
Decide the overall width and height you want the animation to be. The larger the dimensions, the slower the animation will download so keep it as small as possible while still maintaining the effect you want to achieve -- I made the bouncing ball animation 100 x 100 pixels; the Home animation about 180 x 200. Once you select a size, I recommend you draw each image of the animation as a full size image at these same dimensions.

If you are going to start by modifying an existing image, open the image in Paint Shop Pro. You can resize the image to the size you want by selecting IMAGE|RESIZE or by cropping. This existing image probably does not use the web palette so you need to change to it. PSP doesn't have a direct way to do this, but it's pretty easy to do. First, highlight the image by clicking on the top of its window. Now from the menu select COLORS|INCREASE DEPTH|16 MILLION if it is available (i.e. not greyed out). If it is greyed out that's ok, just keep going. Now select COLORS|DECREASE DEPTH|256 COLORS. When the dialog box appears, select STANDARD palette and check NEAREST COLOR and click OK. Now you have the web palette loaded. The colors may shift somewhat when you load the web palette but that's OK.

Now you have an image file of the correct size and with the web palette loaded. You can draw in your image using colors from the web palette.

Draw the sequence of images
Here are the 8 individual images I drew for the bouncing ball animation;

If you are using Paint Shop Pro, you may notice that many of the filters and special effects are 'greyed out' and are not available to use. That's because GIF files only support 256 colors and you need 16 million colors for those effects to work. There are ways to use those filters in GIF files, and you can read about them in the In-Depth section.

You've completed the basic drawing step. If you're making your first few animations I'd recommend Fast Forwarding to the next step -- Assembling the animation. But if you've successfully made a few and would like to read about transparent backgrounds, anti-alaising, tips to minimize file size and more, read on.

Fast Forward >>

Optimization starts here
What you do in this step has a big effect on our two optimization goals -- 1) selecting colors that look good on all video displays and 2) minimizing the file size of the animation. The challenge will be to balance between creating a rich, visually appealing animation and using these optimization tips for creating efficient animations that look good on all platforms.

Drawn vs gradient vs photorealistic images
Some of these tips -- especially the color related tips -- depend on the type of image you have. The basic image used in GIF animations are drawn images, that is, images with hard lines, text, and areas filled with single solid colors, like clip art or images you make with a graphics program. The bouncing ball animation, the Home animation, the This&That and Fleeting Glimpse logos above are all examples of drawn images.

Later, I'll mention some tips for using gradient images and photorealistic images. Gradient images are drawn images that also contain gradients, including anti-aliasing, blurred drop shadows, gradients, etc. often resulting from applying filters and special effects to images drawn in graphic programs. The "stevemd's GIF animation instructions" graphic above is a gradient image since it contains anti-aliased text and a blurred drop shadow. Photorealistic images are any image that look like a photograph, or any scanned image.

Tips for optimization - managing colors and minimizing file size
Managing colors. Colors can be a confusing topic in making web graphics -- whole books are written on it. Most beginning animators, myself included, encounter unexpected and ugly color problems that they don't understand. I eventually found four guidelines solves most problems;

1. Use a global color palette -- that is, use the same color palette for all images in the animation
2. Work out all the color issues in the drawing step (this step) rather than in the assembly step (next step). More specifically, make sure each image has the final color palette you want before you begin to assemble the animation. Most animation assembly programs have pallete functions to edit, remap, dither and do lots of other things to your colors. Often, using them makes your images look worse. If you do things right now, there will be no surprises later.
3. Wherever possible, use the web palette we discussed earlier
4. Whenever possible, avoid dithering -- it looks bad in drawn images and makes your files bigger

You see I hedged a bit on the last two. For drawn images the last two should always apply without exception. But when we get to gradient and photorealistic images later we may violate one or both of these guidelines, but at a price.

- Areas of solid color make the smallest files. It's helpful to remember that GIF files store data by recording the changes in the pixels across a horizonal scan; the fewer changes in color across each horizonal line of the image, the smaller the file. A pattern of horizonal lines is only slighty bigger than a solid color image. But the same lines vertically produces a file three times bigger. And texture and dithering -- approximating a solid color with a speckled pattern of two other colors -- produces files 6 to 8 times bigger. The conclusion -- GIF images are most efficient when they contain relatively large areas of one color.

133 bytes Solid web color

179 bytes 0 changes across a horizonal scan

499 bytes 7 changes across a horizonal scan

824 bytes Lots of changes across a horizonal scan

1,003 bytes Lots of changes across a horizonal scan

- Transparent backgrounds may not compress well. Animations with transparent backgrounds that let your web page background show through. As we'll see later, these animations often don't compress as well as solid color backgrounds.

If your animation consists of a small object moving around your page and has no significant static elements in it, then a transparent background will compress well. Here's an example from Alchemy Mindwork's home page;

But if your animation has many elements or large elements, either moving or static, then a transparent background won't compress as well as a solid background (the Home animation is an example of this).

My recommendation is, whenever possible, to use a solid color background in the animation that matches the web page background (specify a web color for the BGCOLOR= attribute of the BODY tag of your HTML; if you don't, it may not match your animation on 256 color video monitors). Use transparent backgrounds only when it is really necessary to achieve the look you want.

- Use the fewest colors necessary. A GIF file can store up to 256 colors, and you should use as many as you need to get the look you want. But the fewer colors you actually use, the smaller the file will be later on when we compress it. Generally I try to use 16 or fewer colors (sometimes only 3 like in the bouncing ball animation).

- Keep the moving elements of the animation relatively small. The more pixels that change from image to image the larger the file will be.

- Don't open animation files in your graphics program: Most graphics programs, like Paint Shop Pro, do not handle GIF animation files. If you open an animation file in Paint Shop Pro it will only display the first frame. If you now save the file from PSP, it will only save the first frame and you will lose the rest of the contents of the animation. You can only view and save animation files in GIF animation software, like Gifcon and others discussed previously.

- Check to make sure the palettes are right Often, as a final action is this step, I re-load the proper color palette into the image just to make sure I got the right one.

Background
Many graphic programs have filters or effects such as anti-aliasing, blur, noise, gradients, various deformations, etc. that can greatly improve the appearance of your drawn images. This improved appearance is usually produced by applying gradients -- that is, pixels using lots of shades of colors, usually non-web-palette colors. Gradient images, then, have two differences from drawn images -- 1) non-web colors and 2) areas with lots of variation in the pixels, two things we've been trying to avoid. So this improved appearance comes at a price -- larger files with longer downloads and display dithering on 256 color monitors.

The figure below compares some drawn images (Fig 1 & 2 with no filters applied -- has large areas of solid color) with some gradient images (Fig 3 & 4) produced using the anti-aliased text and blurred drop shadow filter in Paint Shop Pro. The figure shows the visual improvement and a zoomed-in view of the pixels. See all the shaded pixels in Figures 3 and 4? Those are what give the smoother appearance to the text and shadow. They are also what increase file size, increase the number of colors used, and require the use of a non-web colors. Remember, the file size increase shown in this figure is for just one image -- for an animation you could have a sequence of images, each this much larger.

So you have a choice when you reduce colors in your gradient images. Either;

1. Use the web palette and give up some of the appearance but the file will be smaller (50% smaller in this case) and it will display better on 256 color monitors. Figure 6 above shows what Figure 4 looks like if the optimized palette is replaced by the web palette. Notice how the shadow is most affected.

2. Use the optimized palette, which will look great on better video displays but will increase file size and will not look as good on 256 color displays. Figure 5 shows what Figure 4 looks like dithered on a 256 color video display: again the shadow area is most affected in this example. (If you're already viewing this with only 256 colors, examples 3 and 4 will be dithered already --you won't be able to see how good they can look on a better monitor).

My conclusions and suggestions

• Filters and effects that produce gradients make images look better, but increase file size and may look poor on 256 color monitors. Use them with discretion, if at all. Stick with drawn images as much as possible.

• Anti-aliased text can be worth the trade-off -- appearance is a lot better, file size increase isn't bad, it looks OK dithered or remapped to the web palette. For the right animation, where text is important, I try it.

• Blurred drop shadows looks really nice but price is high. I avoid them.

• In reducing from 16 million colors back to 256, my first choice is loading the web palette (called standard palette in PSP) instead of an optimized palette. Even a gradient image has some large areas of solid color and the web colors will look a lot better on all monitors. I find that many times optimized palettes will switch your large solid areas to non-web colors. Unless you want to edit the optimized palette by hand to switch them back, stick with the web palette.

• If you really insist on using the optimized palette, it's likely the optimized palette will be different for each image you make. Therefore, you need to make a global optimized palette; that is, a palette that is the same for all the images you will assembly into the animation. Otherwise colors will shift from image to image when you play the animation. More on how to make this in a minute.

1. Start your image using the web palette and solid areas of web colors wherever possible. Don't apply the 'effect' until as late in the drawing as possible. By using web colors for the main image you may minimize dithering on the video display.
2. In most programs you have to increase the colors in the image to 16 million to apply the effect (a clue the effect will add lots of new colors). In PSP select COLORS|INCREASE COLOR DEPTH|16 MILLION. Apply the effect you want.
3. Once you've switched to 16 million colors, if you do more drawing, make sure you select web colors -- colors with hex values of 00, 33, 66, 99, CC, FF -- to maintain as many web colors as possible in your solid color areas.
4. Before you save as a GIF file, you have to reduce back to 256 since that's all GIF stores. Select COLORS|DECREASE COLOR DEPTH|256 COLORS. In the dialog select either STANDARD palette (my first and usual choice) or OPTIMIZED palette (You might want to save a copy while in 16 million mode and reduce using both palettes to compare). Select NEAREST color.
5. If you do select a optimized palette for your images, you need to build a global optimized palette as a last step before assembling your animation. First, open a new, blank image that is big enough to hold all your animation images and select the 16 million colors palette. Now copy all your images into this one image -- you now have one composite image that contains all the colors you have used. Select COLORS|DECREASE COLOR DEPTH|256 COLORS. In the dialog select OPTIMIZED palette, NEAREST COLOR. Now you can either 1) save the palette from this image (COLORS|SAVE PALETTE) and load it into all the individual images (COLORS|LOAD PALETTE). Or 2) save this image as a GIF file, naming it something that will make it first in your sequence of images; i.e. 1composite.gif. Then, in the next step, using Gifcon, use this composite image as the first image in your GIF animation and elect to use it as the global palette. All your other images will be mapped to it. After which you can delete it from the animation.

Photorealistic Images
Photorealistic images are like gradient images only more so -- essentially the whole image is one of gradients; well, at least gradations of color. Photorealistic images and the GIF format don't go well together -- the files get large because there are lots pixels of various colors and, since GIF only supports 256 colors, they don't always look good. That's why you see very few GIF animations with photorealistic images. And the ones you do see are generally rather small. Some suggestions;

- Dither photorealistic images: When selecting a 256 color palette, you still have a choice between the web palette and an optimized palette. For photorealistic images, I recommend selecting the web palette since it will look best across all platforms and browsers. More importantly however, is to select DITHER (or ERROR DIFFUSION -- a specific form of dithering) and don't pick NEAREST COLOR. Photorealistic images look better dithered than with solid colors. Solid colors make photorealistic images look posterized.

- Use smaller images and fewer images in the animation to keep the file size down and to compensate for the large file size of these images.

- If using an optimized palette, make a global palette: As discussed previously, a global palette is important do prevent color shifts and to keep file size sown.