Creating a dithered transparency
In this section, you’ll create a dithered transparency for a graphic that will serve as the entry point from another Web page to the zoo map. By creating a dither from an opaque drop shadow to transparency, you’ll make it possible to create a smooth transition from the image to any color backdrop on the page without having to redo any work.
You’ll do this in two procedures. First, you’ll apply a drop shadow to the image. Then, you’ll add dithering to the drop shadow so that it blends into a background color for the Web page.
You can do this procedure in Photoshop or do it in ImageReady using the same controls but in slightly different locations.
Adding a drop shadow
The file you’ll be working on is intended to serve as the “entry” button on the portal page to the zoo Web site. You’ll add a drop shadow to the button to make the image appear to float above the background, emphasizing that it is an interactive element of the page.
1. | |
2. | |
3. | In the Layer Style dialog box (Photoshop) or the Drop Shadow palette (ImageReady), enter the following values:
|
4. | (Photoshop only) Click OK to close the Drop Shadow dialog box.
|
5. | Choose File > Save. |
) at the bottom of the palette, and then select 
Adding transparency dithering to the drop shadow
As you’ve already learned, dithering is a method of creating gradations of color with a limited color palette. This makes it useful for Web pages because you can simulate smoother gradations without sacrificing small file size and quick downloads.
1. | With the 14Start3.psd active, choose File > Save for Web to open the Save for Web dialog box. (This step is not necessary in ImageReady.) |
2. | Click the Optimized tab in the Save for Web dialog box (Photoshop) or image window (ImageReady). |
3. | On the right side of the Save for Web dialog box (Photoshop) or in the Optimize palette (ImageReady), set the following options:
|
4. | Click the Matte swatch to open the color picker. Select any color other than white, and click OK. (We selected a light brown: R=220, G=190, B=150.) To see the effect of the matte setting, try zooming in so that you can see individual pixels in the dither—about 400% or higher. Notice that the pixels closest to the edge of the green area are black and that the others become increasing more blended with the matte color as they occur farther from the edge. Then zoom back to 100%.
|
5. | |
6. | In the browser, notice how the drop shadow blends against the background matte color. When you finish viewing your document, close the browser or switch back to Photoshop (or ImageReady).
|
7. | |
8. | In the Save Optimized As dialog box, accept the default settings and filename (14Start3.gif) and save the file in your Lessons/Lesson14 folder. |
9. | Choose File > Save to save the 14Start3.psd file, or close the file without saving. |
) 
