Making Transparent GIFs by Matt Margolin Updated 28 Oct 1999

Matt Margolin [an error occurred while processing this directive]is a the Executive Editor of the online audio resource site Angry Coffee. He often concocts elaborate and bizarre fantasies about meetings he might have with standards committees.

Page 1 Five hundred monkeys on 500 typewriters might have a hard time writing the complete works of William Shakespeare, but I guarantee that, with the right tools, they could make their GIFs transparent. It's just that easy. The graphics interchange format (GIF) was first developed by CompuServe as an efficient method to compress images for online delivery. Built into the GIF specs was the ability to make one of the image's colors invisible. Similar to the blue-screen effect in filmmaking, this feature allows developers to designate a certain color as transparent when creating their GIFs. When the image is displayed on a Web page, the designated color will disappear and let the background color or picture show through. Once you've created or, uh, "found" a GIF, it's pretty easy to designate the transparent color. Most major image editing programs like Photoshop can handle this task with ease nowadays, but if your budget is tight, there are several shareware applications that can do the trick. If you're on a Mac, try Transparency (free). Windows users can check out LView Pro (US$50 — though you can test it out for 21 days for free). Both make it easy for you to pick a color from the GIF and eliminate it. Before Transparency. After Transparency. In this example, we'll take our little Webmonkey's toy away. Let's start with the Mac program first. The nice thing about Transparency is that it's highly specialized: It does one thing and does it well. Launch the program and you'll find a welcome scarcity of menu options. Under the lonely File menu, choose Open and locate your GIF. I find webmonkey.gif, and it appears along with a small color palette. This palette shows tiny swatches of each and every color that appears in the image. With no absence of malice, I select the magenta color we used to color the monkey's wrench. My intention, of course, is to wrest the tool from the critter's hand, rendering it both helpless and unhelpful (much like our staff before 10 a.m., har, har). Once I select the color on the palette, the program will automatically mask it out in the image, replacing it with gray (so you can tell what part of the picture will disappear). Remember, though, that only one individual color will be transparent, so if you have 17 shades of green, 16 shades will still be left visible. This trick can cause an ugly fringe around your image, especially if you're using antialiasing. Antialiasing visually smooths the edges of images by blending the color of the edge with the color of the background, and this technique involves lots of shades of the same colors. So if you choose one color to be transparent, there will still be a lot of similarly colored pixels lurking, screwing up the original smoothness. The way to get around this is to figure out what color your background is going to be beforehand, then use that same color for the background of your GIF. Then the antialiasing will be created with the correct color, and it won't matter if there's a little fringe around the image because it'll blend in with the background. Of course, if you're placing the GIF on top of a multicolored background or, worse, another image, this method may not work so well. Anyhow, the drill for Windows users is almost exactly the same, though LView Pro handles a much wider range of graphics tasks. Fortunately, we'll be ignoring most of them. Making a transparent GIF with LView Pro is a two-step process. First, we have to set a background color, then we have to set our preferences so the background color becomes the transparent color in our GIF (the same method I just described for dealing with dreaded pixel fringe). Under the Retouch menu, select Background Color. A color palette with tiny swatches will appear, and you should select the color you want to be transparent. By checking the Mask option, you can see which colors are affected. Then select Properties under the File menu and, within the GIF section, check Save Transparent Color Information to GIF89a Files. And that's it. You're done. I swear. There's nothing else to it. Kind of embarrassing, huh? It's a limited little hack, but it can make for some beautiful effects.