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

KISS: Keep It Simple ... Creating Background Files

Which route are you going to ask your visitors to follow? The green route is only available when you understand exactly what your site delivers and what your visitors seek.

Once you have made a shift to the challenge of producing highly effective pages, not just pretty ones, half of the battle is won. However, that is not a half that will come instantly.

Know Thy Product and Thy Visitor
When traveling, in order to take the best route it is essential that you know where you are going. If you have time to burn, you do not need specifics, but can wander in the general direction of your destination, getting there eventually. However, if time is a factor, it is essential that you know where you are going, and plot out the most efficient route.

Designing a Web site is no different. If you are not clear about what your site offers, or what your visitor will be seeking, chances are that you will come up with a result that is similar to wandering in the right direction in our travel sample above. However, if you are clear about the goals for the site, and know what options will deliver the best solutions for your visitor, you can plan an efficient trip for them.

For more information about this process, see Menus with Beauty and Brains.

Web-Safe or No?
I still use Web safe colors when I am filling solid areas. I know that many believe:

a) that there are really only a few truly safe colors, not over 200 as generally accepted

b) that there is no reason to stick to Web-safe color now, as most visitors will have monitors that display more than 256 colors.

I discard the first argument, as I refuse to try and design anything with 16 or 22 colors (I have heard both as the only true safe color number). There is only so much you can ask of us artistic souls.

The second argument I would love to accept. However, my experience has been that the results are much more consistent with Web-safe color. I have read proclamations that we have color freedom, but my personal experience has been that purples can turn to blue, tans are often converted to pink, and many other combinations I am just not prepared to risk. Although the Web safe colors can vary slightly from monitor to monitor, they do tend to at least remain the original color.

This cell is filled with a JPG background file, created as described at the right. The color is a lower value of the green shown in the menu bar above, and is not Web-safe. It is very important to test your color on as many monitors as possible, even when using a JPG background color.

Dividing Page Areas
Once you have your direction, you will plan out your areas. (Again, Menus with Beauty and Brains includes a discussion about menu areas.) How will you divide the page visually into the areas required? Background color is an obvious choice. The colors of the Web-safe palette can be pulled into use with the <table>, <td> and <tr> tags to create well-defined areas. (See left for more on Web-safe color.)

Unfortunately, Web-safe color does not always deliver the light colors that we usually need to provide a background for a page area. You can create a graphic file to create a background color to improve your consistency.

Creating a JPG Color Background
In a graphic program, create a small document. Technically, you can use a 1 px by 1 px document. I find that impossible to work with, however, and usually create a 50 px by 50 px document. Once the color is perfected, you can reduce the image size.

Fill the entire document with the desired color, and export to a JPG file. That's it. Use the file as a <table> or <td> background (<tr> image backgrounds do not show on all browsers). Before you go off to celebrate your newfound color freedom, here come the cautions.

This ain't foolproof, folks!!!. A JPG can shift in color just as a GIF or solid color background can. Test, test, test. I have found that a JPG background will not shift as often or as drastically as non-Web-safe color does. Before you fire up your technical knowledge to write and tell me the scientific reasons why I am wrong (or even sometimes right), save your time. Science is wonderful, and necessary. When it comes to color on the Web, all the science in the world will not compensate for what experience and a careful eye can discern.

Be extra careful with very light color, the perfect subtle way to divide a page. If you are going to try to use graphic backgrounds to produce area backgrounds, find someone who can test for you on an LCD monitor. Light colors often disappear completely, and if your page is dependent on that color for a useable layout, you can make a serious error.

The final warning will break a heart or two, guaranteed. The color families that I have had no luck "cheating" with are tan, beige or taupe. No matter what I have done, my taupes can shift to a dead gray, or worse, pink. Beiges can go to pink or yellow. Ditto for tan. If anyone has solved this problem, I am all ears for the solution. I suspect that my experience is common, however, as I have found almost nothing on the Web that uses this valuable neutral color family

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.

There are ways to create color that is more predictable for backgrounds. Carry on to the next page for some hints.

Next page

KISS: Keep It Simple ... : Tutorial Index

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