Saving for the Web. -- Transparent GIF's:. a Photoshop Tutorial by Janee

myJanee.com --> Photoshop Resources --> Janee's Archive Tutorials -> This tutorial

Saving for the Web: Transparent GIF's

In this continuation of the Saving for the Web tutorial, I'll discuss making Transparent GIF's.

Transparent GIF's

Now suppose you want to place this Supra graphic on a webpage with a background pattern? Or maybe you are not sure what sort of background it is going to be on, but you just don't want to have a white rectangular background? This is where Transparency comes in.

Supra on a patterned background

To make a transparent GIF, first, you take away the background of the image. If you have done the graphic on a separate layer, then it will be a simple matter of turning off the visibility eye on the background layer.

Otherwise, you may have to select and delete the background, using other methods. For more on deleting backgrounds, see this tutorial. At this point, your graphic will be on the checkerboard, as mine is. File > Save for Web (or Shift-Alt-Ctrl-S) and you will get the following dialog box:

Check the box for Transparency.

Also, you should choose a Matte color. This can be whatever color you want, but it is best that it approximate the color you are most likely to have for your background color. (See box at right for why.)

What's a Matte for?
Photoshop is pixel-based. In GIF, pixels are either on or off. The way PS makes the edges look smooth, though, and not jaggy, is through what they call "anti-aliasing." What this is is it makes the edge pixels semi-transparent.

So in Supra, some of the pixels around the edge appear on our white background to be pink or lavender. This is because the purple or red pixels are semi-transparent against the white.

Well, since you can't have them semi-transparent, the Matte color tells PS what color to combine with these edge pixels to make them transparent.

I hope you enjoyed this tutorial!

Janee