|
|
The degree of difficulty in creating transparent GIF images depends on the type and quality of the image to which you want to apply transparency. For this lesson, we'll practice on an image that is easy to work with so you can get your feet wet before taking the plunge with more difficult images. Paint Shop Pro (PSP) provides several different ways to convert images to transparent GIFs. In this tutorial, we'll use a basic method that applies to both PSP 5 and 6. |
The degree of difficulty in creating transparent GIF images depends on the type and quality of the image to which you want to apply transparency. For this lesson, we'll practice on an image that is easy to work with so you can get your feet wet before taking the plunge with more difficult images. Paint Shop Pro (PSP) provides several different ways to convert images to transparent GIFs. In this tutorial, we'll use a basic method that applies to both PSP 5 and 6.
Generally speaking, images need to be in GIF format to enable transparency. This limits the number of colors in the image to 256. A new format called PNG is now available with more transparency options and it provides the ability to save a transparent image in 16.7 million colors. However, few image editing programs support full PNG transparency and PSP doesn't yet.
We'll start out creating transparency using an image that is already in GIF format. In the next tutorial, I'll explain how to convert an image with 16.7 million colors to GIF format to create transparency.
To show you what I mean about the type and quality of images, here are two examples:
 |
 |
| Star 1 | Star 2 |
Notice that Star 1 has clearly defined edges and the background consists of a single color. Star 2 has a gradient background and is slightly blurry. Unfortunately, a lot of the graphics you pick up from the Web fall into the same category as Star 2; in other words, it's a challenge to create transparency. This is especially true for photographic images. However, where there's a will, there's a way!
Let's make Star 1 transparent.
Download Star 1 by right-clicking on its image above. If you're using Microsoft Internet Explorer, when the popup menu appears, click on "Save Picture As..." and save the file to the directory of your choice. If you're using Netscape Communicator, select "Save Image As..." from the popup menu.
Open up star1.gif in PSP.
Click on the Magic Wand Tool button in the Tool Palette. Type a lower-case "o" to call up the Tool Options box if it is not already displayed. This is where you customize the settings of the palette tools. Once the Magic Wand tool button is pressed down, the settings shown in the Tool Options box, and any adjustments you make, only apply to the Magic Wand.
Adjust the settings under the magic wand tab to match the ones in the illustration at the left.
Hold the Magic Wand's cross-hairs over the blue background color of star1.gif. Click the left mouse button.
Note: if you've set your "Cursors and Tablets" preferences to show precise cursors instead of standard cursors, you'll see cross-hairs instead of a wand when you move it over the image.
If you've done it correctly, your image should look like the one at the left. The moving dotted line or marquee outlines the area that you have selected with the Magic Wand.
If you're new to the concept of selections, here's a brief explanation. Selections allow you to modify the selected part of an image without affecting the unselected portions. This feature allows you to control where effects will be applied.
Now, dare I tell you that selecting the background color was unnecessary?? Actually, it is unnecessary for creating transparency but it's a very good habit to get into. What it does is it performs a check to ensure that the entire background is of a single RGB (Red, Green, Blue) value.
Let me back up a little. GIF transparency can only be applied to a single color (RGB value) within an image. If the background had been composed of more than one color, you'd have had to change that before proceeding to apply transparency. By setting the Tolerance value of the Magic Wand to zero and then clicking on the background color, you've performed a check to make sure you only have one color outside the area of the star. Had you seen bits of the marquee scattered throughout the background area after you'd made your selection, then you'd have known that you had more than one color in the background and would have had to handle the process a bit differently. Having said all that, let's move on.
Click the Select None button to remove the selection from star1.gif or, if this button isn't displayed on your toolbar, go to Selections > Select None. The marquee will disappear from the image.
TIP: If you want to add additional buttons to your toolbar, go to File > Preferences > Customize Toolbar.
Click on the Dropper Tool button in the Tool Palette. Click on the background color with the right mouse button.
Using the right mouse button sets the background color in the Active Colors panel of the Color Palette to match the background color in star1.gif. The Active Colors panel is shown at left. The square that is behind and to the lower-right displays the active background color.
Click the Set Transparency button on the toolbar - if you have it displayed - or else go to Colors > Set Palette Transparency...
The "Set Palette Transparency" dialog box will open. Click on the radio button beside "Set the transparency value to the current background color". If you click the "Proof" button in the same dialog box and check the star image, its background should have disappeared to confirm that you've done it correctly. Instead of the background color, you'll see a faint checkerboard pattern which represents transparent areas in PSP. Click the OK button.
A second way to verify transparency is by going to Colors > View Palette Transparency. I strongly recommend that you always check your transparency with one of these two methods. Stuff happens and it'll save you some puzzlement later on if any failed transparencies are caught at this stage.
All that's left to do now is save your image. Since the file is already in GIF format, just click the Save button on the toolbar and you're done!
The Last Word
The absolute proof that you've really created transparency is to open star1.gif in your browser. You've been successful if you don't see the blue background around the star. The only time that this test isn't useful is if the transparent color is the same as your browser window background. You won't be able to distinguish the transparency.
Here's an important consideration when you create your own transparent images. The color that you make transparent should not appear elsewhere in the image in an area that you don't want to make transparent.
|
|
| Star 1 | Star 2 |
Let's say you were working with the left image above and you wanted to make the background (outer blue square) transparent. You'd select the background color with the Dropper and set the transparency. However, the center square is the same color as the background. When you view the transparency, as shown on the right, the center square has also been made transparent.
I'll deal with this in more depth in another lesson but the quick answer is to change the background color to a color other than the two used in the inner squares before assigning transparency.
| Contents | Services | Portfolio | Tutorials | About |
