MrQwest

Adding some texture to your site

29 January 10

There’s no denying that texture’s have become quite the trend in web design over the last couple of years, even more so over the last 12 months. You may have noticed that I’ve added some subtle textures here at mrqwest.co.uk – and I’m now going to show you how to create a dynamic transparent subtle texture in photoshop & then add it to your own CSS.

Open Photoshop

This one’s pretty self explanatory. Open Photoshop (I’m using CS2) and create a new image (CTRL+N), 100px wide & 100px tall. It doesn’t matter about the background colour, we’re going to turn that off later.

Next create a new layer (Shift + CTRL + N) and then fill this with white (Shift + F5).

You should now have 2 layers. 1 is your background colour & 1 is the new layer. Rename the new layer texture.

Now click on your texture layer. We’re going to add a noise filter to this. Go to Filter > Noise > Add Noise… in Photoshop. Whack up the intensity. Select Uniform & Monochromatic & hit enter. This should produce an effect like snow on your TV when you’ve not got an aerial.

Go back to your layer palette and reduce the opacity of the snow to about 2%. This will make it veeery subtle. Just how we like it!

Now you’ll want to turn off your background layer. This should make your texture transparent, but don’t worry. It’ll show through.

Save your file for web (Alt + Shift + CTRL + S) and select PNG-24 as the preset & save it on your computer.

Upload your new .png file to your server and then open your CSS file.

Edit Your CSS

Next you’ll want to add the folllowing code to the element of your CSS where you want your texture to appear. It might be your background or it might be a content column etc etc.

background-image:url(#);

Change the # for the URL of your .png image. Remember to add a background-color declaration too as your element will still need a background colour to show through behind the transparant texture.

There you go! Give it a whirl & see how you get on! Let me know in the comments!

Caveat

Just a caveat; remember, this is for a subtle texture. You can increase the opacity percentage from 2% upwards (obviously), but the higher you go, the less subtle the texture will be. The less subtle your texture, the more it will detract from your content.

As an example, here’s 2 samples to illustrate. The sample on the left has a texture with an opacity at 3%, the sample on the right is with an opacity of 30%. As you can see, it’s really difficult to read the text on the right.

Personally, I wouldn’t go above 4-5%.

Do you have any tips or tricks for subtle textures on the web? Let me know in the comments!