Web Design in a Nutshell

Transparency

The GIF89a format introduced the ability to make portions of graphics transparent. Whatever is behind the transparent area (most likely the background color or pattern) will show through. With transparency, graphics can be shapes other than rectangles!

To understand how transparency works, you need to start with the color table (the table that contains the palette) for the indexed color image. In transparent GIFs, one position in the color table is designated as “transparent,” and whatever pixel color fills that position is known as the Transparency Index Color (usually gray by default). All pixels in the image that are painted that color will be transparent when viewed in a browser.

In most graphics tools, the transparent area is specified by selecting a specific pixel color in the image with a pointer or eyedropper tool (in Paint Shop Pro, it needs to be specified numerically). All pixels in the image that are the selected colors (corresponding to the same position in the color table) will be replaced with the Transparency Index Color and therefore transparent when they are rendered in a browser.

Let’s look at three techniques for working with transparent GIFs. Most of these techniques use Adobe Photoshop for its layering features. The first provides strategies for getting rid of “halos” (or fringe) around transparent graphics. The next gives pointers for preventing unwanted transparency within your image. Finally, there is a demonstration of how transparency can ...