Herself’s Webtools

Webtools for Webmasters: Scripts, HowTos, Templates, Plugins, Widgets, Tips and Useful Information

Herself’s Webtools header image 1

Backgrounds

February 1st, 2007 · No Comments

Here are some tips on creating backgrounds.

Use colors that are close together. (navy w/ black, tan w/ white) (see color notes ) Your background should be in the background not draw people’s attention away from the text, and other things on your site.

Use bland colors. Bright colors hurt to look at for long times. People won’t stay long if your background is glaring at them.

Watch the size (you get to learn from all my mistakes!) I tested the download times on my pages and learned the background was the largest image! I fixed it but make sure you pay attention to the size. It’s in the back and not the main eye catcher so how good does the detail need to be?

Making backgrounds is easy. I’ve been using the Gimp to do the ones on the TimesToCome site.

  1. First choose an image that isn’t too busy.
  2. Tone down the colors.
    1. In Gimp I choose colors, hue-saturation. Then darken or lighten all the colors by moving the Saturation slider.
  3. Then you have to match seams.
    1. In Gimp choose Filter, Map, make seamless. It is all automated.
    2. By hand
      1. Add 4 layers all of which have clear backgrounds.
      2. Copy the image and put it off center by 1/2 in each layer. (one so the bottom of the image is in the top 1/2, one so the top of the image is in the bottom 1/2 etc.)
      3. Make each layer transparent by about 50%.

View your image tiled in a web page. What looks good small doesn’t always look good when it is tiled over the whole page. The colors often seem much brighter when you tile the image. You may have to go back and tone down the colors a few times.

See also Gimp Basics: Beginning

Tags: backgrounds · gimp · graphics

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.