A Complete Guide to Web Design

Where to Learn More 317

Web Palette

Where to Learn More

Web Design in a Nutshell, eMatter Edition

Creating Background Tiles with Hybrid Colors

When creating a background tile filled with hybrid colors, the key is to set the
width and height to an even number of pixels so the pattern will repeat correctly.
You can make the tile quite small (10 or 12 pixels square) to limit file size.

1. Create a new graphic in Photoshop and fill the whole area with the color
   you’d like your background to be. (Neither ColorSafe nor DitherBox will open
   if the image is completely empty.)


2. Select a color blender filter (ColorSafe or DitherBox) from the Filters menu.
   You can adjust the color using the RGB controls.


3. Fill your image with the new hybrid color.


4. Convert the image to Indexed Color using the Exact Palette and either Save as
   or Export to GIF format.


5. Insert your graphic into the HMTL document by adding thebackground
   attribute identifying your tile to the tag as follows:
   

Where to Learn More

The champion of the Web Palette is undeniably Lynda Weinman, author of many
fine books on web design. Her bookDesigning Web Graphics, Second Edition
(New Riders Publishing) includes samples and instructions for working with the
browser-safe palette. For a more in-depth look at the palette as well as sugges-
tions on hundreds of pleasing combinations that can be created with it, check out
Lynda’s bookColoring Web Graphics (New Riders Publishing).