Web Transparency

Great looking transparency is the holy grail for many web graphic designers. Having images that appear to be floating on the page greatly enhances the overall look of the site, and it's often the first and most noticeable element that differentiates skilled graphic designers from unskilled ones.

The goal of this tutorial is to teach you about transparency, how to optimize your graphics for transparent use, and how to achieve transparency under a variety of circumstances, including a few difficult ones with patterned backgrounds.

The tools used in this tutorial are PhotoImpact and SmartSaver. Most of the SmartSaver functions can also be done in PhotoImpact's Image Optimizer if you don't have SmartSaver Pro—the screens are different, but the concepts are the same.

Transparency - A Definition

Part of the GIF 89a specification includes support for transparency—in essence, part of the GIF file includes data for a color that is not to be drawn when the browser renders the image. The color is still there, but will not be displayed when rendered by a browser.

GIF 89a supports the transparency of one color, but with certain tools like SmartSaver Pro you can select multiple colors for transparency.I don't know the technical details of how SmartSaver Pro accomplishes this, but it works very well! Some older graphic viewers don't support transparency, so when you view graphics with these applications, they look radically different than in your web browser.

Transparency has been a great boon for designers, because it enables us to design with more imagination and style, but it also takes skill to implement. It's a complete mess when not done properly! So take heed fair reader...