U&I

Creating Noise in Photoshop

The new version of Photoshop (version CS6) introduces lots of new features that designers (in particular UI designers) have been wanting for years. However, there’s one thing I was hoping for that’s still missing: the ability to easily add noise to a layer non-destructively.

When I first started using Photoshop I would rasterize every shape I wanted to apply noise to, because I didn’t know any better. This is definitely the worst method. It prevents pixel-perfect scalability of the shape, and removes editability of the layer styles (they are merged into the layer).

I’ve since tried several other methods of adding noise non-destructively. Some of them are OK, some not. Recently, I read this article by Marc Edwards of Bjango (you should read it too, it’s good), in which he details four common noise methods. The one I preferred (and the one he recommended) was to create a noise pattern in a new document, define it as a pattern (Edit > Define Pattern), and then use the Pattern Overlay layer style to apply it to a layer. Neat, but there are a few problems:

• It doesn’t work with the Color and Gradient Overlay layer styles (it’s composited beneath them).
• It doesn’t allow for the noise to be easily edited beyond changing the opacity and blend mode.
• When you scale the document, you have to manually reset the Pattern Overlay scale of every single layer to 100%.

Over the past few days I’ve done quite a lot of testing in Photoshop, and I’ve come up with a new way to add noise. And I’ve created an action for it, so it’s just one click to apply.

The technique:

If you hold down the Option key and click on the new layer icon, you will be presented with this dialogue box:

In this particular dialogue box, I have the blend mode set to overlay, and I have ‘Fill with Overlay-neutral color (50% gray)’ checked on. What does this mean? This description from Adobe best explains it:

You can’t apply certain filters (such as the Lighting Effects filter) to layers with no pixels. Selecting Fill With (Mode) + Neutral Color in the New Layer dialog box resolves this problem by first filling the layer with a preset, neutral color. This invisible, neutral color is assigned according to the layer’s blending mode. If no effect is applied, filling with a neutral color has no effect on the remaining layers.

Adobe’s description uses the Lighting Effects filter as an example, but yes, this technique will also work with noise.

Let’s try this out with a simple button.

To apply noise to the Button layer, this is what I would firstly do:

1. Select the Button layer in the Layers palette.
2. Hold down the Option key and click the ‘New Layer’ button to create a new layer.
3. Check ‘Use Previous Layer to Create Clipping Mask’. 1
4. Change the blend mode to Overlay, and check ‘Fill with Overlay-neutral color (50% gray)’. 2

This is now what my Layers palette will look like:

If you’re following along, you’ll notice that nothing visible has yet happened to the Photoshop document. The 50% gray fill doesn’t affect it at all when the blend mode is set to Overlay.

Now for the noise. I could just add the noise by going straight to Filter > Noise > Add Noise, but I won’t — because you can’t edit the noise later if you do it that way. Instead, I’m going to convert the layer to a smart object (right click on the layer and click ‘Convert to Smart Object’), which will allow me to add the noise as a smart filter (add this in the same way you would add filters normally) — retaining editability of the noise 100%.

This is now what my Layers palette and button will look like: