Dr. Missy's Graphic Tutorials - Photoshop

The ability to have an image as a background really appeals to a web designer. There are, however, concerns about contrast and readability when an image is used under text. Remember, the prime reason that folks will go to your web page is to gather information. If they can't read that information they won't stick around!

One way to use an image for a background and still have the text readable is to create a 'stripe' background. That's one where there is a 'stripe' on the left margin, and perhaps another one on the right margin. This webpage has a 'stripe' only on the right side of the page.

This tutorial will show you how you can create a 'stripe' background.

After looking around on the web, I discovered two background images that I like. Both of these images are meant to be repeating tiled backgrounds, but I know that a patterned image is hard to use when text is going to be placed on it.

First, create a new Canvas. You want to make the size wider than the largest monitor. A good rule of thumb is 1600 pixels wide by 75 pixels high.

Open both of the backgrounds that you've found on the web and saved to your disk.

With the Eyedropper Tool select the light color green in the two backgrounds that you've found.

Under Edit fill the background of your new image with that color.

Using the Marquee Tool select all of one of the backgrounds, and copy it to the clipboard.

Paste the background on your new Canvas and using the

Move Tool carefully position it to the far left of the image.

Now copy and paste the next background on your new image. This background should be placed with the left side aligning with the 600 pixel mark on the ruler.

The reason for this is that the typical web surfer has his/her monitor set at a 800x600 screen resolution.

There are however, some folks who still only have a 640x480 screen resolution on their monitor.

By setting the edge of your right side stripe at 600 pixels you will still have some of the stripe showing on the lower resolution monitor.

Carefully continue to paste the background making sure that you align the edges together so that the pattern will match.

When you are finished, Flatten your image in the Layers palette.

Save your new background!