Optimize GIF Artwork in Fireworks - dummies

By David Karlins, Doug Sahlin

When you optimize artwork in Fireworks, you choose the file format for export and then specify other parameters. If your design has large areas of solid color and other elements, such as a client logo, the GIF file format is the ideal format in which to optimize your design. Banners and navigation menus are other candidates for the GIF format.

To optimize an image for export in the GIF format, follow these steps:

1Click the 2-Up icon at the top of the document window.

Fireworks displays two versions of the image: the original and a copy with the current optimization settings applied. Comparing the original with the optimized version lets you decide the best setting for optimizing the document.

2Choose Window→Optimize.

The Optimize panel is displayed. The figure shows the document window in 2-Up display and the Optimize panel. The right side of the window displays the image with the current optimization settings applied. Below the image is the file size, number of colors in the palette, and the estimated time to download the file with an Internet connection speed of 56 Kbps.

3Choose a preset from the Saved Settings drop-down menu.

Preview each setting and pay attention to the right pane of the document window. Choose the preset that’s the best compromise between image quality and file size.

4Modify the preset to suit your document.

At this stage, if you’re exporting a slice or document in the GIF format, you can experiment with reducing the number of colors in the Indexed palette. You can either enter a value in the Colors text field or choose a preset from the Colors drop-down menu. If you notice image degradation, you went too far. When this occurs, choose the next highest value from the Colors menu.

5If desired, save the modified preset.

To save a preset with the current settings, click the icon in the upper-left corner of the Optimize panel and then choose Save Settings from the drop-down menu. After you click Save Settings, a dialog box appears prompting you for a name for the setting.

Choose a logical name that reflects what the preset does, or the number of colors and the file format. For example, if you’re saving a preset for the GIF format with 32 colors based on Web Adaptive, a logical choice would be GIF Websnap 32.

6To export an image with transparency, choose Index Transparency from the Transparency drop-down menu.

The default is No Transparency. When you choose a transparent color, the background of the HTML document shows through. This is a useful option when you have an image as a background on the HTML page on which the graphic will appear.

7Click the Select Transparent Color eyedropper and click inside the document to sample the transparent color.

Fireworks displays the transparent area as a checkerboard in the right pane of the document pane when displayed in 2-Up mode.

8Modify the transparent colors.

Click the Add Color to Transparency eyedropper. Then, inside the right pane of the 2-Up window, click the color you want to be transparent.

Select the Remove Color from Transparency eyedropper. Then, inside the right pane of the 2-Up window, click a transparent area. The associated color will no longer be transparent.