Home       Tutorials  nbsp;   Beginners Classes  
14 Creating Transparent GIFs
Download this tutorialDownload (??kb)

Creating Transparent GIF Files

Created by: Charith
Modified by: PSPUG Learning Center
and the Prof

Transparent GIFs are a handy thing to use on any Web page. All graphics are created in either a rectangular or square shape. We don't always want these shapes on our web pages, but rather just a portion of an image to appear. Transparent GIFs allow a selected color of an image to appear invisible, allowing the background color from the Web page to show through it.

Exploring Transparency

Open the star.jpg image from the download. Notice this star.jpg image has a very light blue background.

Let's explore Transparency and how to create Transparent GIF files. If you tried to use this image on a web page, it will show up with it's blue background color. (If you open up the Animation Workshop, you can load and view files there. Currently, this start.jpg will show up with its blue background.)

First, duplicate the file to preserve the original.
(Window || Duplicate)

In order to make this image a transparent gif, we first need to remove the background color.

  • Use the Dropper Tool Dopper Tool
  • Right Click in the Blue Background area to set the Background Color to this Blue Color in your Color Palette

  • Click on Colors || Set Palette Transparency
  • An Alert Messages appears. Select YES
  • A 'Decrease Color Depth' window pops up. Just select OK and leave the settings as exist.
  • In the 'Set Palette Window' use the setting: Set the Transparency value to the current background color
  • Click on Proof to see the transparency
  • Click on OK

Save the Image:

  • File || Save As
  • Select Compuserve Graphics Interchange (*.gif) as the File Type.
  • Click on the Options Button
    • Version 89a = Checked
    • Noninterlaced = Checked
    • Click OK
  • Filename = clearstar.gif
  • Click on Save
  • Click Yes when you get the message telling you it will reduce the number of colors to 256.

There is another way to Save As Transparent .gif in by going to File || Export || As Transparent GIF. We will not go into that in these sessions. You might want to try it on your own, though. :o)

You have just created a transparent GIF. *NOTE* until you post the image on a web page with a different colored background, you will not see the transparency of the color you chose in this graphic. Paint Shop Pro will always show a graphic in all it's true colors. The previous task was very simple, unfortunately, not all graphics or pictures come with a solid background.

Another Example of Creating a Transparent GIF File

Open the star1.jpg file. Notice that this file has a gradient background with a number of colors. To create a transparent GIF from an image like this, you need to edit the background and change it to one solid color. We will change these colors to a solid white.

  • In the Color Palette set both foreground and background = White
  • If you try to use the Magic Wand at this point, it will not pick up the outline of the star as it did in the last example with a solid color background.

One technique is to set the Tolerance Value in the Magic Wand so that it picks up additional pixels. Begin with one value. Select one area of the graphic background, making sure it does not include any part of the star.

If the selection does include part of the star, deselect the floating selection by RIGHT clicking the mouse on the graphic, then set the Tolerance to a lower number and try the Magic Wand again.

If the value is too small, much less area is selected. Just set the Tolerance to a higher number and try the magic Wand again.

  • Try setting Tolerance = 60
  • Click on the Delete Key
  • Use the Mouse on another colored section of the background
  • Then Use the Delete Key
  • If the area is to big, reduce the Tolerance Value

Keep selecting areas until the background is white or mostly white. There are now a couple of techniques one may use to remove the unwanted areas. The easiest way is to first Zoom the image two or three times.

  • Method #1: Use the Freehand Tool (Looks like a lasso)
    • Selection Type = Freehand
    • Feather = 0
    • Antialias = checked
    • Then draw a circle around a selection a background color
    • Use the Delete Key to remove the background
    • You may need to hit the delete key a couple of times
    • Repeat until all areas are removed leaving only a white background.
  • Method #2: Use the Paint Brush Tool
    • Make Sure the Shape is set to Normal (If needed, click on the brush and set to Normal)
    • Shape = Square
    • Size = 1
    • All other values = 100
    • Zoom the Image
    • Paint each pixel wanted by clicking the mouse and the pixel changes to White since both our foreground and background colors are white.
    • Repeat until all unwanted pixels have been painted white

Then, just use the technique given above to save your image as a Transparent Gif. Remember to give the image a File Name.

-- Enjoy -- :o)

This tutorial concludes are series of tutorials for using PSP. We encourage you to explore our other tutorials (/tut/tutmain.shtml) available on our Web Site. Also, explore our Learning Center (/nav/clc.shtml) for additional Tutorials, Online Classes, Self Learning Programme and Tips and Tricks. There are many resources for your learning pleasure. Also, if you have questions, please feel free to use our Message Forum. (http://www.pspug.org/forum/). There are many helpful people willing to assist you on any aspect of using PSP.

Happy Creating!