Make a Color Transparent in a Graphic:
How to do it

Lview Pro
Snoopy on his doghouse Snoopy on his doghouse Snoopy on his doghouse
Snoopy on his doghouse Snoopy on his doghouse Snoopy on his doghouse
Paint Shop Pro

Use this link for a No-Frames version of these directions. I finally made the snoopy graphic fit in with the clouds and sky that are also on my class 821 homes page with a transparent background! I had been wanting to do this ever since I first put him on my page to mark the spot where those of us taking the fall VU 821 HTML class could find what other classmates were creating. The "light bulb" clicked on how to do it when I put together tips gathered from study groups and IRC friends taking online classes at VU.

I first tried changing the snoopy.gif on my "index.html" for my class 821 homes "horizon.html" by making the background the aqua sky patch so that snoopy appears to float transparently.

Snoopy on his doghouse to mark classpage section

This made the aqua or turquoise transparent in Lview Pro 1.D2 when I saved it as gif89a and allowed the clouds and sky to show in the browser instead of the patch of aqua. (shown in the first row of examples here.) Snoopy in the second row of examples was my second attempt in PSP with the new stuff I figured out in Paint Shop Pro.

I used Tina's directions for making backgrounds transparent using Lview Pro 1.D2 (posted on my "anne831.html"). Then I went back to PSP v3 to try what I learned from doing it with Lview Pro. To change the background color and make it transparent, you will need to have a graphic that has a background of all one color using these steps. *You will need to make some modifications if there are additional colors. While these programs are for windows, there are usually similar options in image manipulation programs for the MAC.

In Lview Pro the snoopy.gif, on my index.html that I wanted to make float in the sky background on the class 821 pages without the patch of turquoise sky, showed the dimensions 32x32x8 colors at the top of the Lview screen. *Later I found in PSP at the bottom of the screen, 32x32x16 colors after I had decreased the color depth. The first time I tried, it said 32x32x256 colors and I decreased color depth to 16 colors. When I selected Colors from the menu, then count colors used, I learned that there were 5 unique colors.

Anyway, the snoopy.gif background was selected as white in PSP. I did not want white as the transparent color because Snoopy is white and I did not want him the color of the sky and clouds. Remember that the background color does not necessarily mean the section that you might assume is the background. In Lview Pro when I selected Retouch/Background color the black square was selected from the colors and there were 8 squares in the palette. In PSP clicking to change the background colors brought up the 16 color palette using the colors from the graphic with a white square selected.

In both there were five colors from the gif to work with (yellow, brown, turquoise, black and white) and the rest of the boxes were white. (in 256 colors in PSP, the remaining squares were all black). In both programs I clicked on the turquoise box to make it the background color. For Lview Pro I also checked the box for mask selection using and kept the white checked instead of black because my sky and clouds background was light. You can also select the eye dropper icon in PSP. Then set the new background color by right-clicking in the color area in the graphic. You might need to then use the fill tool (paint can) and right-click on the backgound color area to color the part you want to make transparent.

If you are using LviewPro 2.8, the image must be in palette format which you can check from Color/Color Depth. Then select Color/Palette Operations/Transparency. Check the box for "Layer uses transparency information". Move your mouse pointer to the area in the graphic which you wish to make transparent and click on it. The help file gives detailed directions.

In both programs, I saved the graphic as GIF 89a. PSP gave the choice GIF - Compuserve with further choices for Version 89a - interlaced or Version 89a - noninterlaced. Lview by default makes the background transparent and saves as interlaced unless you change the options found under File, then Properties and select the Gif tab. (In LviewPro 2.8, select Save As Gif87a/87b (gif*.*) and click on the "File Type Options" button and select the GIF tab. Make sure GIF89a and Save Transparent Color Information are selected.) In PSP v3 I clicked on options (available in the same screen where you make your save choices) and selected "Set the Transparent Value to the Background Color." In PSP 5 released April 1998, you will now find the option to set the transparency under the "Colors" menu. You do not realize the difference until you view the new graphic on your web page.

Snoopy yellow transparent
Yellow is transparent
Snoopy brown transparent
Brown is transparent
Snoopy black transparent
Black is transparent
Snoopy white transparent
White is transparent
Snoopy turquoise transparent
Turquoise is transparent
Snoopy on his doghouse
No colors are transparent

The two rows with the first five snoopy gifs show what happened when I selected different colors in the gif as the transparent "background" color. You can see that the sun disappeared when I chose yellow. Selecting brown for the second example shows the clouds and sky background instead of the brown house in the original gif. All of the lines and snoopy's black ear disappear when I made black the transparent color in the next example. The fourth example shows the results of selecting white and is a little harder to tell. Compare it with the color of white in the other examples and you will see that snoopy shows through as the color from the sky and clouds background at the point where it is placed. The middle example in row two shows selecting turquoise as the background color the way I wanted Snoopy to show on my web page. If you have a different color background on your web page, the color from yours will show through instead of the sky and clouds background I have here. The last example in the second row shows the original image with no colors selected as transparent.

Here is another example where I used Tina's directions for making the birthday graphics transparent. The images originally had a white background like the airplane at the top and did not look right with the cream color background of the web page. In Lview Pro I selected white for the background color I wanted transparent and for mask selections kept white checked. The cream color background then shows through and the graphics appear as the shapes instead of in a white rectangle. If you are making your own graphics or titles in a graphics program, you will want to make the color to be transparent the exact hex color code you use for your web page background.

The original snoopy.gif without any changes is 214 bytes. For small graphics the interlaced option does not make a big difference, but I made him interlaced for the second PSP transparent example. This added 4 bytes to the file size (from 251 to 255 bytes). The overall file size was smaller in Lview at 226 bytes. Just to see if it made any difference, I saved the second Lview sample with black checked in the mask options. Had I not decreased color depth in Paint Shop Pro, the file size would have been significantly larger than the original graphic by saving it with 256 colors. If a graphic uses the jpg format, you will have to convert it to gif89a in order to make a background color transparent.

*Sometimes the number of colors shown for a graphic seems to depend on what graphic you were using just before in Paint Shop Pro. I have not figured out why sometimes options to increase or decrease color depth are not available. If there is no color in a graphic that you can select to make transparent for the background in the graphic because the color also appears in other parts of a graphic, Bec told me to increase the color depth so that I could select a color not already in the graphic. Fill the area with the new color using the paint can icon. You can play with the magic wand tool and the tolerance settings to select an area and fill with a background color to try making it all one color when you have a graphic that has multiple colors in the background.

If you got here through my frames example created for graphics class, I know the top examples show on the left side of the frame. I left them in this file for folks not in frames to see. Select no frames version.


You will find links to resources for creating transparent images in both the Graphics and the Graphics Tutorials sections of my main pages.
To Anne's World: Web Page Resources