PI5 Automatic Transparent GIF

The PhotoImpact 5.0 Image Optimizer creates transparent GIF images automatically! Follow these simple steps and you won't believe how easy it is to get your navigation buttons to blend into a web page background color or texture.

button with shadow

Make a button as you would normally. Here I've used the Path Drawing tool to make a 3D Custom button with the Material Gallery's Metallic, Steel 1 preset applied, plus a small drop shadow.

basic button

Next add text to your button. While the text is active, switch to the Pick tool and Shift-click the button too, so that both are active. Right click and Combine as Single Object.

add text

Now you're ready to save the button. Choose Web, Image Optimizer. You'll see this dialog box. Choose "Selected objects only," and click OK.

Image to Optimize box

When the Image Optimizer dialog box opens, make sure you select GIF.

Now click on the Background tab.

background tab

This is where the magic takes place! By selecting a background image or color for optimal blending, you can avoid those little jaggedy edges that make you want to pull your hair out. If your button will go on a web page with a textured background, choose "User selected image" and browse your hard drive for the texture you're using. Click OK and save the button as you would normally.

When you insert the button into a web page document with the selected background texture, it should blend in seamlessly, like this one.

button on web page background

Uh oh, this is the same button placed on a white weg page background. Obviously, once you save a transparent GIF optimized for a specific background texture, you won't be able to use the button on another background or color.

uh oh...wrong background

If you're saving a transparent GIF for use on a web page of a specific color (other than white or black), make sure you choose "User selected color" from the Background tab options. Then click in the Color box to select a color. In the example below, I've selected a blue color to match the color of the target web page.

optimize for blue background

Again, when the button is inserted into a web page document with the same blue background color that you chose for optional blending, the button should blend seamlessly into the page. However, you wouldn't want to use this button on a web page with a different color background.

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



Back to Homepage