Continuing the discussion of images that has been going on for the past two columns of Design Diary, this week we're going to talk about what to do if you don't have any suitable images available with which to decorate your pages.

To see where I'm going with this, look in any print magazine. (I've got copies of DV, Interactivity, and Internet World open on my desk right now.) What I'm seeing are headlines in large type sizes, myriad colors, and funky fonts; section headings in 12- or 14-point bold black sans-serif fonts; and pull-quotes following either the format of the headlines or the section headings, very often in color.

Since most of the pages you're likely to design will have a headline, section headings, or both--and possibly pull-quotes as well--why not add color and "spice" to your pages by creating these titles in Photoshop (or some other drawing or image-editing program), using fonts and colors of your choosing? If you index your colors well, the file sizes will be small (less than 5k).

See What the Wild West is All About at Canyon Ranch!

Figure 1. Boring <H2> headline

Figure 2. The same headline, created in Photoshop using the ChiliPepper font

I recommend two things before we begin the how-to section: First, be sure to use one (or perhaps two or three) of the colors in the Netscape color table so that the greatest number of people can see the colors you've chosen. Don't use all the colors in the table just because you can, and stay away from gradients--they don't reproduce well on 256-color monitors, and they make your file sizes much larger than necessary.

The second piece of advice is similar to the first: Pick one font family (or at most, one font for your headlines and one for your section headings and pull-quotes) and stick with it. Your choice of font should set or reinforce a mood or theme for your page; too many different fonts will just make the page look schizophrenic.

Let's look at a one-page example: a fictional homepage called Carey's Quarters. The plain text version is fine--and will be accessible to everyone--but let's say that Carey wants to add some color and style. We'll start by recreating the "Carey's Quarters on the Web" headline in Photoshop. (Note: I could also use Illustrator or Freehand here and then import my text into Photoshop for conversion to GIF or JPEG format, but keep in mind that the colors will shift. I have yet to discover why, but they do. Finding a suitable match in the Netscape palette could prove maddening.)

First, open a new document in Photoshop. I've set the dimensions of my canvas to 450 x 75 pixels just to give me room to work; I may end up cropping my image to something smaller. You could theoretically go as wide as 640 pixels (remember that if you go wider you'll be keeping anyone with a regular VGA or 13" montior from seeing your entire image). Next, open a copy of the Netscape color table so we can select colors from it. I happen to like purple and green, so I'm going to select a deep purple (#990066) for the headline and a dark green (#006633) for the section headings.

Now it's time to choose a font. I happen to have a pretty large selection of fonts thanks to the Mecklermedia editorial department; you can use one of the standard fonts that comes with your operating system, or you could invest the relatively small amount it costs to buy the two or three Type 1 or TrueType fonts you're likely to use frequently. Using the type tool, click anywhere on your canvas. I've chosen Bellevue for the "Carey's Quarters" text, and I've selected a point size of 40.

Figure 3. Detail of the Type Tool Window in Adobe Photoshop

You'll notice that when you click OK, your text will appear off-center, or perhaps even partly off the canvas. To get the text dead center, select Cut from the Edit Menu, then Paste. From dead center I inched my text up a bit to make room for the "on the Web" text, which I created in green 18 pt. Futura (regular). Now, here's how we'll "index our colors well":

1. With the colortable.gif image in the foreground, select Color Table... from the Mode menu. Select Save... and name this CLUT "browser," "Netscape CLUT," or something else memorable.
2. Now, with the Carey's Quarters image in the foreground, choose Indexed Color... from the Mode menu. Select Custom... in the lower left corner of the dialog box that appears.
3. The Color Table window will appear. Select Load... and load the CLUT you saved in the first step (I called mine "browser") and click OK.
4. With Carey's Quarters still in the foreground, use the Mode menu to go back to RGB mode. Now choose Indexed Color... again. Photoshop should suggest a fixed number of Exact colors. Click OK.

What you've just done is limit the number of colors in your image while ensuring that every one of them is Netscape-safe. The reason there are more than four colors (black, white, purple, and green) in your image is that the type is anti-aliased, or blended slightly with the background to eliminate jagged edges.

Now repeat this procedure for the section headings (Photography, Web site design, and Copywriting--I'm using 14 pt. Futura Bold in green). After you've gone through the steps above to index the colors of "Photography," you can then use a shortcut for "Web site design" and "Copywriting." Select Indexed Color... from the Mode menu and choose Previous in the lower left corner of the dialog box that appears. This will give all three section headings the same CLUT.

I didn't make the backgrounds of my "text images" transparent because their backgrounds and that of the Carey's Quarters page were the same--white. However, if you'd like to be safe, you can make your images background-transparent. Just make sure that you don't make them Interlaced at the same time--you want to be able to read the text line by line as it loads.

Finally, when you write your <IMG> tags for each of these "text images," make sure that you use an ALT extension in case the image doesn't load. For example:

<IMG SRC="0530-careyhead.gif" ALT="Carey's Quarters on the Web">

Now let's look at the results of our efforts. Until next week . . .

Past installments of Design Diary