Making Your Own Background Textures in Photoshop

Whether you need a background texture for a portrait or to give your Web page a bit of personality, Photoshop has all the tools you need. While Photoshop features dozens of different ways to create these textures, here I show you a quick technique that employs the Noise filter. You’ll see that in Photoshop (like at concerts) noise can sometimes be a very good thing, indeed. In these steps, I show you how to create the texture, make it fade into the background, and fill up a large Web page with a small background image. You don’t need a starter image; you can create this texture from scratch.
1. Choose File-->New and create a new, empty RGB document.
In this exercise, I show you how to create a fairly large background texture (400 x 400 pixels). For Web pages, however, you can use much smaller sizes (typically 128 x 128 pixels) because the background repeats or tiles to fill the screen.
2. Because you need an existing tone in the image to noisify, choose Edit-->Fill to access the Fill dialog box, and then choose from the Use drop-down list. Click OK to apply the fill.
In this case, I’m choosing 50% gray.
3. Choose Filter-->Noise-->Add Noise to access the Add Noise dialog box, where you’ll make some choices:
- Amount: I recommend choosing a significant amount of pixel “dirt,” roughly 60%.
- Distribution: Select the Gaussian option to create an interesting random pattern (rather than a bland, uniform pattern).
- Monochromatic: Selecting this option eliminates random color specks. Your image now looks a bit like one of those “Magic Eye” graphics, except you can squint all you like and probably not see the image of an elephant.
4. To produce a 3-D texture, choose Filter-->Stylize-->Emboss, and then adjust the following settings:
- Angle: An Angle setting of 135 degrees gives the texture the appearance that it’s being illuminated from a light source coming above and to the right of the texture. Using other angles produces slightly different texture looks.
- Height and Amount: A Height setting of 3 pixels and an Amount of 100% creates a moderate 3-D look. Increasing these values offers additional looks, but also can create an intrusive effect for a background that’s supposed to reside in, well, the background.
5. Click OK to apply the texture.
6. To add a little color, choose Image-->Adjustments-->Hue/Saturation, and then adjust these settings:
- Colorize: Be sure to select this check box.
- Hue: Move the Hue slider until you find a color you like.
- Saturation: Use the Saturation slider to create a light pastel version of your chosen hue.
7. Click OK to apply the color.
To enable a Web browser to repeat a background texture over and over, you need to make the edges blend together. Some Photoshop filters produce random patterns that automatically tile. You have to offset others, particularly those you create from your own images, so that the center portions become the edges.
8. Choose Filter-->Other-->Offset, and then enter values for Horizontal and Vertical.
Type in a value that’s half the height or width of your image. With this 400 x 400 pixel background, that value is 200. If you’re making a 128 x 128 pixel background texture, use a value of 64.
9. Select the Wrap Around button to have continuous texture, and then click OK.
10. To tone down your background texture a bit, choose Image-->Adjustments-->Levels, and then move the gray center triangle to the left (approximately threequarters of the way) until the background takes on a less contrasty appearance.
11. To use this background on a Web page, you have to save it as a JPEG image by selecting File-->Save As, and then choosing JPEG from the Format drop-down list.