How do I get the subtle texture effect popular in web design right now?

March 10, 2013 2:36 PM

I have noticed that a subtle texture effect is in fashion in web design right now. I'd like to know how to reproduce this for my own web projects, but I'm not having any luck at all with google.

Examples of what I'm talking about include the background of the Firefox start page and the websites listed below.

Merlin Mann's site - in the background
Smashing Magazine - top and right panel
5 by 5 - background

Google search results are giving me information and resources on more pronounced, even grungy textures which is not what I want.

How do I get or make these textures?

posted by jeoc to computers & internet (7 answers total)

The term you want is "noise" and there are some good examples in Subtle Patterns' "noise" tag.
posted by bcwinters at 2:40 PM on March 10

And here are some Photoshop layer styles on Bjango.com that might be helpful.
posted by bcwinters at 2:42 PM on March 10 [1 favorite]

For maximum flexibility, create a translucent PNG filled with noise. Set that as your background-image. Choose and set a background-color for it to go on top of. Done!
posted by SemiSophos at 3:42 PM on March 10 [2 favorites]

you might also search for 'paper' textures, and might even try looking in the 'templates' section of various programs for them...IIRC word processing programs can usually be counted on for a few...
posted by sexyrobot at 6:43 PM on March 10

I am no expert, but those textures remind me of the early stages of creating stainless steel texture, after the Gaussian noise and before the motion blur, etc. such as in this tutorial. I think (?) I am just echoing what bcwinters was saying, but I am adding that by choosing different parameters at different stages along the way you can get many different results.
posted by forthright at 7:23 PM on March 10

Here is what I would do in photoshop.

1. Start of with image or color you want to ad noise to.
2. Create a new layer above it filled with 50% grey.
3. Set the grey layer to overlay
4. Use the noise filter to add noise to the grey filter.
5. You can now tweak the opacity of the layer to dial in the amount you want.

This is better then applying the noise filter directly to your base layer as you now have more control of the noise.
posted by travis08 at 5:38 AM on March 11

Yes, that textures on smashing and merlin is almost certainly just photoshop noise.

Mess with the Noise filter on a layer to get the density of noise you want and then adjust the opacity to get the intensity you want. You could also try blurring the resulting noise afterwards too, but that might result in a different effect.

The 5x5 background seems similar but also has hints of what look like heavy jpg compression artifacts making up part of the noise too. Cool.

Also, SemiSophos suggestion to make subtle noise as transparent png's for use on multiple colors is brilliant in the why didn't I think of that sort of way.
posted by cirrostratus at 1:10 PM on March 11