Adding transparency dithering to the drop shadow

Learn Photo Editing

Learn Photo Editing

Get Instant Access

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.

Was this article helpful?

+1 0
Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment