A tutorial on how to Make a Background Texture
in Photoshop with the Noise Feature
| 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 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.
| |||
How to apply the Background tile to your Web pageIf 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. See other texture ideas on the Textures and Backgrounds page or see free background patterns on this page.
Lori Eldridge Lori's Web Design Copyright © 12-15-2005 - updated 1-17-09 All Rights Reserved.
Return to the:  | |||
