PI5 Three Ways to Create Transparency


PhotoImpact offers three ways to make transparent backgrounds for GIF images: (1) from the Image Optimizer's Mask Options tab,  (2) by saving only selected objects (creates transparency automatically), and (3) by creating a grayscale mask.

transparent background

This tutorial demonstrates all 3 techniques and compares them to one another.  

Before we get started, you might want to make a practice folder on your hard drive to which you'll save your buttons and a web document so you can see how the buttons look on an HTML page.

basic buttonI'll be using the button shown at left in this exercise. If you want to, you can download this sample button, or use one of your own.

The button will be placed on this background tile that I made with the Seamless Tile Maker and the Whirlpool effect. Right click and save it to your practice folder if you want to use it. I've deliberately chosen a dark background tile because dark backgrounds is where transparency problems usually show up.

background tile

Transparency from the Mask Options Tab: Choose Web, Image Optimizer. When the Image to Optimize dialog box opens, choose the first option, "Base image with objects merged." Click OK  to open the Image Optimizer dialog box and select GIF. Click on the Mask Options tab and select "Pick color." You'll have to select a Similarity value. Higher values select a wider range of similar colors, relative to the pixel you click on in the background. Since we want everything that isn't part of the button to be transparent, we want a fairly high Similarity value. Similarity values can be as high as 255, but if you chose 255, the entire button would disappear when you selected the background. To pick an acceptable middle ground, enter a value of 99 for Similarity.

select Similarity value

Now it's time to click in the background to make it transparent. Hold down on the Control key. In the left preview window, position your cursor over the white background. The cursor will turn into an Eyedropper. Click in the white background to select it. Notice that the corners look like a few pixels have been "nibbled" off (in fact, this happens even if the Similarity is set to 1).

effect of similarity setting

Click on the Background tab next. Select "User selected image." Browse to and select the dark background tile you wish to use. 

select a background tile for matching

In the preview windows, you'll see the tile you've just selected replace the white background. Notice, however, that you can see white around the bottom edge of the button (see arrows).

arrows show white around edge of button

Name this button1.gif and save it to your practice folder. Now we'll save the button a different way. 

Automatic Transparency: Choose Web, Image Optimizer. When the Image to Optimize dialog box opens, choose the last option, "Selected objects only." Click OK to open the Image Optimizer dialog box and select GIF. Click on the Mask Options tab and note that the only option available now is "Enable background blending using background settings." 

Mask Options tab

Creating transparency automatically makes them unavailable. Click on the Background tab. Just as you did previously, select "User selected image." Browse to and select the dark background tile you wish to use. In the preview windows, you'll see the tile you've just selected replace the white background.

background blending applied

Notice that this time, you don't see any white showing around the button. 

Name this button2.gif and save it to your practice folder. Finally, let's save the button the third way. 

Transparency with a Mask: Return to the button image. For reasons that will become clear in a moment, select the Path Drawing tool. Click in the Attributes toolbar's color box and select black, to change the color of the button to black. From the Mode dropdown list, choose 2D. We're going to create a grayscale mask from this image, and you don't want the highlights in the 3D button to mess up the mask -- remember that lighter areas in a mask are transparent? By changing to a 2D black button, the highlights don't show anymore.

Right click in the image and choose Merge All. Select Format, Data Type, (be sure that "Create a new image" is checked), and choose Grayscale. A new grayscale version of the button will open in the work space. 

To turn this grayscale image into a mask, right click in it and choose All to select the entire image. Right click again and choose Convert to Object. Open the EasyPalette, My Library. Right click anywhere in the EasyPalette and choose "Store Image As Selection."

store image as selection

With the selection tool, drag the grayscale image onto the EasyPalette. Doing so will open the Add to EasyPalette dialog box. Notice that under "Sample name" it says "Selection(Obj-#)" -- if it doesn't identify the Sample name as a selection, go back and make sure you've specified that you want to store this image as a selection. 

save selection to EasyPalette

Give the selection a name ("button mask") and save it to a Tab group in My Library. Click OK to close the dialog box. You should see a thumbnail for the button mask in your EasyPalette.

thumbnail added to EasyPalette

Close out the grayscale image. Return to the black button, right click and Undo 3X, or choose Edit, Undo Before, Change Color. The button should be purple again.  Right click and Merge All.

From the thumbnail in the EasyPalette, drag the grayscale button mask onto the purple button in the work space. It will automatically line itself up with the button.

drag selection onto button

Right click and Invert the selection.

invert selection

Choose Web, Image Optimizer to open its dialog box. Select GIF. Click on the Mask Options tab, and again you'll see that the only option available is "Enable background blending using background settings." 

Click on the Background tab. Just as you did previously, select "User selected image." Browse to and select the dark background tile you wish to use. In the preview windows, you'll see the tile you've just selected replace the white background. Notice that in the preview windows, the amount of space showing around the button is much smaller than it was before.

selection serves as mask

Name this button3.gif and save it to your practice folder. 

Now that you've saved the same button 3 different ways, let's take a look at the results. Open a blank page in your favorite HTML editor and select the dark tile for the web page background. Insert button1.gif, button2.gif and button3.gif into the web page. The results should look something like the screenshot below.

As you can see, creating a transparent background yourself from the Mask Options tab isn't the best way to go. You can see the lighter line of pixels around the bottom of the button and the little "nibbles" taken out of its upper left corner.

The best result for this particular button comes from using PI5's automatic transparency feature. In other words, not merging the button with the base image, choosing Web, Image Optimizer, and saving only the selected object. The button saved with the grayscale mask finishes with a strong second, but some crispness was lost around the edges of the button.

Now that you know how to create transparency in a variety of ways, you'll be able to pick the method that's best for any particular button, banner or other web image. Almost always using the automatic transparency feature or a grayscale mask will yield the best result.

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.

 

 

Contact
Back to Homepage