Noise Texture in Photoshop
I wanted to switch it up this week to do a quick tip on how to create noise (grainy) textures with Photoshop to add subtle detail to your next project. A lot of times I feel that its the small and subtle details that really makes a project shine. Let’s get started.
1. Fill Base Layer
Create a new document and create a new layer. Fill the the new layer with the base color of your choice. In my example I used blue (#142e51) for my base color.
3. Create Noise Layer
Create a new layer and fill this layer with white (#ffffff). Then add your noise filter to this layer (Filter > Noise > Add Noise…).
You can set the amount to 25%. The higher you go, the more noisy it will get. I like to keep mine minimal and not too harsh.
You will notice when you add noise, there are many small pixalated colors scattered on your layer. To make this gray scale, you must adjust your noise layer saturation level (Layer > New Layer Adjustment > Hue/Saturation…) or short cut (Ctrl + U) on a PC.
The window will popup to adjust your saturation. Turn the saturation level all the way down to -100.
4. Blend
Now its time to blend the two layers together. You can do this by selecting the noise layer and experimenting with your blending mode. Since I used dark blue for my base color, I invert my noise layer (Image > Adjustments > Invert) first before I experiment with my blending mode.
Note* if you chose a light base color, you can simply change your blending mode to multiply and adjust your opacity settings to get the effect to your liking without inverting your layer.
Once you inverted your noise layer, now go ahead and experiment with the blending mode. I chose the Linear Dodge mode with the opacity set to 45%.
Final
Here is the final image. I would like to encourage you to experiment and have fun with this technique!
Inspiration – Examples in the Real World
Related Articles
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment37 Peeps Have Spoken Their Minds...
Awesome tutorial. Clear instructions and simple method. Most of the guides for this method that I’ve read overcomplicate it. Thanks for sharing!
Hey, thanks for this awesome tuts but could you tell me how to make pattern of that and converting as background for web page?
You don´t need to desaturate the layer. In the Add Noise window just check the monochromatic option and it will desaturate automaticly.
Awesome tutorial mate, really good for a newbie. :)
Enjoying your portfolio also, you have the skills..
Nice old trick. Ty Soh
Cool tips.
Thanks, i relay need this :)
Ups,. i mean “realy” :D
Nice post dude!
I was gonna reply earlier and point out that you can tick the ‘Monochromatic’ box on the ‘Add Noise’ tool to stop it making coloured noise, but stopped myself when I realised that your desaturation method gives you much nicer results.
But then I thought I’d say it anyways in case other people didn’t consider the difference :)
Monochromatic seems to give you noise with pixels of 2 colours, white, and a single shade of grey.
This method seems to give you greyscale noise, which looks much smoother!
Cheers for making me think about it for a minute! :)
Very cool simple tutorial that is easy to implement. You can also add a slight motion blur to give another kind of grainy effect.
It’s good your not so noisy.
I was exactly looking for an article about this! Wonderfully explained, thanks.
Awesome tut! This will look great with your other tut, “Have Fun w/ Borders – Beveled, Pressed, & More!”. Thanks for the best written tuts I have ever read!
But.. I think this techique only works with dark colours.
I tried it with a clear gray and the texture becomes more clearer and is inappreciable
Great tutorial, I was wondering how you did your noise… could have used this a couple weeks ago. :)
Good technique and again very easy to follow. Thanks Soh
Ladislav is right. Just check mark monochrome checkbox in the Noise window and you are good to go. Nice blog topic BTW. Subtle but highly effective..
Just used a similar technique last night for a school project. Subtle texture is… so sexy ;)
Thank you so much. I was always wondering how people do that, putting only noise on a color and not getting the result I wanted. Thanks a lot from Japan
You’re one of the most creative people in this world!
thanks bro.. make easy for me
arigatou man!
Hmm Good technique.. Thx Bro…
Thanks for this great tip – I have been doing something similar but couldn’t recreate the effect I often see! Thanks again
thanks for the tutor.
helpful to make the design more life for newbie =)
Thanks
wow. the long wait one is coming! I will try it :)
nice tutorial, but i make my background with film grain
Hi there ! Thanks for this tutorial ! (this is funny becaus last week, I just opened your blog to get inspired by your general design, and just by wathching the heder (shiny!) I found out this technic, more or less !!…)
But I still have a wonder, this is about -for exemple- : * The séparations lines, * the laurel leafs around the SanFransisco Tram Logo ::: they seem to be encrust !!
¿ is it a simple effect in the layer’s setting you use ? like.. bevel or something ? … this is nice and usefull !
Many thanks again, * muchas Gracias * !
A.
Your picture is used by stealth on the website in Japan.
God I love this blog. Awesome tips that even a developer (myself) can understand and use. Awesome stuff!
Thank you for this tutorial, it helps me a lot.
Noise seem to be used long time ago great that you bought it up now these people who say thank you will abuse it.
Thanks for your tutorial, my question, how to convert that to pattern?
I use this technique a lot, especially with other textures if they’re a little too crisp.
Thanks, ive been looking for a good tutorial for noise backgrounds coz i want to make my own instead of stealing from other sites. :D
yeah.. it was just awesome.. n that too at the right time.. i was searching for it..!!
thanx soh
What a great technique, I will certainly be giving this a go! I would like to learn more of these techniques as just recently I always seem to be using either flat colour or a graduated overlay on my work. Just by having some form of texture in the background it can really help to lift a site and actually just make it that bit more special. Once you know how to do these things, you can play around with them even more. Thanks for the post, very helpful.
Speak Your Mind...