A Complete Guide to Web Design

310 Chapter 17 – Designing Graphics with the Web Palette

Survey of Web Graphics Tools

Web Design in a Nutshell, eMatter Edition

image. Specific techniques for reducing the number of colors while maintaining

web-safe colors are discussed in the section “Survey of Web Graphics Tools.”

Shifting to the Nearest Web-Safe Color

As an alternative to dithering, you may want to try shifting certain colors in your

image to their nearest web-safe equivalents. This is especially useful for images

that contain combinations of photographic and flat color areas—you can shift the

flat color to a color in the Web Palette and let the rest continue to dither.

The new web graphics tools provide many “web-snap” functions that give you

more control over the quality of your image on 8-bit displays.

Survey of Web Graphics Tools

Each of the tools in this section (with the exception of the WebScrubber plug-in

filter) are multifaceted programs with lots of nifty features. The following descrip-

tions focus on how each tool handles the Web Palette. By no means are they

intended as reviews of each tool’s full capabilities.

Adobe Photoshop (4.0 and 5.0)

Adobe Photoshop has grown to be the de facto standard for creating web

graphics. Although all the basic functionality for creating web-safe GIF and PNG

files is included, it wasn’t until plug-in utilities and full-scale tools created specifi-

cally for web graphics arrived that it became obvious how limited Photoshop is for

creating web-appropriate graphics.

To save a graphic with the Web palette, simply select ImageÝModeÝIndexed

Color and flatten the layers. Select Web from the menu of palette choices. At this

point, you can decide whether you want the image to dither (Diffusion) or not

(None). When you are finished, you can either Save As or Export to GIF format.

Reducing color depth

When you choose the Web Palette, the Color Table is filled with 216 colors,

regardless of whether they are used in the image. Unfortunately, there is no way

to reduce color depth in Photoshop once a specific palette has been applied. The

only way to reduce the number of web colors involves three steps:

1. Convert to Indexed Color using the Web Palette option.


2. Revert back to RGB color mode by selecting ImageÝ ModeÝ RGB.


3. Immediately change the image back to Indexed Color, this time selecting
   Exact from the Palette options. The image will be saved with only the colors
   that actually appear in the image.

Caution: Photoshop 4.0 shifts colors in adaptive palettes

When Photoshop 4.0 converts images to Indexed Color using an Adaptive Palette,

a phenomenon occurs that slightly shifts the RGB values for colors. So, even

though you’ve filled the background of your graphic with a web-safe blue with the