LWD logoLori's Web DesignLWD logo

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




Other Photoshop Tutorials

Gradient Backgrounds

gradient background icon

Embossed Images

embossed petunia

Feathered Edges

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

teal texture plain
choosing background color with Photoshop's background pallete 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.

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.



teal texture with noise
photoshop's add noise 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.




teal texture with noise and softenedTeal Textured Background
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.



These two backgrounds were made with the same settings as above but with different colors (border included):

yellow background texture
Pale Yellow Textured Background
Lilac background texture
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.


Google


See other texture ideas on the Textures and Backgrounds page.


Lori Eldridge
Copyright © 12-15-2005 - updated 9-12-14
All Rights Reserved.




Twitter     Google+     Facebook     linked in