Chapter 15

Designing Backgrounds That Make Sense

CONTENTS

Every Web page has a background. This isn't exactly an eye-opening statement, but it's a very important realization. But because of this, backgrounds sometimes don't even enter into page planning, other than knowing that #FFFFFF produces a white background. But backgrounds can make or break your Web pages. They are an important factor in the readability of your pages and contribute greatly to visual interest.

This has been mentioned before, but it bears mentioning again. The best backgrounds provide a surface on which to display text, graphics, and other visual data. The background is not usually the vehicle that displays information.

Chapter 14, "Making Image Maps and HTML Frames," discussed making image maps. At the heart of an image map is a graphic. Placing that graphic on an effective background is critical. The image map's graphic should become part of the background.

You can use any raster graphics application to create custom backgrounds. This chapter makes reference to operations in Photoshop. Still, these operations have similar and parallel counterparts in any number of raster products. You should be able to easily translate the suggestions we present here to your favorite raster editor. If you have questions about the terms used in describing the operations, refer to the Glossary, where their functions are described.

We, the authors, are partial to white backgrounds for several reasons. All the problems that involve matching graphics from one source with another are minimized by using a white background. The much-discussed anti-alias halo is much easier to correct when the graphic is placed on a white background.

Backgrounds can be categorized into several areas:

Promoting the Cardinal Rule of Backgrounds

A background should be well planned. Never add a background to an already completed page. We feel that if a background wasn't part of the original design, adding it later probably won't improve either readability or visual appeal.

Many rules have not been established in this book, but let's propose one here, based on the fundamental relationship of black text on white paper. Here it is:

For textual passages of 10 to 14 points (like the text normally used in the body of a publication), the difference between text and background should be around 60 percent. This means that black text will still read well on a background that is 40 percent gray or any color with the same value as 40 percent gray. Increase the text size and you can get away with text and background that are closer to the same value.

Note
The smaller the type, the greater the value difference must be between text and background.

Individual colors alter this rule, however. It's difficult to get some colors bright enough to arrive at the 60 percent difference (deep blues, greens, and browns) and almost impossible to get some colors dark enough to allow white text to contrast with a background (yellow, for instance). Figure 15.1 shows a light (80 percent) tan background with 12-point text with values decreasing from white to black. Where is the text impossible to read?

Figure 15.1 : The effect of text and background value on readability.

Making Panels

Web pages don't have to be dull and boring. With a little effort they can actually look like manufactured products. When you look around, you see all sorts of panels on computers and electronic equipment-even paneling on walls. You might want to display parts of your Web site on something other than paper pages, and panels make an ideal background against which text and graphics can be displayed. Three important factors contribute to a successful panel:

In this task, you are going to create a background panel that has an area in which text will be displayed and an area reserved for a button bar. To create this panel, you would

  1. Create foreground and background shades of the same color. This is important for a realistic lighting effect. Do this by starting with a base color and pushing the shade toward black and the highlight toward white.
  2. Decide on the direction of light. This must be consistent with the other lighting effects on the page. The last thing you want is the dreaded moving light source.
  3. Select the shape of your panel. In this case, you'll want the panel to fill a default 480¥320-pixel area. Diagonal blend across the panel.
  4. Create a highlight at the same angle as the light by making a selection, feathering it, and adjusting its brightness.
  5. Make a rectangular selection for the text display area. Lighten the highlight color. Stroke this selection with 2 pixels and anti-alias on. This is your highlight joint edge.
  6. Using the line tool and the original dark blend color, create shadow joint lines above and on the right of the highlights. Again, use 2-point lines with anti-alias on.
  7. Repeat for the button bar joint lines. The completed panel with the button bar in place and a blank screen is shown in Figure 15.2.

Figure 15.2 : The completed background panel with the button bar in place and text display area.

Tip
If you plan ahead, you can reduce the size and download times of your background by simply making joint lines on a transparent background. Select a background color totally different from the joint highlights or shadows. Use the Graphic Converter utility on the CD-ROM that accompanies this book to turn the background color transparent.

Making Rules

The rules available to you with the <HR> and <HR NOSHADE> tags won't satisfy the creative needs of many of you out there. Therefore, it seems the answer is obvious: Make your own rules.

You are not limited simply to horizontal rules. In this task, you'll create custom rules in both the horizontal and vertical positions and use the <TABLE> structure to divide a page visually with these elements. Figure 15.3 shows the rule we have grabbed from our clip art library, ready to colorize. The gallery in Figure 15.4 displays some possibilities for graphic rules.

Figure 15.3 : The black and white rule art ready to be colorized.

Figure 15.4 : A gallery of graphic rules.

To turn this graphic into a rule, follow these steps:

  1. Bring your rule art into a raster editor and crop to the width you desire.
  2. Select elements in the art, and use Edit | Fill and lighten or darken to change their color. Add a drop shadow if you think it will be effective.
  3. Repeat this until you're finished. Avoid white in your rule because you are going to make the background transparent.
  4. Figure 15.5 shows the new rule in place above and below a table that uses another rule to vertically divide two columns.

Figure 15.5 : Custom graphic rules used both horizontally and vertically.

Making Bumpy Textures

Your world isn't smooth, and neither should be all your pages. Bumpy textured backgrounds are appropriate for splash pages and for selected areas of your pages. The texture shouldn't be so coarse as to diminish the readability of any text displayed on top of it.

Tip
The bumpy texture technique can produce results ranging from smooth sand to rough troweled plaster. By experimenting with noise level, blur, contrast, and emboss height and amount, highly different results can be achieved.

Several products are available specifically for making textures, including Kai's Power Tools and Specular's TextureScape. With a little effort, raster programs such as Photoshop, Photopaint, and Fractal Painter can achieve much the same results-with greater satisfaction and savings of hundreds of dollars. To make a basic stucco texture, follow these steps:

  1. Create a strong black and white sunbeam background (see Figure 15.2). Make this with strong contrast as shown in the first panel of Figure 15.6.
  2. Select the area to be textured. Choose Filter | Noise | Mono | Gaussian | 95 to add high contrast black speckles.
  3. Choose Image | Adjust | Contrast | +90 to make the edges of the texture bumps more pronounced.
  4. Choose Filter | Blur | Blur More to smooth out and flatten the noise.
  5. Choose Filter | Emboss | Height 3 | Amount 150% to interpret the grayscale information into a bump map.
  6. Add color blend with light opacity to colorize the texture.

Figure 15.6 : The development of a panel of bumpy texture.

Figure 15.7 : A range of bumpy textures produced in Photoshop.

Making Wood Grain

Wood grain gives a natural, warm-textured background and is best used as a contrast with text in another material such as metal or shiny plastic. Because wood grain has a wide range of colors, use the Adjust | Brightness technique for making shadows. Follow the examples in Figure 15.8 from top to bottom, left to right. To make a weathered textured wood, follow these steps:

Figure 15.8 : The development of background wood grain.

  1. Select a small vertical panel on one side of your canvas.
  2. Fill this with color noise, value 215.
  3. While the panel is selected, choose Image | Effects | Scale and stretch the panel across the canvas.
  4. Blur the canvas.
  5. Select All. Choose Distort | Wave | Generators 7 | H:100% V:50%, wrap around selected, with the sine option.
  6. Lasso select for knots. Feather 20 pixels. Repeat wave filter.
  7. Cut out what you want. Clear the background. Paste and enlarge as necessary.
  8. Increase contrast 40 percent. Choose Filter | Emboss | Height 3 | Amount 100% | Angle 135°.
  9. Pick highlight and shade colors of the wood. Blend across the wood grain with approximately 50 percent opacity.
  10. Figure 15.8 shows these steps and a final panel with joint lines and highlight and shade edges.

Making Metal

You saw metal created in several examples in Chapter 12. This task leads you step-by-step through the process that can result in a metal texture that would make a pizza oven proud. To make realistic-looking metal, follow these steps:

  1. Build a high-contrast sunbeam in gray.
  2. Add uniform color noise to a level that keeps the highlight visible. Try a value of 80 to start with. The color noise introduces an element of prism in the image as small brush marks in the metal surface refract light into color components.
  3. Increase contrast + 20 percent.
  4. Motion blur at the same angle as the sunbeam.
  5. Gradient fill a light blush of color (blue or magenta) to give it some color.
  6. Copy this texture to the clipboard. Select an area and choose Edit | Paste Into. Figure 15.9 shows the finished product with metal pasted inside letters.

Figure 15.9 : Developing a metal texture. The texture is used to produce the effect of brushed metal text.

Tiling a Graphic

When is a tile not a tile? A background can be a single image, or will be tiled (repeated) if its dimensions are less than that of the browser's open window. In this task, you will create a background image over which HTML text can be displayed using the <TABLE> structure. Think of this as a full-page tile. This allows you to use a common background and to vary images displayed on top. This is particularly effective for changing product specials, figures, names, or data. To create a full-page tile, follow these steps:

  1. Develop a plan for a graphic that will be stable under changing information. In the example in Figure 15.10, the background image is a cartoon worker holding a display card. The information on the card might change daily.
  2. Create your graphic with a hexadecimal background color in mind. In our case, we've picked #00FFFF, a medium aqua (R=0, G=255, B=255). We will match this background color in our raster editor so that anti-alias haloing is minimized.
  3. Specify this color in your <BODY BGCOLOR> tag.
  4. Using any utility that produces transparent Graphical Interchange Format (GIF) files, turn your background aqua transparent. If you use the same aqua as the solid color, your tile will appear out of the background with the correct anti-alias.

    Figure 15.10: A lightweight (small file size) background with table graphics and text overlaid.

    Tip
    Turning the background transparent has the added benefit of reducing the number of pixels in the file. The background graphic in Figure 15.10 was reduced from 33KB to 17KB when the aqua pixels were made transparent.


  5. Create a table in HTML that places cells in the correct locations on top of your background. You want the text inside the cells to appear on top of the card. This may take anywhere from a little to a lot of experimentation.
  6. If successful, you will be able to easily change the information without changing your background.

Making a Montage Graphic

A montage is an image made from several other images. On Web pages, montages are used as the underlying graphics for image maps. If you're designing Web pages, you should know how to make a montage. To give yourself the greatest flexibility, create the montage in 24-bit RGB color. To create a montage graphic, follow these steps:

  1. Assemble the components of the montage. You may be able to use images from PhotoCD, digital photographs, or frame captures from video.
  2. Assign each component to a separate layer in your graphic application program.
  3. Arrange components in position while viewing all the layers.
  4. Lasso select a component. Feather the selection 10-20 pixels at 72 dpi.
  5. Cut the selection and remove the extraneous pixels. Paste the feathered selection back into its original position. It will have a soft edge based on the feather distance.
  6. Repeat for all the components. Add text as shown in the final example in Figure 15.12.
  7. As a final step, merge all layers and save in RGB, Joint Picture Experts Group (JPEG) format. If you need, this image can be sampled down to 8 bits and GIF format.
  8. Match the hexadecimal background of your montage with the HTML background. Use the montage as the base graphic for an image map or as a background over which table graphics are displayed.

Figure 15.11: The PhotoCD resources to be used for a montage (Expert Software).

Figure 15.12: The completed background panel with overlaid text in place.

Tip
By loading simple transparent GIFs into cells of a table, you can <A HREF> them to other pages and have the montage act just like an image map without dealing with client- or server-side mapping coordinate resources.

Next Steps

Now that you have become background savvy, consider

Q&A

Q:
I've tried to make a textured background, but the pixels are too large when displayed on my Web pages. What went wrong?
A:
Make sure that you have set up the background file at 72 dpi so that each pixel on your texture is mapped to a screen pixel.
Q:
The single background graphic tiles instead of displaying the full screen. How can I make sure it's the right size?
A:
What is your target browser and screen dimensions? Determine this and measure the open screen area (usually around 400¥300 pixels). Set up your background graphic with the same size canvas.
Q:
My backgrounds come in too slowly. Is there a way of speeding them up?
A:
Are your backgrounds JPEG graphic files? Do you need JPEG or can you produce well-dithered GIF graphics? The GIF graphic will load faster. Consider an interlaced GIF (see Chapter 16). Also, consider matching your hexadecimal background color with the canvas of the graphic. That way you can get by with a much physically smaller image, resulting in shorter download times.