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.
