Untitled Document

This is a quick tutorial to help you improve the look of your GIFs. There comes a time in every Web developer's life when it becomes necessary to use transparency in an image. Maybe you need to float an image over a repeating background. Maybe you need to animate a foreground image over a photographic background. Whatever it is, you're desperate because plainly GIFs are inferior to JPEGs, and GIF transparency is, ultimately, a hideous atrocity against art. That said, let's get started.

We're going to put a flaming logo on top of a photographic background. This is never a very good idea. Flames are, in themselves, partially transparent, and GIFs can't handle this. In a GIF, it's all or nothing. So let's look at some examples. Above is our flamey logo. We want to put it over a picture of a forest, like the image on the right. The image on the right, however, is a JPEG, so the logo is not independent of the background.

So, given that we need to make the logo independent of the background, we'd best turn it into a GIF. The first thing you'll want to do is get Fireworks 3 from Macromedia. No other graphics application can handle GIF transparency like Fireworks. After you've done this, turning your GIF into something almost passable isn't all that tough. In fact, it's really just a matter of selecting the highest-quality optimization and playing with the matte settings to match your background. The matte settings will help eliminate artifacts and minimize the effects of edge pixelization. You can see in the following example that even with the maximum palette setting, a white matte will leave artifacts and, in general, ugly up the whole image.

Here's the logo on the background image saved as a GIF: Adaptive, 256 colors, 0 Loss, 0, Dither, Alpha Transparency, White Matte.

Now take a look at some different settings. Each can be appropriate in the right circumstance. For our purposes here, the last two settings produce the best results.