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:

• In the Settings pop-up menu, select GIF 128 Dithered.

• Select the Transparency check box, if it is not already selected.

Note: In ImageReady, if you do not see the Transparency check box, open the Optimize palette menu and choose Show Options, or click the double-arrows (^) on the Optimize tab to expand the palette so that you can see all the options.

• In the pop-up menu below the Transparency check box, select Diffusion Transparency Dither.

• In the Amount option, use the pop-up slider or type 55%.

Photoshop Optimize Pop Menu

Save For Web dialog box (Photoshop)

Optimize palette (ImageReady)

Save For Web dialog box (Photoshop)

Optimize palette (ImageReady)

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 At the bottom of the Save For Web dialog box, click the button with the browser icon, or click the arrow to select your browser from the pop-up menu. (In ImageReady, use the Preview In Default Browser button in the toolbox to open the file in a browser.)

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 Click the Save button in the Save for Web dialog box. (In ImageReady, choose File > Save Optimized.)

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.

Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook

Post a comment