A tutorial on how to Make a Background Texture
in Photoshop with the Noise Feature

The following background textures were made in Photoshop 5, however, you should be able to follow this tutorial in any Photoshop program.

1. Pick your background color with the background pallet shown on the right (choose a very light color for dark text or dark color for light text). This sample is using a light teal color for the background.

Make a new image 200x200 pixels square at 72 dpi (you can make it smaller but the browser will have to open that image many more times to fill the page). Fill the new image with the paint bucket tool.

3. Go to Photoshop's Menu and select Filter/Noise/Add Noise, make sure preview is turned on so you can see the changes and adjust it by moving the arrow or typing in the amount until you like the texture. Test it with uniform vs Gausian blur and also monocromatic. This sample was set at 20% noise, uniform and monocromatic. You don't want too much texture or it will make the text hard to read.

4. You may want to add Filter/Blur/Blur to soften the texture a bit so the text will be easier to read. See texture sample on the right.

5. Save the texture image in a name that describes the color.

Teal Textured Background

Following are two more textured backgrounds made in a different color but with the same settings as above. The following textures have a border set at one because the background on this page is so similar.

Pale Yellow Textured Background

Lilac Textured Background

How to apply the Background tile to your Web page

If you only work in HTML put the following in the body tag of your page:

background="Put_Name_Of_Image_Here.jpg"

If you work with CSS put the following in the body portion of your CSS file:

background-image:url(BackgroundImageNameGoesHere.gif);
background-repeat:repeat;

If you've done it correctly this one image will spread horizonally and vertically throughout your page similar to the background on this page.

Lori Eldridge
Lori's Web Design
Copyright © 12-15-2005 - updated 1-05-06
All Rights Reserved.

Return to the Tutorials Page

Other Graphics Tutorials:
Straighten Distorted Photos | Emboss Images | Feathered Edges | How to Design a Gradient Background | How to Design a Textured Background | How to design a Vertical Background | Applying a drop shadow to a tilted object over a colored background | How to Make An Animation

Other Grapics Pages:
Free Graphics for Artists,
Custom Designed Graphics
Logos Designed
and Landscape logos

A tutorial on how to Make a Background Texture in Photoshop with the Noise Feature

How to apply the Background tile to your Web page

A tutorial on how to Make a Background Texture
in Photoshop with the Noise Feature