• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 16. Optimizing Web Images > Adding transparency dithering to the drop sh...

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.
(Photoshop only) With the 16Start3.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), and then set the following options on the right side of the Save For Web dialog box (Photoshop) or the Optimize palette (ImageReady):

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

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

  • In the Dither pop-up menu for Transparency, select Diffusion.

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

Save For Web dialog box (Photoshop)

Optimize palette (ImageReady)

3.
Click the Matte swatch to open the color picker. Select any color other than white, and click OK. (We selected R=250, G=234, B=212, a neutral beige to set off the blues in the mailbox photograph.)

To see the effect of the matte setting, try zooming in so that you can see individual pixels in the dither—about 400% or even all the way to 1600%, which is the maximum. Notice that the pixels closest to the edge of the mailbox and blue frame area are dark, and that the others become increasing more blended with the matte color as they occur farther from the edge. Then zoom back to 100%.

4.
Do one of the following:

  • (In Photoshop) 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 or the Preview In submenu on the File menu to open the file in a browser.

5.
In the browser, notice how the drop shadow blends into the background matte color. When you finish viewing your document, close the browser or go back to Photoshop or ImageReady.

6.
Click the Save button in the Save For Web dialog box (Photoshop) or choose File > Save Optimized (ImageReady).

7.
In the Save Optimized dialog box, accept the default settings and filename (16Start3.gif) and save the file in your Lessons/Lesson16 folder.

8.
Choose File > Save to save the 16Start3.psd file, or close the file without saving.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint