Noise and textures

The goal is to find the best method that maintains quality when scaled, but is also easy to implement and edit. The full criteria:

• Number of layers used. Less is better.
• Ability to scale—if the document is resized, will the effect maintain quality?
• Can the noise be on top of the Color and Gradient Layer Styles?
• Can the method be used with any texture, not just noise?

1 — Bitmap layer with noise

Probably the most obvious method for adding texture to a shape is to create a normal bitmap layer, fill it with a colour, select Filter > Noise > Add Noise, then apply a Vector Mask to match the element you’re adding noise to.

Using a high amount of noise, setting the layer blending mode to Luminosity and reducing the opacity will yield the most amount of control over the noise with the least amount of disturbance to the underlying layers. A noise setting of 48% gives a high dynamic range without clipping the noise (clipping results in higher contrast, which might not be desirable).

• Layers: 2
• Scales: No, texture will have to be recreated if the document is scaled
• Works with Color and Gradient Layer Styles: Yes
• Works with any texture: Yes

2 — Inner Glow Layer Style

Adding an Inner Glow Layer Style with the source set to centre and size to 0 will let you use the noise slider to add texture to any layer. It’s a good solution, provided you’re not already using the Glow Layer Style for something else. The noise is added above the Colour, Gradient and Pattern Layer Styles, which is great.

Unfortunately, the noise can only lighten or darken the underlying elements. The previous, bitmap layer method can add highlights and shade at once maintaining the average luminosity, and looks far better in my opinion.

• Layers: 1
• Scales: Yes, texture will be remade automatically
• Works with Color and Gradient Layer Styles: Yes
• Works with any texture: No

3 — Smart Object with Filter

Create a Solid Color Layer, convert it to a Smart Object, select Filter > Noise > Add Noise, apply a Vector Mask to match your element, set the layer blending mode to Luminosity and reduce the layer’s opacity.

It’s a fairly involved process, but can use a combination of effects that will be remade if the document gets scaled. Neato.

• Layers: 2
• Scales: Yes, texture will be remade automatically
• Works with Color and Gradient Layer Styles: Yes
• Works with any texture: No

4 — Pattern Overlay Layer Style

Start by creating a noise or a repeating pattern in a new document, then choose Edit > Define Pattern. Once you’ve defined the pattern, it’ll be available in the Pattern Overlay Layer Style options. As with previous methods, using Luminosity as a blending mode and reducing opacity to suit yields great results.

In hindsight, Pattern Overlay seems like a reasonably obvious way to add textures, but I didn’t think about using it until Erica and Louie mentioned it last week.

The Pattern Layer Style is composited below the Color and Gradient styles, ruining an otherwise perfect noise and texture method. Although, you can create a second layer that just holds the texture if you need to, or start with a Gradient Fill layer, sidestepping the limitation.

• Layers: 1
• Scales: Yes, but you’ll need to change the Layer Style scale to 100% after scaling
• Works with Color and Gradient Layer Styles: No, the pattern appears underneath
• Works with any texture: Yes

5 — Noise in Color Layer Style

I can’t help but think it’d be nice if Photoshop included a noise slider as part of the Color Layer Style. It’d certainly be handy and a lot simpler to use than most of the other methods outlined above. I have asked Adobe nicely to include the feature in Photoshop CS6. Maybe it’ll make an appearance some day soon.

• Layers: 1
• Scales: Yes, texture will be remade automatically
• Works with Color and Gradient Layer Styles: Yes
• Works with any texture: No
• Actually exists: No

Which method is best?

Although a little cumbersome, creating a Gradient Fill Layer, adding a Pattern Layer Style then creating a Vector Mask seems to be the best method possible. It can be used to create flexible, scalable and editable single layer UI elements with a texture. As an added bonus, Gradient Fill Layers can be dithered, so it also produces the highest quality results.

I’ve created some examples below and included the source document, so you can see how they were built. Enjoy.

Download the PSD