NWE Help: Graphics: Intro: Transparency

NWE Home :: Help :: Graphics :: Intro

Did you ever wonder how to make images that seem to float on top of web pages like our trusty NWE help logo? Lucky for you, it's not that difficult. As it turns out, these "floating images" are really rectangular just like any run-of-the-mill web image. Their secret is that their background color has been rendered transparent.

You will notice that nearly all transparent images on the web are in GIF format. Because the GIF format recognizes only 256 colors, it's fairly easy to select and describe individual colors. GIF colors can be identified by the same hexadecimal codes used to define background colors for web pages. For example, the hexadecimal code for white in both cases is #FFFFFF. To give a GIF a transparent background, you figure out the hexadecimal code of the background color, then you designate that color as transparent.

Many popular graphics programs such as Adobe Photoshop or Macromedia Fireworks allow you to designate a transparent color by simply clicking on an area of the image with your mouse. Unfortunately, the graphics programs in the NWE do not provide this feature (but stay tuned; we're working on it!). In the meantime, you can use xv to learn the hexadecimal code for the color you wish to make transparent, then use another program such as giftrans to perform the transparency.

After you make the background of your image transparent, you may find that you are not completely satisfied with the results. It is possible that the image now is surrounded by vestiges of the old background color in what graphic designers call a "halo effect."

Original image	Image with "halo effect"

Halo effects occur when the borders between two colors appearing in an image aren't distinct, but instead consist of pixels that are subtle mixtures of the two basic colors. This "border blending," known as anti-aliasing, keeps the edges of objects in an image nice and smooth. Unfortunately, because the transparency command works on only one color, it leaves behind all of those border pixels of a slightly different shade.

One solution to the halo problem is to turn off anti-aliasing in your graphics program. Some programs allow you to do this manually, but if that option isn't available, you can choose to work in a mode that allows only a specific set of colors (such as 8-bit mode in xv). While this solution often provides satisfactory results, it also can present some problems of its own.

Original image without anti-aliasing	Transparent background with jagged edges

Above are examples of images created without anti-aliasing. While the halo effect doesn't show up in the transparency this time, the star has jagged edges. In some cases, you might find a little jaggedness acceptable, but in others the results may look terrible.

The best way to add transparency to an image without sacrificing quality is to start out with a background color very similar to the background of the Web page on which the image will reside. That way, you can take advantage of the smooth edges that anti-aliasing produces, but the off-color "border pixels" will blend in with their surroundings. If your image already has a background likely to cause a halo effect, you can change the background color in a program such as xv before you perform the transparency. When you change the background color, be sure to clean up any vestiges of the old background color that may be hanging out along the edges of objects in the image.