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:
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.
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
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. |
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:
Figure 15.5 : Custom graphic rules used both horizontally and vertically.
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:
Figure 15.6 : The development of a panel of bumpy texture.
Figure 15.7 : A range of bumpy textures produced in Photoshop.
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.
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:
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:
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. |
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:
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. |
Now that you have become background savvy, consider
I've tried to make a textured background, but the pixels are too large when displayed on my Web pages. What went wrong? | |
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. | |
The single background graphic tiles instead of displaying the full screen. How can I make sure it's the right size? | |
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. | |
My backgrounds come in too slowly. Is there a way of speeding them up? | |
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. |