KISS: Keep It Simple ... pg 4: Production Graphics with Wendy Peck at webreference.com

KISS: Keep It Simple ... Creating Background Files 2

You can create background colors that are more predictable than HTML color, or a plain JPG file, but each method has its own problems. Please make sure to read my cautions, and to always test the colors you create on as many monitors as you can.

.Increase Your Odds ... Use Texture
Adding a texture to your JPG background file increases the odds that your color will remain as you intend. The background on this cell has had noise added to the original, non-Web-safe color. The texture does not interfere seriously with text clarity, and it is more likely to remain consistent across monitors. Why? It's called hedging your bets. If you zoom in on the file you created with the texture, you will see many colors forming the effect. Individual colors shift, so unless you are really unlucky, and have every color shift, the ones that do not shift will help to hold some of the original color.

The image shown here is the background image for this cell at 800% magnification.

Combine Web-safe Colors to Trick the Eye
I will admit that I have had little luck with this method for creating background color, mainly because I am so fussy about my text quality. You can create a graphic file that combines one pixel areas of two or more Web-safe colors to trick the eye into seeing a different color.

For a two-color combination, create a document that is 4 px by 4 px. Zoom in as high as the program will allow, and select a pencil tool set to create a 1 px line. Set the first color and paint the top left and lower right pixels. Set the second color and paint the remaining pixels. Your document should look like the sample at the top of the cell at the left. Save as a GIF file, and place as a background.

This cell is filled with the same method, but placing the two colors in rows, rather than staggered as shown here. Although in theory, this is a great method, note how hard the text is to read with either method.

I have deliberately shown you extreme examples above. If you are working with colors that are closer in color, the damaging effect on the text is reduced. This cell is filled with a light yellow, created by filling three of the pixels in the 2 px by 2 px document with white, and the forth cell with yellow, as shown here. There is a slight effect on the text, but for a menu area, or short passages, it is quite acceptable. The cell between the two yellow samples here is filled with the original, Web-safe color used in the compiled color files.

Of course, you can always use plain, old HTML, Web-safe color to create separate areas on a page. Be careful, however, especially when creating menu areas, to make sure that all the states of a link have colors that show well on the color. I have a bad habit of setting a visited color to the same as a background I have used in a menu area. Using a color to mark where your visitor has been is a courtesy. Making a link invisible because they have already been there breaks every rule of usability in the book.

Disclaimer: The cells filled with color on this page have no borders, and the text runs right to the edge of the color. I do not recommend this as a design technique. This page does not use tables with padding, however, and I did not want to add the extra code for nested tables to create the required margins on the samples. On a commercial site, this would not be acceptable.

No matter what method you use to create color areas, you must always be careful to step back from your work to ensure that the right information is most visible on the page. Although menus are important, they are secondary to content, and should not carry more visual weight than the main areas of the page. Menus should sit demurely in the background until the exact second that your visitor wants to move on. Finding the balance between allowing the content to be the star of the page, and yet keeping your menus readily available is the true art in Web design. The better this skill is mastered, the more successful your pages will be.

Carry on for a few tips on creating text menus that look great. You don't have to rely on graphic text to make your pages work. Text menus are wonderful, easy to edit and light for downloading.

Next page

KISS: Keep It Simple ... : Tutorial Index

Why?
Following the Trends
Creating Background Files
Creating Background Files 2
Tricks for Text Menus