So You Want A Transparent GIF, Huh?

Jason G. Aults

Well, I asked Joe if I could update this page and maybe throw in a little bit more information... You're reading this 'cause he said yes. :-)

So, you ask... how exactly do you make parts of images transparent? Well, first you have to have a program that will help you (surprise, surprise, surprise). I suggest Paint Shop Pro. Not only will it help you do transparent GIFs but it is one of the best image editors out there... for Windows, anyway. And, not only that, it's shareware too! Can't beat that with a three foot stick... There are versions of Paint Shop Pro available for Windows 3.x, Windows NT 3.51 or higher, and Windows 95. As far as the Mac goes, I'm can't tell you, 'cause I'm Macintosh illiterate. You can download Paint Shop Pro for free at the Jasc, Inc. Homepage.

So, after you have Paint Shop Pro (hereafter referred to as PSP... easier to type ya know?) installed, fire it up, and see whatcha got... It should look something like this:

PSP screen shot

Click on File, Open to get the file you want to transparentize (I think I just made that word up... what do ya think? Should I call Webster?) The file doesn't have to be a GIF to start out with, because we will save it as a GIF later.

The first thing you should do is reduce the number of colors in the image (because GIFs are only allowed to have 256 colors). Click on Colors, Decrease Color Depth. Then choose 256 Colors...

PSP color menu

(If that isn't a choice, your image is probably already 256 colors... do not pass GO, do not collect $200; just move on to the next step.)

This will put a little window on the screen. I have found that it doesn't make much difference what choices you make. I usually just leave this alone and click on OK. Your computer should do some work, and then your image is done. You might not be able to tell the difference, but don't worry... it worked.

Now that your image has the proper number of colors, we can get to work. You have to decide what color you want to be transparent. Here is my image:

As you can see, I want to turn the blue transparent, so just the smiley face shows up. How in the heck do you do that, you may ask (or at least I hope you may ask... otherwise, you're reading the wrong tutorial...)? Well, first you have to have the color palette on the screen. Do that by clicking on the button below:

PSP color palette

That should bring this up:
PSP color pallette

Now, you need to select the Eyedropper tool. It looks like this:

, and you get to it by clicking on the paint brush icon, (the left icon in the picture up there). The eyedropper tool lets you "suck up" a color from your image.

So... what you want to do is "suck up" the color you want to make transparent by clicking on it with the eyedropper. Did you notice in the picture on the left, the little blue square in the color palette? That is cause I sucked it right off of my smiley face image. Cool, huh?

See the white square in the color palette? That is the foreground color, and as I mentioned ,the blue square is the background color. The color you "suck up" will automagically become the new foreground color... But we need it to be the background color! What now?!?

See that little black arrow pointing at the two colors? Click it. Click it again... Click it one more time... See what happens? That little arrow makes the foreground and background colors switch places! Those people as Jasc sure are smart, huh?

So now what do we do? Well if you're sure that the color you want to be transparent is in the background square, you're ready to save that picture. Click on File, Save As... That will bring up a window like this:

PSP save dialog

Make sure you choose "GIF - CompuServe" where it says Type, and "Version 89a - Noninterlaced" where it says Sub-Type. This is extremely important!. Now, click on Options... It will bring up a screen that looks something like:

PSP options menu

As long as the color that you want to make transparent is set as the background color, click on the third choice down, the one that says, "Set the transparency value to the background color" Click on OK. Make sure you file name is correct, and click on OK...

Whew! Now... open your new GIF in your favorite browser... as long as you did everything correctly, the background should be transparent!

And that's that...