Introduction

Accurate image transparency in GIFs exported from Fireworks can be a challenge without some knowledge of the problems associated with transparent GIFs. This TechNote will explain transparency to allow FireworksÂsatisfactory transparency from a Fireworks exported GIF.

Where does GIF transparency come from?

A GIF image gets its transparency from the color palette that is associated with it.ÂOne has to select the color or allow the application that generated the GIF to default to the color.

How does Fireworks determine a transparent color?

It is important that the user know what the HTML document's final background is, whether a hexidecimal color or an image file. This is essential to obtain correct transparency in GIF images that are to be placed in the document. Fireworks must have the same color or image on the background layer in order for the user to designate transparent indexed colors in the Export Preview window. When the user opens the Export Preview Window in Fireworks by choosing File > Export Preview, the Options tab allows the user to set transparency and to select, add and subtract colors from the palette so that the desired level of transparency can be achieved. To view an example of transparency, click here. The text at the top of the page shown is a transparent GIF. Notice that by turning off the colors in the palette, the anti-aliasing is lost. The anti-aliasing is exaggerated to emphasize that dithering and anti-aliasing colors can be problematic unless the background consists of a single color.

The following are tips for creating and exporting transparent GIFs:

  • Set up the Fireworks document with the exact HTML page color and any image that will be tiled in the HTML document's background on the Background layer in Fireworks.



    The text is on the Foreground layer. The image is on the Background layer with the canvas set to black.
  • Select File > Export PreviewÂand in the Export Preview select the Options tab. Set the Format to GIF and select the desired palette and number of colors to be indexed.



    This image shows the Export Preview set with a custom setting. Notice the default in the transparency field is the Alpha Channel. This setting only works for PNG export. It is set to Indexed Color in the next example.
  • Set the Transparency to Indexed Color and then use the left eyedropper tool to select the black color. Use the middle eyedropper tool to select all other colors that you wish to designate as transparent. This can be done by clicking on the color swatches in the palette or by clicking on the different areas of the background image. As the image is clicked on, watch the palette to see what colors are being selected:



    This image shows ALL of the colors except one selected to be transparent. Notice the palette and the transparent background. Also notice that all of the anti-aliasing is lost. If this text image had been over a less colorful background, anti-aliased pixels could be deselected to produce a smoother effect.

    Note:
    When a GIF is exported from Fireworks and the "Generate HTML" option is selected, the background color will be carried over to the HTML file, but the background image will not be tiled to the HTML file.



    This text was created with a white background. By selecting only White as the transparent color, the anti-aliasing remains intact and smooth.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy