Support | Learning Center | Web Information

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

When your image is ready for export, merge the pieces together (right click, MERGE ALL) then send it to SmartSaver Pro. Control + T brings up the transparency tool - click NEW MASK and ALT + CLICK on the predominant color. You should see the majority of the background disappear, but there will be pixels close to the drop shadow that will still be there - these pixels are not quite the background color, but not quite part of the drop shadow either.


Click the above image to
see the enlarged version.

Figure 14: Stage 1 of the transparency masking process

Zoom in to the 3x or 4x level, and while holding down the ALT key, click areas where your dominant color still exists. Be careful to not click on your drop shadow or you'll make it transparent as well. Continue this process until you've clicked on the majority of the dominant color pixels. Once that's done, export the image and observe the results.


Figure 13: Stage 2 of the transparency masking process

The only limitation to this method is that the drop shadow needs to be fairly dark (There can't be a lot of variation.) and the image is heavily tuned for display over a background similar in color to the one chosen. The image below could only really work on a dark purple background. Even a black background would cause a halo effect.


Figure 14: It looks ugly on a white background, but...



Figure 15: ...the final image floats cleanly on our complex background.

Transparency Is King!
Transparency adds a lot of value to the graphics arena, and with tools like PhotoImpact and SmartSaver Pro you can create beautiful transparent effects. It might take a bit of work, but a clean transparent image will make your site look professional and show the world you know what you're doing. And as the next generation of browsers move to accept the PNG format more, we'll be able to generate 24-bit transparent images, giving us even more possibilities for creativity!

(Page 1 - Page 2 - Page 3)

Back to General Web Info