The GIF89a file format allows you to pick one color from the color lookup table of the GIF to be transparent. Using current image editing software like Adobe Photoshop (and many shareware utility programs) you can select one color to become invisible. Normally the color you select is a background color. In the example below, we chose the pink background color to become transparent:



We use transparent GIFs for the header and footer graphics at the top of each page in this manual. The transparent background allows the lettering of the "Yale C/AIM Web Style Guide" to cross over the gray background of the scan column to the white of the page background. The graphic below shows the transparent header graphic on top, and then shows what the same graphic would look like if it was not a transparent GIF:



Unfortunately, the transparent property is not selective; if you make a color transparent, then every pixel in the graphic that shares that same color will become invisible. This can sometimes have unexpected consequences when a color is used both in the background and in other places in the graphic:



Adding transparency to a GIF graphic can also lead to disappointing results when the graphic contains antialiased edges with pixels of multiple colors. (Antialiasing visually "smooths" the shapes in graphics by inserting pixels of intermediate colors along boundary edges.) In the example below, when we change the background color from white to transparent (letting the gray Web page background show through), we get an ugly white halo around the graphic:



You can avoid some of the problems with antialiased graphics by creating the graphics on a background similar to the color you choose for your Web pages. In our case, we chose white as a background color for the pages in this style guide. The bird painting below is a rectangle (GIF graphics are always rectangles), but you can't see the edges because we painted the background in the GIF white, then set the white color of the GIF to be transparent. This assures us that bird will appear against a perfect white background every time, and the edges of the graphic will never show:



Watercolor paintings by Pat Lynch. Copyright 1997, all rights reserved.

Transparency works with simple diagrammatic graphics, and with complex shapes. The GIF graphic of the watercolor painting below can run across the scan column and into the white background because we made the white background transparent. We avoided potential problems with a light halo around the leaves in the gray scan column area by retouching the painting to remove the white antialiased "halo" from the leaf edges: