Go to Totally Hip

Exporting Animated GIF Files

  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 you’re 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
  You’ll 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.
  1. Open the file S-BUS.WPM.
  2. 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.
  3. On the Format menu, click Animated GIF File.
  4. 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.
  5. 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.
  6. Click Optimize Size.
    WebPainter will compress files to the optimum file size without affecting the graphics quality.
  7. 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.
  8. 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 can’t and using 256 colors will ensure that your animation appears correctly on the widest range of monitors.
  9. 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.
  10. 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 it’s 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.
  11. Click OK.
  12. In the standard file dialog that appears, type a name for the animation.
  13. 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, they’ll 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 can’t 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 doesn’t 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 don’t. 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 WebPainter’s 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.
  • Palette Option
  • Meaning or Use
    Apple System Colors
  • This is the color palette for Macintosh systems. Choose this options if your graphic will only be viewed on Macintosh computers.
    Apple System Grayscale
  • This is the grayscale palette for Macintosh systems. Choose this options if your graphic will only be viewed on Macintosh computers.
  • Windows System Colors
  • This is the color palette for Windows systems. Choose this option if your graphic will only be viewed on Windows computers.
  • 216-Color Web Palette
  • 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.
  • Most Frequently Used
  • 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.
  • Widest Range
  • This option will reduce the palette, but keep the widest range of different colors. Colors will not be substitued.
  • Remove Least Used
  • This option will reduce the palette by removing colors that are used infrequently.
  • Remove Most Similar
  • 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.
  • Custom
  • 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.



Contents   Previous Next