 |
|
Animated
GIF is the most common file format for animation on the
Web. This section describes how to export an animated GIF
file with the optimum settings for use on the Web. When
youre creating animation to use on the Web, you
want to make sure the file size is small so that people
will actually see your animation. If the file size is too
big, it will take a long time to download and people
might get bored or frustrated and leave your web site. In WebPainter you can export to many
different file formats, and each has its own export
options. For information about these other formats and
options, see the WebPainter Online Help.
In this lesson you will learn:
|
|
|
- when to use a
transparent background
why use interlacing
how to make your animated GIF files as small as
possible
how to save your file with the correct palette
|
|
 |
Youll
use the WebPainter file you created in the previous
lesson Importing
Other File Formats. If you
did not complete the previous lesson, you can still
complete this lesson using any WebPainter file. However,
it will be easier to follow along using the same file.
- Open the file
S-BUS.WPM.
- On the File menu
click Export.

The Export Preview dialog appears. You use this
dialog to set export options for your file and
then preview what the final exported file will
look like with your options set.
- On the Format menu,
click Animated GIF File.
- Click Transparent
Background.
This means that the background of the Web page
will show through. For an example see More About
Transparent Background later in this section.
- Click Interlaced.
This means that your image will be downloaded
gradually. Interlacing allows the Animated GIF
file to be progressively displayed. This allows
users see the graphic in successively higher
detail as it is downloaded rather than waiting
until the entire file has downloaded before
anything is visible. For an example, see More
About Interlacing later in this section.
- Click Optimize Size.
WebPainter will compress files to the optimum
file size without affecting the graphics quality.
- Click Frame
Difference.
This option will just save the changes between
cels rather than the entire cel. In an animation
like this one where there is very little
difference between cels, Frame Difference will
make your file size much smaller.
- Make sure the Max
Colors pop-up is set to "256 colors
(8-bit)."
256 colors is the display capability of most
standard monitors. While some monitors can
display millions of colors, many cant and
using 256 colors will ensure that your animation
appears correctly on the widest range of
monitors.
- Experiment with the
different palette options.
Notice that some options will save a much larger
palette with your animation. Decreasing the
palette is a good way to decrease the size of
your final file.
- On the Palette pop-up
menu, click Most Frequently Used.
This option decreases the file size to the colors
most frequently used in the animation. Since this
animation was created using the 216 Color Web
Palette, the colors will appear correctly on all
systems, so its okay to decrease the
palette to just those colors used in the
animation. For more information about the palette
options, see More About Saving Palettes later in
this section.
- Click OK.
- In the standard file
dialog that appears, type a name for the
animation.
- Click OK.
The animation is saved as an animated GIF file.
You can open it in an Internet browser or
graphics application.
You now have two versions of this file: one
animated GIF version that you just exported and
the original WebPainter version.
|
 |
|
More About Interlacing
Interlacing is a feature of
GIF files that enables the information in them to be
downloaded gradually. Data from an animated GIF is
received in layers so that people viewing your animation
or graphic on a web site first see a blurry version of
the graphic that becomes clearer as more data is
received. The appeal of interlacing is the idea that if
viewers can get some idea of what your graphic is,
theyll stick around and wait for it to it to finish
downloading rather than surfing off to another web site.
Non-interlaced files are downloaded in strips or bands,
and viewers have to wait until most of the file is
downloaded before they can tell what the graphic is. In
the non-interlaced graphic, notice that the part of the
non-interlaced file that has downloaded is very clear,
but you cant see most of the graphic.
|
 |
|
More About Transparent
Backgrounds
If a file has a transparent background, the color of the
web page shows through where there is no color specified
in the graphic. If a file doesnt have a transparent
background the graphic appears in a rectangle or square.
Depending on your graphic, sometimes you want to have a
transparent background and sometimes you dont. In
our example in this section, we want the background to
show through. Notice the difference between the file with
the transparent background and the one without.
In WebPainter, you set the color to
be transparent in the Document Settings dialog. By
default this color is white. This means that any white in
a graphic will be transparent. In WebPainters
Preferences you can choose a pattern to display to
represent the transparent color. This makes it easier to
identify transparent areas of your graphic. For more
information about document settings or preferences, see
the WebPainter Online Help.
|
 |
|
More About Saving Palettes
You probably noticed that there are many options for
saving the palette for your graphic or animation. The
following table gives some suggestions for when you might
want to use each format.
|
|
|
- This is the
color palette for Macintosh systems.
Choose this options if your graphic will only
be viewed on Macintosh computers.
|
|
- This is the
grayscale palette for Macintosh systems.
Choose this options if your graphic will only
be viewed on Macintosh computers.
|
|
- This is the
color palette for Windows systems. Choose
this option if your graphic will only
be viewed on Windows computers.
|
|
- This is the
216 color web palette. The colors in this
palette are all available on both Windows
and Macintosh systems. If you didn't
create your graphic using this palette
and you want to use the graphic on the
Web, you should choose this option. If
you did use this palette when you created
your graphic, you should choose one of
the following options to optimize the
number of colors in your palette, and
thereby decrease the file size.
|
|
- This option
will reduce the palette to the colors
most frequently used in the image. Colors
that are used infrequently will be
replaced with similar colors.
|
|
- This option
will reduce the palette, but keep the
widest range of different colors. Colors
will not be substitued.
|
|
- This option
will reduce the palette by removing
colors that are used infrequently.
|
|
- This option
will reduce the palette by removing
colors that are very similar to other
colors. These colors will be replaced by
the remaining similar colors.
|
|
- This option
reduces the palette to all the colors
used in the document.
|
Note: You set the color
palette when you create your graphic. You can change it
later using the Document Settings dialog. For more
information, see the WebPainter Online Help.
|