Transparent GIFs will allow the background color or texture of your website to
show through the areas that you define as transparent. Version 6 of
Photoshop has a built-in way of creating Transparent GIFs - choose Help ->
Export Transparent Image and follow the instructions it gives from there (you
may still need to prepare your image using several of the steps below
though). In previous versions however, there are some extra manual steps
you need to take... follow along!
1. First, open the image you plan to add transparency to...
*www.absolutecross.com/images/tips/psd/transgif1.gif
2. Point your mouse over the image above... notice all the tiny discolored
pixels when you zoom in on the image? The first step will need to be to get rid
of ALL of them so we can make a pefect selection around the image itself.
Basically, you must have an image with perfectly clean edges all the way
around, so that a perfect selection can be made later on with the Magic Wand.
If your image is "part" of another larger image, the same applies - remove
everything completely from around the image.
Use the Zoom Tool to get a super close-up of your image and then use the
Eraser to remove the extra pixels from around the edges of your image,
including enclosed areas (like the white space you see between the trumpet
player's neck and his right arm). The more accurate you are, the better your
final product will turn out.
TIP: Press the Spacebar to temporarily select the Hand Tool to help move
you around within the zoomed image.
3. Once you have a pretty cleaned up image, use the Magic Wand to select all
the white space around your image and within the enclosed areas. If this
doesn't work (i.e. there are still too many junk pixels) try making white (or the
prominent color of the junk pixels you are having trouble removing) your
foreground color, and choose Select -> Color Range. This won't work well if
you have a lot of white (or the junk pixel color) that's actually part of your
image, since it will be selected as well (if this happens and all else fails, go
into Quick Mask Mode and re-color in the areas you want to keep - Quick
Mask is like "painting in your selection area").
*www.absolutecross.com/images/tips/psd/transgif2.gif
4. Now you should, by one means or another, have a perfect selection
surrounding all the non-image area of your document (white space). Drag the
layer onto the New Layer icon to make a copy. With new copy of the layer
selected press Delete to remove the surrounding white space. Click on the
background layer and choose Select -> All and press Delete. Click to turn off
the eye icon on the background layer to hide the layer and better show you the
transparent areas. Then CTRL+Click on the new layer to get back your
selection around the image.
*www.absolutecross.com/images/tips/psd/transgif3.gif
5. Go into Channels and make a new channel. Fill the selection of your image
with white. You may then press CTRL+D to deselect.
*www.absolutecross.com/images/tips/psd/transgif4.gif
6. Now, return to the Layers Palette and make your image layer active.
Choose Image -> Mode -> Indexed Color, check to make sure the color
settings are correct, and click OK. Then go to File -> Export -> GIF89a. In the
Transparency From: drop-down, choose Alpha 1 (the bottom item). You should
automatically see the area around your image become grayed out in the
preview, specifying the area to be set as transparent.
*www.absolutecross.com/images/tips/psd/transgif5.gif
7. Press OK and you should be good to go. Test your image out on your
*www.absolutecross.com/images/tips/psd/transgif6.gif
webpage, and go back and fix any problems if you find them.
