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

Chapter 4. Creating Web Images > Using (Mostly) Browser Safe Colors

Using (Mostly) Browser Safe Colors

When browsers on an 8-bit monitor encounter images on a page with more than 216 colors, they automatically use a special set of colors called the browser safe palette to approximate the rest. The results are often less than stellar. On the other hand, if you limit yourself to 216 colors, it's hard to create soft, anti-aliased edges—which are crucial for text. A compromise is in order: browser safe colors for big areas, other colors for edges.

In order to pick browser safe colors for large areas, you'll have to load them into your Swatches palette.

To load the browser safe palette:

1.
Locate the Web Safe Colors palette in the Photoshop 5 folder.

Or, if you have an earlier version of Photoshop, download the browser safe palette from my Web site (see page 20).

2.
Choose Window > Show Swatches to display the Swatches palette (Figure 4.20). The Swatches palette appears (Figure 4.21).

Figure 4.20. Choose Window > Show Swatches to display the Swatches palette on the screen.


Figure 4.21. This is the default Swatches palette. It's full of unsafe colors.


3.
Choose Replace Swatches in the Swatches palette menu (Figure 4.22).

Figure 4.22. Choose Replace Swatches from the submenu that comes off of that little arrow at the top-right corner of the Swatches palette.


4.
In the dialog box that appears, select the palette you located or downloaded in step 1 and click Open (Figure 4.23). The browser safe colors appear in the Swatches palette (Figure 4.24).

Figure 4.23. Choose a browser safe palette and click Open. In Photoshop 5 you'll find the Web Safe Colors palette in the Color Palettes folder, in the Goodies folder, in the Adobe Photoshop 5 folder. If you have an earlier version of Photoshop, you can download the Browser Safe Palette from this book's Web site—see page 20.


Figure 4.24. The full set of 216 browser safe colors is displayed in the Swatches palette. You can choose any of these for the large areas of your Web images.


Tip

Choose Load Swatches in step 3 above if you prefer to add the browser safe colors without eliminating the existing colors in your palette.


Although the example I show here is about text, you can use this technique to create any Web image. It'll look as good as possible on 8-bit monitors because most of the color is browser safe. And it'll look great on 24-bit monitors because the edges are smooth and anti-aliased.

To use (mostly) browser safe colors to create text:

1.
Load the browser safe palette as described on the preceding page.

2.
Create a new document in RGB mode.

3.
If desired, choose a background color from the Swatches palette and fill the background with it (Figure 4.25).

Figure 4.25. Choose the background color from the browser safe palette and fill the background with it.


4.
Choose a foreground color from the Swatches palette (Figure 4.26).

Figure 4.26. Choose a foreground color for the text from the browser safe palette.


5.
Choose the type tool and click in the image where you wish to create the text. The Type Tool box appears.

6.
Type the desired text and check the Anti-Aliased option (Figure 4.27).

Figure 4.27. Choose the font, size, and other characteristics, type the desired text, and make sure you check the Anti-Aliased option.


7.
Click OK. The text appears in the image. Note that the body of the text (and of the background) is Web safe, while the colors used to create the smooth, anti-aliased edges are probably not (Figure 4.28).

Figure 4.28. Even though the edges are anti-aliased (and thus not browser safe) the text does not dither. It'd be perfect for a header if I cropped it a little better and wrote something useful.


8.
Export the image to GIF as described on page 64.

Tip

Really want to stick to Web safe colors? Don't use any anti-aliased tools, like Text, Selection, Feathering, etc.


Tip

Use this technique to create professional looking headlines with unusual fonts.


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