Support | Learning Center | Web Information

Basic Web Transparency (Page 1 - Page 2 - Page 3)

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 5.0'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...

Fake Transparency
The most standard type of transparency is wanting to have graphical text (usually some sort of header or page title) have the appearance of floating on the page. Believe it or not, the easiest way of achieving this effect is to not use transparency at all! Simple background matching is the most effective way of achieving seamless effects.

At the most basic level, this involves matching the background of your image to the background of the page on a single-color level. In Figure 1, we have an image floating on the white background of the page. The drop shadow gives the illusion of distance from the background, a pleasing visual effect. With simple page colors like black and white, this is simple to achieve—choose your HTML page background to match your photo backdrops.

Figure 1: Simple background matching.
In the case of photographs or other high-color images (anything greater than 256 colors), this method is ideal because it allows you to maintain the quality of your image and use high-color effects like frames and filters. The image below would look very bad in 256 colors!

Figure 2: More perfectly faked transparency!
Tip: Be careful to not compress your JPEG image too much, or the artifacts will show up and ruin the floating effect. Compression levels below 60% will often have this effect, and it's most noticeable on backgrounds other than white and black.

(Page 1 - Page 2 - Page 3)

Back to General Web Info