How to Make a Background Texture with the Noise Feature in Photoshop

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

1. Pick your background color from Photoshop's background pallet. Choose a very light color for dark text or a dark color for light text. This sample is using a light teal color for the background.

2. 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 in a png format, or some other format that lets you edit the image, as you may need to make it lighter if the text is too hard to read.

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 behind this page.

Other Photoshop Tutorials

Gradient Backgrounds

Embossed Images

Feathered Edges