Tips for GIF Animation and File Size Reduction
For use with Adobe Photoshop 4.0 and GifBuilder
Words of wisdom by Paul M. Carhart

Plan BEFORE You Design

When designing animation with alot of movement, keep most of the action to the left so subsequent frames can be cropped after changes.

Do not anti-alias your text unless you absolutely have to. Although it doesn't always look as good, this can be the difference between frames that are eight to ten colors or frames that are only two. These colors add up when compounded with each frame. Keep in mind that HTML text is not anti-aliased either and many people are used to seeing type of this nature on the web. Don't sacrifice your design to live by this rule though. Use your judgment to determine what is or is not acceptable.

Design your ad with solid backgrounds that can easily be masked over. Stay away from gradations if you can since this will inevitably lead to color shifts and large file sizes.

Crop frames in which changes do not occur all the way to the bottom or all the way to right of the file. GifBuilder sees imported images from the upper left corner and places all frames there by default.

Build a mask layer in your Photoshop file that is a solid color all the way across. This color should not be present in your "real" animation frames. This layer can have sections deleted in blocks or non-anti-aliased selections from it to reveal the changes in the animation. This will not only eliminate the amount of colors from each frame but can virtually eliminate color shifts.

Do not use alternate frame disposal methods in Gifbuilder. Current popular browsers (i.e. - Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0) do not recognize them. Default is you best bet.

Transparencies in GifBuilder should be done with the "based on first pixel" option. If the color you want transparent is not the first pixel in the upper left corner of your frame, put a small square of your transparent color there for GifBuilder to read.

When using photo-realistic images, shading or gradations, try saving your frames the old fashioned way by going to the Mode menu and selecting "indexed color." This will give you the option utilizing the "Diffusion" option (something you cannot do with the Export-Gif89 option in Photoshop 4.0) which applies a dither pattern to the file. This sometimes accomplishes more gradated look with less colors. The downside, however is that the frames are sometimes a little larger in size than they would otherwise.

I use this one all the time now. If you have a hard time getting your frames down in colors, try re-indexing them. Turn them back into an RGB in Photoshop. The file will remember how many colors are in it. Make it an indexed color again and tell it to be about five colors less than what it was. The difference is usually not much visually. What this does is limit the amount of colors the computer can re-map to the image. This process can sometimes be repeated, eventually deleting all but the absolutely vital colors to the image. As you get down further, you can pull out one or two colors until you narrow it as far as it can go. I have gotten files that were forty colors down to fifteen in the past Ð five, three or one color at a time. This means you can make files with alot of colors to keep the look, eliminating most of the 256 colors present in any 8-bit graphic (256 - 40 = 216 colors gone) and then narrow it down to your optimum amount of colors from there. This generally results in cleaner looking frames at less colors.

Combine frames if necessary. This is sometimes the last resort. Look at the way your animation plays out very carefully. If copy or movement is revealed in such a way that it that it doesn't necessarily have to be, you might be able to combine frame elements in such a way that you can eliminate a frame or two. You may have to change the scripting of the animation so everything can be viewed and/or read. Remember, changing the timing and scripting of frames in GifBuilder does not change the final file size.

If you have alot of color in your design that absolutely has to remain intact, try this little tip. Cut the part (in this case it was an Intel logo that had to be perfect in order for the client to get credit in the co-opt advertising) and put it on the frame following the first one, cropped down to it's bare essentials. Then physically (using X and Y coordinates) move that to it's location. In GifBuilder, give the first frame a 1 (1/100 of a second) in the timing column and the second one a longer time. This will give the illusion of a lot of color at the same time, even though it really is on two separate frames. The downside to this is that when/if it loops there will be a 1/100 of a second hiccup as the ad turns over Ð a small price to pay to get the color you need to satisfy color requirements that are beyond your control.

Related Information

This article was originally used internally at Internet Exchange as guidelines for creating animated GIF files at the correct file size.

At the time there was no such thing as Macromedia Fireworks.