Web Shoppe
Home | Design | Graphics | Tutorials | Transparent GIFs

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
 

about this site
site map
forums
ask a question
link this site

html tutorials
css tutorials
php tutorials
javascript tutorials
htaccess tutorials

graphics design
graphics tutorials
website design
internet copyright

about domains
about web hosting
hosting tutorial
xentrik hosting
ftp tutorials

stats logger
search engines
code generators
button labeller
remote services

font archive
website layouts
website graphics
useful scripts