eb graphics files are rectangular due to their pixel structure and file formats … yet we often see non-rectangular graphics on Web pages. There are two ways to make a graphic appear to have freeform shapes.

The simplest method to give the effect of transparency is to set a color for the parts of the graphic you want perceived as transparent to match the background color of the Web page. You aren’t really making the image transparent, but you’ll have the effect when you use it on the page. If you are using a JPEG image this is the only way you can create the effect of transparency.

For example, if you have green triangle and you want it to appear to be free-floating on a yellow page, you would fill the rest of the rectangular file containing the triangle with yellow. When this graphic is place on the page with the yellow background the rectangle will not appear:

The drawback to this, of course, is if you change the color of your page’s background you’ll suddenly have your image appearing in a box of the old page color! But if you know the color is fixed and you want a quick and simple solution, this can do the trick.

For a quick solution or for JPEG files, emulate the effect of transparency by creating the graphic with a background the same color as your page.

GIF/PNG Transparency
Transparency sets one of the indexed colors in the file to be transparent instead of a displayable color.

Only GIFs and PNGs can have a transparent area. GIF and PNG files are made of a fixed set of indexed colors. The transparency feature lets you tell one of those indexed colors to be transparent and let the background of the Web page show through. The alpha channel is somewhat analogous to a mask in print production.

For example, because the triangle has a transparent background, it can be placed on any page or table cell and the page or cell color will show through:

Alpha Channel
Each pixel in the GIF or PNG file can be one of a set of indexed colors. There can be as many as 255 indexed colors in a GIF or PNG file. The colors are described by three color channels: red, green, and blue. Each of the indexed colors is made of some percentage of these three colors.

In addition, the file formats support a fourth channel, the alpha channel. The alpha channel can record places in your image which are “background” and set that index color to have a transparent value.

If you are working with a graphic and have set the file background to “transparent” you have, in effect, set an alpha channel value. When you export that file as a transparent GIF/PNG, that “color” will be transparent.

You can also set a particular indexed color to be transparent. For example, if your graphics file has a black background, you can set black to be the indexed transparency color; everything that is black wiil be transparent.

Creating Transparency
Image editing programs such as Fireworks and Photoshop export transparent GIFs. Here’s an example of the Fireworks export box:

	Exporting GIFs from Fireworks allows 3 options for transparency:
	No Transparency:
	Make specific color transparent:
	Use alpha channel values:

Anti-alias Transparency
Anti-aliased and other edge effects require special note in transparency.

It is important to note that if your graphic has an antialiased edge, or an edge which is feathered or otherwise treated with effects, transparency won’t work quite the way you expect in a GIF file:

	This antialiased text is set against a black table cell. When the text was created in the graphics program, the background was transparent. Antialiasing used light colors to create the illusion of smooth rounded edged, adding in white and pale pinks. Against a black background, these antialiased pixels produce a halo effect.
	This is the same text, created the same way?except that it is not anti-aliased. There is no halo effect.

One workaround for this is the create the background against the color you expect to be using the image. When the anti-aliasing or other effect is processed, the colors used to create the effect will be those of the background:

	Same text, created on a black ground and anti-aliased.
	But you wouldn’t use this file against a white background?same halo effect, but in black instead of white!

One of the nice things about PNG files is that they support a true 8 bit alpha channel?which means anti-aliasing and special effects issues are far less of problem with PNGs than they are with GIFs.

It isn’t just anti-aliased text that creates a problem?drop shadow and other graphic effects create the same halo:

Artifacts occur when the original file has anti-aliased edges, like this drop shadow. Some of the original background color of the image file will be blended into the drop shadow, making an undesirable result when placed on a different background.

To avoid artifacts, create your graphic on a background that is the same color as the background of your Web page, and then specify that color as the transparent color. A fail-safe way to do this open your page in Navigator or Explorer and take a snapshot. Open the snapshot in Photoshop, and use the eyedropper tool to select the background color. In the graphic file, fill the background layer with this color. This may not look very good, but once it’s exported with the background color selected as the transparency color, it will look fine on your Web page.