PI6 QuickTip #22: Creating Transparency Manually

It is nearly always better to save objects independent of the background and to create transparency automatically in the Image Optimizer. But you can create a transparent background manually, if you like to do things the hard way.  :o)

I'll use this button as an example. It is merged with the base image.

button merged with base image

Choose Web, Image Optimizer or hit F4 to open the the Image Optimizer dialog box. Choose whether to save as a GIF or PNG.

Image Optimizer, select "Transparency"

Select (check) "Transparency." Now click on the Mask Options tab. From the Matte dropdown list, select None. Click the Mask down arrow and choose Select color, which displays additional options. Select a Similarity level for the color you'll select to be transparent. Select "Search connected pixels" if you don't want to include similar colors within the button itself. Now click on the "Add to mask" button. 

Mask Options tab

Move your cursor up to the left preview window, where it will turn into an Eyedropper. Click in the white background. Immediately, the white background in both preview windows will show the checkerboard pattern characteristic of a transparent background. Click Save As and save the button.

If you know what color or background image you'll be using with the transparent image, especially if you'll be using a darker color, you can optimize blending with the background easily. However, don't do this if you want the image to be transparent against any color or image!

To optimize blending of the image against a specific color or image file, before saving the image, click on the Matte down arrow and select a color or image file which will be used to fill in around the button. 

select an image file from Matte

Click the Browser preview button to view the button against the selected color or image file. As you can see in the screen shot below, the button blends in perfectly with the background image file (but remember, that this button will probably not look very good against a dark background color or image). In addition, the Browser preview details all the information about the image.

Browser preview

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



Back to Homepage