How to add transparency to a GIF image
with PaintShop Pro v4

Hi Joe,

All of your tutorials have helped me greatly in building web pages. I'm currently writing a web page for my fraternity. The reason I'm writing you is I have a question when it comes to placing irregular shaped images, i.e. Diamond, circle, etc on a page with a background pattern. Every time I try to place an image I created (I use Paint Shop Pro 4.0) on a page like a circle, I get a square with the circle in it. I have seen this work on other pages and tried graphics from other pages on mine and they all seem to work, except for the ones I try to make. If you could be any help at all I would greatly appreciate it.

Rocco

I gather you want to put in your page a simple image like so...

(frogg1.gif)

The only problem is, when you go to do it, it turns out like this....

(frogg2.gif)

It's really very simple. First of all you can only do this with a gif image. Can't do it with a jpg. With the first frog I have specified that the color white is transparent (this is done with a graphics editor, not with html code). You can do this easily in PaintShop Pro 4.

Here's an image for you to practice with...

(ella.gif)

Fire up PSP 4 and load ella.gif into it. Click View/Image Information. Look at Transparent Index. See it says "None"?

Now load frogg2.gif. Click View/Image Information. Look at Transparent Index. See it also says "None"?

Now load frogg1.gif. Note the transparent index is 215. 215 is white. (Note that 215 is white in that palette. 215 is not always white. But, that's another topic entirely.) What we'll do is show you how to pick a color to be transparent.

Get rid of the froggs so that the only image in PSP is ella.gif. Next choose the eye dropper. As you move that eyedropper around the image the color information is displayed below the color palette to the right. (If there is no color palette visible then Click View and make sure Color Palette is checked)

The information you want looks something like this...

R 0
G 153
B 153
I 111

In a gif image there is room for up to 256 distinct colors. Each color is assigned a number from 0-255. That is it's index number, or I in the chart above. The color above has been assigned the index number of 111 (for that palette). Don't worry about the RGB values for now. It's the index number that is important for transparency.

Now move the eyedropper over the white area. See that the index# for that color is 215? Remember that.

Now you are ready to save the image. This is where you specify the transparent color. Click File/Save As.

First choose the file type (Save as type). Choose GIF. (Only choosy mothers choose GIF??) Ha, I amused myself.

Next look at sub-types. You have 4 options. Well, really 2 basic ones. GIF87a or GIF89a. The 87 variety is OK for regular gif images. If you want either transparent components or animation, you need to use the GIF89a format. So, choose GIF89a Non-interlaced.

Change File name to read ella2.gif. Then click the Options button. Here you have 4 choices for GIF images. Choose "Set the transparency value to palette entry..." and plug in 215. Click Ok.

Now Save the image and put it in a web page...

Isn't that special!

If you're interested, there is more about colors here.

Good luck!
Joe Barta