A Complete Guide to Web Design

(やまだぃちぅ) #1
326 Chapter 18 – Animated GIFs

Creating Animated GIFs


Web Design in a Nutshell, eMatter Edition

Restore to Background
The background color or background tile shows through the transparent
pixels of the new frame (replacing the image areas of the previous frame).
Restore to Previous
This option restores to the state of the previous, undisposed frame. For
example, if you have a static background that is set to Do Not Dispose, that
image will reappear in the areas left by a replaced frame.
This disposal method is not correctly supported in Netscape Navigator (it is
treated like Do Not Dispose), leading to all the frames being visible and
stacking up. Although it can produce better optimized animation files, it is
safest not to use it.
The effects of each of these disposal methods are compared in Figure 18-1.

Color Palette


Animated GIFs, like static GIF files, use a list of up to 256 colors that can be used
in the image. They can have multiple palettes (one for each frame) or one global
palette. The palette choice affects how well the images will appear on the inevi-
table variety of systems and monitor set-ups.
One problem with using multiple, frame-specific palettes is they can cause a
flashing effect on some early versions of Netscape (it cannot load the frames and
their respective palettes in synch). In any case, multiple palettes dramatically
increase file size. It is recommended you use one global palette for the whole
animation. GIFmation allows you to easily create a customized global palette. In
fact, any image editor can be used to create a global palette. Just place all images
to be used in one document, then index the document. The resulting palette will
be a global palette for the entire animation. DeBabelizer could be used for this as
well, but it’s not as straightforward.
Other palette options include:
System Palette
You can apply the Mac or Windows system palettes to your animation if you
know it will be viewed exclusively on one platform.
Grayscale
This will convert your image to 256 shades of gray. Keep in mind, however,
that browsers running on 8-bit monitors will try to convert the various shades
of gray to the web palette. Since there are only a few true grays in the web
palette, a grayscale image may not look very good on those monitors.
Adaptive Palette
Either ask your utility to create a global palette from the colors in the anima-
tion, or import one you created in another program. For most animations, this
is your best bet.
Web Palette (6× 6 ×6 palette)
Use the web palette if your animation is composed largely of flat colors.
Free download pdf