main

Noise Background Effect in Adobe Photoshop CS5

Noise background effect is very commonly ‘in’ in the market these days and everyone is liking this effect to adopt and re-use again and again. So, today I am going to post my another tutorial, but this time I change the trend and use very famous product of adobe which is called Photoshop. Today, I will try to teach you how to create noise texture effect in Adobe Photoshop CS5. This is very famous effect used by many famous websites background. I will show you example sites which are using the same effect background. This tutorial requires your proper attention and just 5 minutes.


Noise Background Effect final preview

Before going on, let me show you the final result of this effect and then keep continue.

Noise Background

Noise Background Effect

5 easy steps to create Noise Background Effect

Step 1:

Lets create a New file (Ctrl+N) and select the file size as much as you want, I personally use (1280px x 800px) for my desktop.

Noise Background

Step 2:

Well now after creating new layer, your next move is to create another layer (Shift+Ctrl+N) or just simply click on the icon as you can see in the following image and rename (Colored Background) the layer by double clicking on the layer. Now change the default color to #142E51.

Noise Background

Step 3:

Now select Paint Bucket Tool (G) and fill the color to the Colored Background Layer. Lets create 1 more layer and name it Noise Layer and fill it with white color (#FFFFFF). Keep selecting the Noise Layer go to Filter > Noise > Add Noise and a Add Noise pop-up box will appear simply set the Amount 25, select the uniform radio button and finally press OK button.

Noise Background

Step 4:

Now go to Layer > New Adjustment Layer > Hue/Saturation or just simply press (Ctrl+U) and you will see Hue/Saturation pop-up box, now set the value of Saturation -100 and OK.

Noise Background

Step 5:

This is our final step, keep selecting the Noise Layer go to Image > Adjustments > Invert (Ctrl+I). Still keep selecting the Noise Layer change the Blending Option to Linear Dodge (Add) and opacity to 45%.

Noise Background

Finally:

You can change Colored Background Layer’s color or you can use Gradient for better effect.

Noise Background

Inspiration Websites for the Noise Background Texture Effect

Noise Background

Noise Background

Noise Background

Noise Background

Noise Background

, , , ,

14 Responses to Noise Background Effect in Adobe Photoshop CS5

  1. Arslan September 11, 2010 at 6:05 pm #

    Nice tutorial .. thanks

    • Hectorino Daniel Belkhadra October 13, 2011 at 10:14 pm #

      Thanks for sharing

  2. helloworlder September 26, 2010 at 8:22 pm #

    Thanks heaps, this would work with gradiented backgrounds too.

    • Muzammil Hussain September 26, 2010 at 11:34 pm #

      yes it will.. you can use any kind of background. its so easy

  3. Richard October 5, 2010 at 3:30 pm #

    I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  4. dgfrancisco October 7, 2010 at 8:13 pm #

    Nice, I was looking for something like this, and now i got it, nice day for me, thanks guys, great tutorial

    • Muzammil Hussain October 7, 2010 at 8:21 pm #

      Welcome @dgfrancisco :D

    • jrgeorge December 24, 2010 at 4:58 am #

      why do you use the invert function in one of the steps?

      would you happen to know why my invert is not available for me at that step

  5. Brett Widmann January 26, 2011 at 1:34 am #

    I really like how this effect an add a great vintage texture. Thank you!

  6. Mark March 2, 2011 at 6:44 am #

    Excellent Tutorial. Thanks you!

  7. Renault March 11, 2011 at 12:09 am #

    Hi this is great, but could you please tell me how you would stitch this together in html/css, esp if this is the full background of your site?

    Thanks
    Renault

    • Muzammil Hussain March 11, 2011 at 4:02 am #

      hello Renault, well its very easy you have to play with CSS a bit, when u done with this effect in photoshop simple make a slice image (5x5px) at the end and use

      background: url('your_noice_background.jpg') repeat;

      in you css file and you will see the difference at the very next moment.

      • jDeppen January 16, 2012 at 8:41 am #

        Thanks for the tutorial. I had to go with 30x30px so I didn’t get an odd pattern.

Leave a Reply

Real Time Web Analytics
Wordpress SEO Plugin by SEOPressor