Subtle web background textures are extremely popular in current web design. They can be used to give a site depth and and add richness in a way that isn’t too overwhelming. I’ve been really into using these subtle textures in my web designs and I’ve been on the hunt for how to create my own textures from scratch. Today I’m going to share one way to create these patterns for your own web designs.
In this tutorial I’ll show you how to create a repeatable pattern in Photoshop and then use Photoshop’s texturizer to make a unique subtle and repeatable web background (as seen on the left). The texturizer’s great, because it allows you to add texture to an image without altering the image below. If you’ve already got a repeatable texture, you can jump down to section B to get started with the Texturizer!
A. CREATE A REPEATABLE TEXTURE
1. Find a Photo. Start with finding a high-res pattern image. I choose to work with a great fabric texture found here, but you could easily use a different photo or create your own.
2. Convert Texture to Grayscale and Resize. Bring your texture into Photoshop and convert to Grayscale. To do this go to, Image > Mode > Grayscale. Resize your image as necessary. I scaled mine down to create a more subtle look. Go to Image > Image Size to adjust the scale of your pattern.
4. Crop to Remove Pattern Variation. My photo had a little too much variation in the pattern texture (See above). We want to get our pattern to be repeatable, so removing most of the variation will help eliminate noticeable pattern edges. To achieve this, I cropped down the size of my pattern to a smaller area where the tone of the pattern was consistent.
5. Adjust Brightness & Contrast. My original photo texture is much too dark to stay subtle. To lighten your image, go to Image > Adjustments > Brightness & Contrast. I bumped up the brightness to 103 and lowered the contrast to -50 to lighten and soften my texture.
6. Recrop to Straighten the Pattern. Now to make the repeat. First, re-crop your texture as necessary to make sure your pattern is straight and aligned with the edges of the frame.
7. Offset your Texture. Go to Filter > Other > Offset. I set my offset to Horizontal +108 and Vertical -103 and clicked “wrap around”. This offsets your image, enabling you to make a repeated pattern. You’ll probably notice odd lines in the middle of your pattern, dividing it into four quadrants. Use the clone stamp tool remove the seams. I’d recommend zooming in to get the best results.
8. Voila! You now have a repeatable pattern! Save your pattern as a .psd file.
B. CREATE A BACKGROUND USING PHOTOSHOP’S TEXTURIZER
1. Open a new document. I started with 500px x 500px rgb at 72 dpi with a transparent background. Use a size that works best for your project.
2. Fill the Layer with a Color. Rename your layer “Background” in your layers pallet and fill it with a color. I used f2e5c6.
3. Create a Black Layer. Create a second layer on top of the background. Fill the layer with black. I’ve named the layer “Black” to keep things organized.
4. Open the Texturizer. Go to Filter > Texture > Texturizer. The texturizer dialog box will open. On the fly out menu choose “Load Texture” and then select your saved pattern .psd file that we made earlier.
5. Adjust the Scaling and Relief of Your Texture. I set my scale to 75% and Relief to 35%. Under “light” choose “Top Left” and click OK.
6. Change Your Blending Mode. On your black layer, change your blending mode to screen. This creates a light version of your pattern over the top of your colored background. This pattern is looking a little flat, so we are going to create a second layer for depth.
7. Create a White Layer. Create a third layer named “white” and fill the layer with white.
8. Open the Texturizer. Go back into the texturizer and with your loaded texture, adjust the Relief to a lower percent. I sent mine to 12% to reduce the contrast.
9. Change Your Blending Mode. On your white layer, set the blending mode to multiply. This overlays a dark version of your texture over your background. If you find you have too much contrast, you can adjust the opacity of the layer. I set mine to 30% to reduce the contrast.
10. You’re done and ready to incorporate this into your designs! Get different looks by experimenting with background color and blending modes. Have fun!