Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Solution
This section details the steps that I used to get around the problem of multiple layers, blend modes, and opacity settings using a little known layer-merging technique and some basic layer-masking skills. The example image I am using is not the same as in the actual Web site, but it's a very close approximation of what the actual file looked like.
First, I made a new empty layer above all the layers that were used in creating the overall look of the particular slice—in this case, the Type layer for the word Destinations, the color bars, and the black-and-white wharf image. I did this by Option-clicking (Mac) or Alt-clicking (PC) the new layer icon at the bottom of the layers palette. Adding the Alt or Option key simply allows you to give the layer a name as you create it. I called mine 4-transp-gif.
Next, I turned off all the layers except for those that I wanted to merge. Keep in mind that I was doing this to an original design file in which there were nine different images and their companion type layers for various subsections of the Web site. Thus, it was important to have only the layers I was dealing with visible. On the example file I'm using for this article, I have only a few layers combining to create a single image composite, so the view of the layers palette is not as confusing.
I went to the Layers Palette menu and, holding down the Option key (Mac) or the Alt key (PC), I chose Merge Visible. (See Figure 5.) This created a new merged layer from the cumulative effect of the screened image layer, the type layer, and the blue background layer. When you try this yourself, be sure to hold down the Option/Alt key until you see the new layer thumbnail appear. If you let go of it at the same time that you release the mouse button, it will merge all the visible layers without creating the new, separate merged layer.
Figure 5 Merging the layers into a new, separate layer.
So far, so good. The next obstacle to get around is that now the blue background for the transparent GIF cannot be turned off because we have merged the blue color into the new layer. The solution for this is to use the existing wharf image layer mask and move it over to the new merged layer to control which parts of that layer are visible.
-
I made the wharf image layer active in the layers palette and, from the main menu, chose Select, Load Selection. From the Load Selection dialog box, I used the drop-down channel menu to choose the wharf mask. Next, I made the Type layer active and did the same thing (Select, Load Selection); this time, though, I activated the radio button Add to Selection. This means that the selection of the type was added to the existing selection of the wharf mask. (See Figure 6.)
Figure 6 The final selection of the type layer transparency combined with the wharf layer mask selection.
A great shortcut for loading selections is to Control-click (PC) or Command-click (Mac) the item that you want to load as a selection. In this case, it would be the wharf layer mask. For the Destination type layer, add the Shift key to the Control/Command key to add to the existing selection.
-
Now, with a selection active of the type layer and the wharf layer mask combined, I made sure that the new merged layer was active. From the main menu, I chose Layer, Add Layer Mask, Reveal Selection. The shortcut for this is to click the mask icon at the bottom of the layer palette. (See Figure 7.)
Figure 7 Using the shortcut at the bottom of the layers palette to add a layer mask.
This created a layer mask based on the selection that was active when I created the mask. The mask hides the layer information wherever it is black in the mask and reveals the layer wherever it is white. Areas of transitional gray show the layer only partially. To fully judge the effectiveness of the mask, I turned off the other layers. (See Figure 8.)
Figure 8 The initial layer mask is working well but needs some fine-tuning.
-
The transparency effect was working great, but I still needed to adjust the mask a bit because the original wharf layer mask didn't extend as far left as I needed it to. This resulted in a large chunk of the blue color still showing in the merged layer. I drew a rectangular selection around the remaining blue area and then made the type layer below active. From the main menu, I chose Select, Load Selection, selected the type transparency from the channel menu, and then checked the button for Subtract from Selection. (See Figure 9.)
Figure 9 Using the Subtract from Selection command to subtract the type area from the rectangular selection)
This made sure that I was subtracting the outline of the type from my rectangular selection. Then, making sure that the merged layer mask (not the layer itself) was the active element, I filled the selected area with black to modify the mask. (See Figure 10.)
Figure 10 Filling the selected areas with black in the layer mask.
Now the mask was working perfectly for the transparent GIF to be created.
Figure 11 The final transparent effect created by the layer mask.
-
The last step was to carefully double-check the accuracy of my image slices and then choose Save for Web from the File menu. I selected GIF as my file format, made sure that the Transparency option was selected, specified the correct matting color (#336699), set the other settings, and exported the file. I ended up using the Noise Dither style because that seemed the make the transitions in the gradient a bit smoother. (See Figure 12.)
Figure 12 The view from Photoshop's Save for Web dialog.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
The final result worked beautifully (see Figure 13). Now all I had to do was repeat the same procedure for the remaining eight image composites that made up the other page designs!
){kind=link}
Figure 13 The final transparent GIF viewed in a browser.