|
|
If you've read through the first tutorial, I introduced you to "Star 2". This is a less-than-perfect image to work with: |
Star 2 |
This image is more difficult to work with because:
- there is blurring between the main star image and the background
- the background is composed of a range of colors
- the image is 16.7 million colors and the color depth must be reduced.
The challenge is to successfully select the background so that you don't leave a fringe of it behind along the edge of the star. There are many methods you can use to get to the same end point. The method is mainly dependent on what kind of background your transparent GIF will be placed on. If the original background is light in color, you don't need to be as precise if the image is destined to be displayed against another light background. Also, patterned backgrounds tend to be more forgiving if you are left with a bit of a fringe around the opaque part of the image.
The images below illustrate this point.
 |
 |
 |
I made the star transparent using a selection Tolerance of 35 (more on that later) and placed it on different backgrounds. The first two look fine. However, in viewing the star against a dark background, you can now see a mauve fringe around the outside edge. The moral of this story is: you don't need to be as fussy if the original background of your image will blend into the target background. For the purpose of this lesson, we'll assume that the star will be placed on a white background. Absolute precision in selections will be covered in the next lesson.
Download Star 2 by right-clicking on its image at the top of the page. 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 star2.jpg in Paint Shop Pro (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. (The "o" is a toggle shortcut that alternately displays and hides the Options dialog box.) Once the Magic Wand tool button is pressed down, the settings shown in the Tool Options box - and any adjustments you make - apply only to the Magic Wand.
Adjust the settings under the magic wand tab to match the ones in the illustration at the left. Make sure the Tolerance is set to 45. A tolerance setting of zero will select adjacent areas containing the exact color clicked on. A higher tolerance will allow you to select similar colors to the one clicked on. The higher the tolerance, the larger the range of colors that will be included in the selection.
Hold the Magic Wand's cross-hairs over the gradient background color of star2.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 only part of the background gradient is selected, press down on the Shift key and click the Magic Wand on an unselected part of the background. Pressing the Shift key adds a new selected area to the previous selection. Continue doing this until the whole background is selected but make sure not to click too close to the star, lest you accidentally include part of it in your selection.
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.
Before we continue, we need to clarify the difference between GIF transparency and PSP layer transparency for those who aren't familiar with them. GIF transparency exists in the final saved image. PSP transparency is an area on a promoted layer of an image in which the pixels of color have been removed. Also, the image must have a color palette of more than 256 colors to allow PSP transparency. PSP transparency doesn't automatically result in GIF transparency. You have to tell PSP when you're saving a GIF if you want the PSP transparency to end up as the transparent area in the GIF. This feature was introduced with version 6 of PSP.
If your Layers Palette isn't already displayed, type a lower-case "L" to display it. As shown in the portion of the palette at the left, the star image is on the "background". The background isn't actually a layer and it doesn't allow for PSP transparency because it's considered to be "flattened"; in other words, every pixel must be filled with a color. However, you can promote the background to become a layer and then apply PSP transparency.
Right-click the Background button in the Layers Palette to display the drop-down menu as shown at left. Click on the menu item "Promote To Layer". The name on the button will change to "Layer1".
Now we're going to delete the background that's been selected in the star image. Pressing the Delete key should accomplish this but there is a bit of a bug in the program. If the last thing your cursor touched was the Layers Palette, it won't work. You need to activate the star image which you can do by clicking on its title bar.
Once that's done, delete the background by pressing the Delete key, leaving a faint checkerboard background.
Click the Select None button to remove the selection from star2.jpg or, if this button isn't displayed on your toolbar, go to Selections > Select None. The marquee will disappear from the image.
Before proceeding to save the image as a GIF, there's one more tip to pass on. When using layer transparency as the guide for GIF transparency, if there are semi-transparent pixels around the edge of the star, PSP will fill them in with whatever background color is currently displayed in the Active Colors section of the Color Palette. The background color shown at the left is mauve. Since your star will be placed on a white background, the background color must be changed to white.
Click on the background chip to display the Jasc color dialog. Click on the white color well as indicated at left then click OK.
Open the GIF Export dialog box by going to File > Export > Transparent GIF. If you plan to make a lot of GIFs, it's very handy to install a shortcut button onto the Toolbar so you can avoid using the menus. This can be done by going to File > Preferences > Customize Toolbar. In the "Available toolbar buttons" window (left window), locate the Export GIF icon, click on it, then click the Add button in the center. You'll see the button appear at the far right of the Toolbar. To move it to another location, click on the icon in the right-hand window of the Customize Toolbar dialog box and use the Move Up and Move Down buttons to change its position. Close the dialog with the Close button.
Getting back the GIF Export dialog...
 |
The original working image is displayed at the top left and a preview of the resulting GIF image is to the right. Underneath the preview, the projected file size of the GIF is shown. If your settings are like mine, the option "None" is selected for "What areas of the image would you like to be transparent?" Because "None" is currently selected, the background color of white appears in the preview window. When you click the radio button beside "Existing image or layer transparency" the white background in the preview window will disappear. Click the OK button. The "Save As" dialog will open allowing you to select the location and file name for the new GIF.
The Last Word
JPEG compression has a way of muddying images. Because Star 2 started out as a JPEG, the final result in this tutorial is not nearly as crisp as the star created in the tutorial "GIF Transparency 1". To compound the problem, every time you save a JPEG image, the quality of the image degrades a little more.
If you are starting with a JPEG image file, I'd recommend that you first save it as a PSP file: File > Save As... and select "Paint Shop Pro Image (*.psp) from the "Save as type" list box. PSP format compresses images without any loss of quality. Edit the PSP file and save as often as you like. Then convert the image to GIF format once you've set the transparency.
You may have wondered how I arrived at a Tolerance setting of 45 for the Magic Wand. It's really a trial-and-error thing. You want to set the tolerance high enough that it will pick up the various background colors without selecting unwanted areas. I usually zoom in on the image after I make a selection so I can see how closely the selection is to the area I want to remain opaque. If it looks like there will be a significant fringe left over, I remove the selection, raise the tolerance value a bit, then try selecting again until I'm satisfied.
| Contents | Services | Portfolio | Tutorials | About |
