A Complete Guide to Web Design

312 Chapter 17 – Designing Graphics with the Web Palette

Survey of Web Graphics Tools

Web Design in a Nutshell, eMatter Edition

The Optimized Colors Palette

The real fun comes in with ImageReady’s Optimized Colors Palette, shown in

Figure 17-1. Once a palette has been chosen for the image in the Optimize Palette

(or for images that were opened as Indexed Color), the color table for the image is

displayed in the Optimized Colors Palette. You can use the palette to make

changes to colors in the image. Colors can be added, deleted, locked, or shifted to

their nearest web-safe color.

To select a color in the table, either click on it directly or use the Eye-dropper tool

to select the color from within the optimized image. You can lock the color by

clicking on the Lock icon at the bottom of the palette window. This is useful if you

have a color you want to be certain stays in the palette, even if the image changes

or the number of colors is drastically reduced. Locked colors have a small square

in the bottom right corner of the swatch.

You can also easily shift a color to its nearest web-safe color by clicking on the

cube icon at the bottom of the palette window. This will change all the corre-

sponding pixels in the image to the new web-safe color. Web-safe colors in the

palette are indicated with a small diamond-shaped mark in the center of the

swatch.

The pop-up menu in the top-right corner of the palette offers the ability to undo

color locking and shifting for individual colors or for all the affected colors at

once. It also gives you the ability to sort the colors in the palette according to Hue,

Luminance, and Popularity.

This tool allows you to carefully target portions of the image that you want to use

Web Palette colors (such as flat color areas) while maintaining the integrity of

more subtle areas of the image.

The Web Shift slider

Another Web Palette tool tucked away is the Web Shift slider. You access it in the

pop-up menu in the top-right corner of the Optimize palette (different than the

Optimize Colors palette). When you select Show Options, the palette expands to

include the Web Shift slider (shown in Figure 17-2).

Figure 17-1: Adobe ImageReady’s Optimized Colors Palette and options