|
 |
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.
|
| |
|
|
 This
cell has a background made by combining two Web-safe colors in a GIF
file (yellow and gray as shown in a magnified version of the file
at the top of this paragraph). This color solution is predictable,
but the cost is in the text. Note how this text looks rough.
That is because the background color is changed with every pixel.
The italic text is especially affected,
but any type will
degrade to some extent.
|
|
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.
|
| |
|
|
|
 This
cell is filled with a file created as in the original method above,
and shown here. The two colors used are close in value, so the damaging
effect on text is nearly eliminated.
|
|
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.
|
| |
|
|
|
You must be careful to ensure that all colors used for links are visible
in a menu area with background color. Hold your mouse over this
link for a dramatic example of what can happen. The mouseover color
is the same as the background.
|
|
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
  
|
|
 |
|
