From Designers File to Web Build File: Solving Special Transparency Problems with Essential Layer and Layer Mask Tricks
- Transparency Blues
- The Obvious Solution (or So It Would Seem)
- The Solution
- Debriefing
Transparency Blues
Photoshop 6 and its Web graphics sidekick, ImageReady 3, both feature a great toolkit for processing images for the Web. Creating final images from a designer's layered file, however, is often not as straightforward as simply slicing, optimizing, and choosing Save for Web. It's pretty typical in many Web shops for the visual designs to be generated by a separate department than the people who are actually charged with building the final HTML pages. In some cases, this can cause production problems when the file gets to the build phase because the designers are not necessarily thinking of how a layered file needs to be set up for translation into individual image slices. If they have created a visual look by using multiple layers, opacity, and blend modes, then the people who are processing the graphics need to know a bit more about Photoshop than just the average Web-related features.
The example and techniques in this article grew out of an actual site that I served as a consultant on for a Web design company. The company had tried the standard, obvious workarounds but was not happy with the results. The solution to the problem was firmly based in advanced layer and layer mask skills that had nothing to do with the "Web features" available in Photoshop.
The Problem
As designed, the images at the top of each page had a faded, blue duotone effect. The section titles overlaying these images were also faded back and slightly transparent. For the build, these images needed to be made into transparent GIFS and matted to the background color of #336699. (See Figure 1.)
Figure 1 This is what the final transparent GIF needed to look like when matted to the background color.
In the final design file, the blue duotone effect had been created by setting the image layer's blend mode to Screen and its opacity to 80%. When combined with the blue background underneath, these settings gave the image its faded blue appearance. Additionally, the text layer was white and set to 50% opacity, causing its color to fade from a light blue where it interacted with the blue background, to more of a pale white tone where it blended with the image. (See Figure 2.)
Figure 2 The settings in the Layers palette that created the blue duotone effect.
The problem with this arrangement is that when the background color was turned off in preparation for exporting the transparent GIF, the entire effect was broken and all traces of the blue duotone look disappeared. (See Figure 3.) Because the text was 50% white, it was barely visible when viewed over the transparent background.
Figure 3 With the background turned off before exporting the transparent GIF, the blue effect disappears.