Transparent GIFs

This tutorial will show you how to set the background of your GIF to be transparent, that is, to let the background color or image of your webpage show through it. We'll be using Adobe Photoshop 6.

  • Once you have the image open, use the Magic Wand icon tool to select the parts of the image you would like to make transparent.

    selection

  • With the white space of your image selected, drag the layer onto the New Layer icon icon to make a copy.

  • With the 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 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.

    example

  • Go into Channels and make a new channel. Fill the selection of your image with white. Deselect it by pressing CTRL+D.

    example

  • 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.

  • Now go to File>Export>GIF89a. In the Transparency From: drop-down box, choose Alpha 1.

  • The transparent area around your image will become grayed out in the preview. Press OK.

  • That's it! Test your image out on your webpage.

    example