Transparent Gifs

A transparent gif is a normal gif image with the exception that you assign one of the colors in the image to be transparent or clear. This will let the background of your web page show through this "transparent" area. There are many ways to do this. I will show you in three of the most common programs that I use...Macromedia Fireworks, Gif Construction Set & Adobe Photoshop.

First I must tell you a hint on creating a transparent gif. The whole idea is that you pick one of the colors in your image to be transparent, therefore, this color should not be a color that you plan on seeing. Here is an example:

I created this image knowing that I had to have a transparent background. Now your first impression would be to color the background white, right? No, I colored it gray for a reason. If I would have created this image on a white background, and later selected the white as my transparent color, the white lettering would have also disappeared. Always pick a background color that is not in your original image.

After selecting the gray as my transparent color, the image looked like this on the homepage:

If you have created and saved your image, you are now ready to make it transparent. You may do it with one of the following programs:

Fireworks - Open your image in Macromedia Fireworks. Now select "File>Export Preview". You will now see a panel that contains your image and all of the colors in your image. Select the "Transparency Tool" (it looks like an eyedropper) and click on the color that you will be making transparent. You will notice that the color you selected is now transparent. If you are satisfied with your choice, select "Export" to save your image.

Gif Construction Set - Open up "GCS" and open your image. Double-click on the "Control" text and you will see a box with many options on it. Check the "Transparent Color" box and click on the little eye dropper icon. Your image will be displayed and you may select the color that will be transparent. Once selected, hit OK. You may now view your image by clicking on the "VIEW" tab. If you are satisfied with the results, save the image and you are done.

Adobe Photoshop - To be able to create a transparent gif in Photoshop, you must have one of the later versons that comes with ImageReady or the Gif89 export filter for older versions. We will concentrate on the newer versions. Open your image in Photoshop. Now select "File>Save for Web". ImageReady will open and you will see a panel that contains your image and all of the colors in your image. Select the "Transparency Tool" (it looks like an eyedropper) and click on the color that you will be making transparent. You will notice that a square appears in the "Color Pallet" showing you the color you have just selected. Now press the "Maps Selected Colors To Be Transparent" button and the color you selected will become transparent. You may select more than one color to be transparent. If you are satisfied with your choice, select "Save" to export your image.

I hope this helps, if you have any other questions, feel free to ask me.