Digital Design logo
Contents button Services button Portfolio button Tutorials button About button

tutorials

GIF
Transparency

Lesson 1

Lesson 2

Lesson 3

This image is a pretty clean image but let's say you plan to place it on a dark background. Since the original image is on a white background, you'll need to use different techniques to avoid the dreaded white fringe.

original apple image

Save Picture As Download apple.jpg 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.


image window Open up apple.jpg in Paint Shop Pro.


Magic Wand Tool button Click on the Magic Wand Tool button in the Tool Palette. Type a lower-case "o" to call up the Controls 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 Controls box, and any adjustments you make, only apply to the Magic Wand.

Magic Wand settings Adjust the settings under the Tool Controls tab to match the ones in the illustration at the left. Using a higher tolerance value has a negligible effect in this case because there is such contrast between the white background and the lighter pixels along the edge of the apple. If for some reason the entire background isn't selected after you apply the Magic Wand, though, you'll need to raise the tolerance value.

selecting the white background Hold the Magic Wand's cross-hairs over the white background color of apple.jpg. 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.

white background selected Your image should now look like the one at the left. The moving dotted line or "marquee" outlines the background area that you have selected with the Magic Wand.

I'm going to take a little side trip here to show you a way to determine how "bad" the light fringe would be around the apple if I were to apply transparency at this stage. If you want to fast-forward past this part, click here


Invert Selection button Click on the Invert Selection button or, if this button isn't displayed on your toolbar, go to Selections > Invert.

inverting the selection

Notice that the marquee is outlining the apple instead of the background color.

Copy button Click on the Copy button.

New button Click on the New button to open a new image and set the options to match those below. The dimensions aren't critical so long as the image is at least as big as the apple image.

New Image dialog

Paste As New Selection button Click on the Paste As New Selection button or, if this button isn't displayed on your toolbar, go to Edit > Paste > As New Selection.

pasting the apple into a new image

Select None button Click the Select None button to remove the selection from the new image or, if this button isn't displayed on your toolbar, go to Selections > Select None. The marquee will disappear from the new image.

removing the selection

Now you can see what is commonly known as the "jaggies". It's the light fringe around the apple. I wouldn't want to set this apple against a dark background...not yet, anyway. I showed you this so you could see how to test the quality of the edges before going through the whole process of transparency and then finding out there's a problem.

Close your test image without saving the changes. Apple.jpg will once again become the active image. Let's improve it.


If you fast-forwarded, you're in the right place. :-)

Contract Selection dialog Go to Selections > Modify > Contract which will display the "Contract Selection" dialog box. Set the "Number of pixels" value to "1" and click the OK button. This action contracts the size of the selected area.


apple with the selection contracted by 1 pixel It's hard to see a one-pixel difference but if you look closely, you'll see that the marquee is now slightly inside the border of the apple.

close-up of apple's stem One small (?) problem, though. If you zoom in on the stem of the apple at about a magnification of 7:1 like I did, the skinny stem is no longer selected because we contracted the selection by one pixel and the stem is only two pixels wide. Take the Magic Wand tool, set the Tolerance in the Tool Controls to 50 and select a dark section of the stem. If the entire length isn't selected after one click, press down and hold the Shift key and keep clicking on the stem until it is. Zoom back out to normal size.

Feather Selection dialog Go to Selections > Modify > Feather... which will display the "Feather Selection" dialog box. Set the "Number of pixels" value to "1" and click the OK button. This expands the selection back out one pixel but gives it a softer edge so it will blend better.

Invert Selection button Click on the Invert Selection button or, if this button isn't displayed on your toolbar, go to Selections > Invert.

inverting the feather selection

There are several paths you can take at this point. I'm going to suggest picking a color that is similar to the background on which you intend to place your GIF, with one caveat: the color you pick should not already occur within the apple itself. I've picked black for this exercise.

Flood Fill Tool Click the Flood Fill Tool. Then click on the Foreground color square in the Color Palette.

clicking on the foreground color square

Jasc Color dialog The Jasc Color dialog box will open. Click on the color square indicated at left and click the OK button. (I've shown only the upper-left hand portion of the dialog box.)

flood fill with black Click inside the selected white background area three times to flood fill it with black.

Select None button Click the Select None button to remove the selection from apple.jpg or, if this button isn't displayed on your toolbar, go to Selections > Select None. The marquee will disappear from the image.

Decrease Color to 256 button Click on the "Decrease Color to 256" button or go to Colors > Decrease Color Depth > 256 Colors (8 bit)... The "Decrease Color Depth - 256 Colors" dialog box will display. Here are the settings that I usually use for GIFs. Click OK.


Decrease Color Depth dialog

Dropper Tool button Click on the Dropper Tool button in the Tool Palette. Click on the black background with the right mouse button. This sets the Background color in the Color Palette to match the background in your image.

selecting the black background with the Dropper

Set Transparency button 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" and click the OK button.

viewing transparency Go to Colors > View Palette Transparency. Now your image should look something like the one at the left. You'll notice a faint checkerboard pattern has replaced the background color. The checkerboard represents transparent areas in PSP. I strongly recommend that you always check your transparency with the "View Palette Transparency" command to head off unpleasant surprises later on.

save in .gif image format All that's left to do now is save your image. Go to File > Save As... to open the Save As dialog box. In the "Save as type" drop-down list box, click on the down arrow button. Click on the format "CompuServe Graphics Interchange (*.gif)" and then click the Save button.

TIP: To locate the GIF file type faster in the drop-down list, type a "c" after you click the down arrow.


Here are the results:

apple on black apple on red apple on white

Well, the apple on black looks perfect. Surprisingly, the apple looks better on white than on red. At any rate, you can flood fill the feathered background with a color that is similar to the background where it will be placed. To make the apple blend in against any colour, you'd choose a deep red color but you need to be careful that the exact shade of red doesn't appear in the apple itself or it will leave transparent "holes", as illustrated in the image below.

apple against red background that is too close to colors in the apple


The Last Word

  • The apple was a fairly clean image. There was only about a one-pixel wide fringe to clean up. If you're dealing with an image with a wider section of fringe, you would adjust the amount of contraction and feathering accordingly.

Fig. 1 Fig. 2 Fig. 3

Fig. 1

Fig. 2

Fig. 3

1 px feathered
Flood filled once

10 px feathered
Flood filled once

10 px feathered
Flood filled 10 times

  • Shown above are examples of different degrees of feathering and flood filling. Each selection was 50 pixels in diameter to begin with. As you can see by comparing Figures 2 and 3, which were feathered the same amount, the effect of flood filling is cumulative in feathered selections. In other words, the more you flood fill a feathered selection, the wider the spread of color in the feathered area. There is also less blur.
  • Last, but certainly not least, is some time-worn advice: practice makes perfect. Every image is different and it's always a matter of trial and error to achieve the results you want.

Back to the top

Contents Services Portfolio Tutorials About

Valid XHTML 1.0!