Making Transparent Gifs: Part 1

Making transparent gifs is tricky and a pain, but I will do my best to explain the whole thing.  The first thing is that the background has to be a solid color.  You will find that there are a lot of images that you can't make the background transparent.  If you really like an image that is on a busy background, you can spend an hour or two erasing & painting that background to one solid color.  For an example of an image I did this with, click here.  But, if you are making buttons or icons, you will be able to do this fairly easily.  Let's use making a button as the example.


First, I will be working in jpg format since that will give me a solid background color.  On page two of the tutorial I will cover converting to a gif format.  OK......I've taken one of my Statgate images and made it a button.  Now I will start the transparency process.

Take note of two things I have drawn arrows to in the above image.  I magnified the image so it's easier to work with, and then look at the colors in the two boxes to the right.  We are going to be changing them.  It's important to pick two colors that ARE NOT in the image.  For most of the sci-fi buttons I make, I usually choose bright purple and green.  Those two colors are hardly ever in most of those kinds of images.  To change the color in the boxes, just click on them one at a time and choose the color from the palette.  One of the new features in PSP 5.0 is to give you the html color code.

 

I made my top box purple and the bottom one green.  One note here:  If you want to flip which color is on top, just click at the point where the arrows are joined and it will flip them.  Now I'm ready for the Magic Wand.  I click on that and then click on the background area of the image.  Now while the area around your image is the broken lines, hit delete on your keyboard.  This Clears  the background area and replaces it with the solid color you picked for your bottom color box.

Well, that doesn't look too good so i'm going to have to adjust the tolerance level of the magic wand first.  Click on the Control Toggle so you can change the tolerance level of the magic wand.  One note here:  in order to change the controls on any tool, that tool must be selected at the time as you can see in the images above.

 

The tolerance was originally at about 30.  I tried several levels, and in the end I went down to level 3 before it worked right.

Now that looks better!  To set what you have done/remove the selection lines, you click on the square selection tool and then click on the image. I also did a little touch up work on the button.  I used the eye dropper to match colors in the button to firm up the circle.  I also cleaned up some other areas by painting with the background color.  For this kind of fine detail work, you use the Paint Brush.  It too needs to be adjusted with the Control Toggle.  And remember:  Tools such as the Paint Brush, Text, Air Brush, etc...get their color from the top color box.  Borders & Backgrounds get their color from the bottom color box.  You can always flip them by clicking on the point where the two arrows join.

 
Part 2 is in the next document.  I told you it was a long process!



You are visitor no.since July 27, 1997
Web Warriors Main Page
Graphics from Web Warriors
GloriAnon: Celtic Warrior
GloriAnon WebWarriors Site Map

Page last updated April 10, 2000
Copyright© 1998, 1999 Web Warriors
All Rights Reserved

Navigation bar for the PSP tutorials
General 1 General 2 Copy & Paste Selection Tools
Resize/Resample Batch Conversions Framing Air Brush/Clone
Borders Color Menu Text Transparency 1
Transparency 2 Icons Filters/Plugins Fonts 1
Fonts 2 Fillers 1 Fillers 2 Index
Layers Tube Management Tube Making Free Tubes