This Tutorial will show you how to make Transparent GIF images, which allow the background color or texture of your website to show through the areas that you define as transparent.
In previous versions however, there are some extra manual steps you need to take… follow along!
Step 1
First, open the image you plan to add transparency to…
Step 2
Here is a zoomed-in view of a portion of the above image… notice all the tiny discolored pixels? This is common in most images that have been compressed for use on the internet (this is especially true if the image has been saved as a highly compressed JPG. This won’t usually be a problem on an original image you created within Photoshop from scratch, but on images from other sources, there’s a good chance it will be.
The first step will need to be to get rid of ALL of those extra dots or as many as possible so we can make a perfect 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 (these semi-transparent pixels will come back to haunt you when your completed transparent GIF is placed on a contrasting background… so zap ‘em while you can!).
Step 3
Once you have a nicely 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”).
Step 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 the Delete key. Click to turn off the Eye icon on the background layer to hide the layer and better show you the transparent areas. Then Cmd+Click (PC: Ctrl+Click) on the new layer to get back your selection around the image.
Step 5
Go into Channels and make a new channel. Fill the selection of your image with white. You may then press Cmd+D (PC: Ctrl+D) to deselect.
Step 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.
Step 7
Press OK and you should be good to go. Test your image out on your site, and go back and fix any problems if you find them.
