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.

Photoshop CS Mastery

Photoshop CS Mastery

Artists, photographers, graphic artists and designers. In fact anyone needing a top-notch solution for picture management and editing. Set Your Photographic Creativity Free. Master Adobe Photoshop Once and For All - Create Flawless, Dramatic Images Using The Tools The Professionals Choose. Get My Video Tutorials and Retain More Information About Adobe Photoshop.

Get My Free Videos


Post a comment