| Support | Learning Center | Web Information Advanced Web Transparency (Page 1 - Page 2 - Page 3) In the previous tutorial on transparency, I looked at the basics of web transparency, how to achieve it using color matching (a.k.a "fake transparency") and choosing the right background before an export. In this tutorial, we're going to look at background tuning and the ultimate transparency challenge: an image with a drop shadow over a complex, textured background. 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. Let's get started! Background Tuning Let's say you have a logo you want on a half-dozen different pages, each with a different colored background on each one. Or you want to make a button/logo for display on another site but only want to have one version. What's a graphic designer to do? Making a custom graphics for every page would be very time consuming, so is there a better way? Sort of. In the examples below, a simple red circle was generated with three different backgrounds before making it transparent - white, black, and a light gray. The goal was to see how successful we could be at picking a single color background for our image and applying it to different colored HTML backgrounds.
The results show us that while a light gray image background will be the most flexible, it won't cover everything. If you want to create graphics that are flexible enough to be applied to 80% of the possible background colors out there, create three versions - white tuned, black tuned, and gray tuned. The results will rarely be as good as a custom-tuned background, but it's a lot less work than generating dozens of custom images and will work in most cases.
|
