A Complete Guide to Web Design

300 Chapter 16 – PNG Format

Creating PNG Files

Web Design in a Nutshell, eMatter Edition

Index Color

For this method, use the eyedropper tool to select the pixel color (or colors)

you want to be transparent, the same as you would for a transparent GIF file.

The chosen color will appear with an “X” in the Color Table. This method

does not allow for variable levels of transparency—pixels are transparent or

not, as in transparent GIFs.

Alpha Channel

Fireworks uses the transparency information in the layered image (fades, anti-

aliased edges, opacity settings, etc.) to automatically generate variable levels

of transparency for each affected pixel color. Each level for each color occu-

pies a slot in the Color Table and is indicated with an “X,” as shown in

Figure 16-3. If you want a filled object to be 50% transparent, create the object

and set its opacity to 50% using the slider toolbeforeexporting. Under the

Alpha Channel transparency method, the transparency level will be preserved.

Despite its name, this method does not actually use an alpha channel to store

transparency information. The transparency information is stored in the color

table.

When you are finished with the Export settings, click “Export” and save the file

with the.png suffix.

Adobe ImageReady 1.0

To create a PNG file in ImageReady, select PNG-8 (8-bit indexed PNGs) or PNG-24

(24-bit PNGs) from the file formats menu in the Optimize Palette (Figure 16-4).

The Optimize Palette provides interlacing and transparency controls as well, that

change according to which file format is selected. The Optimize Palette for the

PNG-8 format (on the left in Figure 16-4) includes the same controls used for GIF

files for making decisions regarding palette, the amount of allowable dither, and

the color-depth for the image.

Figure 16-3: Macromedia Fireworks’ Export Dialog box showing PNG options