Matt Gemmell

TOLL is available now!

An action-thriller novel — book 2 in the KESTREL series.

★★★★★ — Amazon

Subtle UI texture in Photoshop

design, ui & photoshop 5 min read

On iOS and almost every other operating system, user interfaces tend to use gradients to give a sense of contour to interface elements. The trouble is, gradients alone can look artificial due to their unrealistically perfect visual smoothness. In the real world, almost nothing is completely flat and smooth - and that’s a good thing, because we rely on friction for grip.

We can add a touch of realism to our interface designs by combining gradients with subtle textures. My own favourite type of texture is noise, which gives an understated but effective sense of tactility. I used noise for texture extensively in my UI design for the Favorites 2 iPhone app.

This brief article explains one possible way to combine gradients with subtle noise in Photoshop (as with any effect, there are many other approaches to achieving the same thing; this is just how I usually do it). I used Photoshop CS5, and this tutorial should be suitable for Photoshop beginners. It’s aimed primarily at app developers, rather than experienced designers.

(Note: if you use Acorn instead of Photoshop, Gus Mueller has written a version of this tutorial for Acorn.)

There are three main stages to combining noise with gradients, the first of which you’ll probably only need to do once.

1. Creating a noise pattern

The idea here is to make a Photoshop Pattern containing noise, which we’ll then apply to whatever objects we want to give texture to. Start off by making a new document (500 x 500 pixels is good), and filling it completely with a solid colour. I’d advise trying 50% grey.

Next, use the Add Noise filter (Filter menu, Noise submenu) to add some noise. The settings I tend to use are shown in the screenshot below; 50% Gaussian RGB.

1. Add Noise filter options dialog.

Add Noise filter options dialog.

That’ll produce a fairly horrible TV-static-like pattern in your document. Select the whole thing, and choose Define Pattern from the Edit menu. Save your pattern with a suitable name, as shown below.

2. Saving some noise as a Pattern to use later.

Saving some noise as a Pattern to use later.

You’re now done with this Photoshop file, so just close it (there’s no need to save it).

2. Creating a Gradient Fill layer with a Vector Mask

It’s always good to keep shapes as vectors for as long as possible, so you can tweak and resize them without destroying them. For that reason, I tend to draw all my UI elements using the Shape tools in Photoshop, then apply Layer Styles to achieve a particular look.

The problem is, whilst there are both Pattern Overlay and Gradient Overlay Layer Styles, the Gradient Overlay takes precedence over the pattern, so if you want to have both visible you need to reduce their opacity, which can wash the gradient out.

It’s better to use an actual Gradient Fill layer, with the same Vector Mask as the shape you want, then apply Layer Styles to that layer instead. It takes a couple of extra steps, but it’s still easy and quick.

First, use one of the Shape tools to make the shape you want. You’ll see the resulting Shape Layer in the Layers palette. I made a rounded rectangle in this example. Now, make sure the shape’s Vector Mask is selected by clicking on it in the Layers palette (it’s the rightmost of the two boxes in that layer’s row; you can see that it’s selected by the four black corners around it in the screenshot).

3. Shape layer in the Layers palette.

Shape layer in the Layers palette.

Now, switch to the Paths palette. You’ll see that your shape’s Vector Mask is shown as an implicit path.

4. Paths palette, showing vector mask path of a shape layer.

Paths palette, showing vector mask path of a shape layer.

Next, save that path by choosing Save Path from the fly-out menu near the top-right of the Paths palette. It looks like a little grey down-arrow beside some horizontal lines. Give the new path any name you like, and make sure that it’s now selected in the Paths palette.

5. Saving a shape's vector mask as a path to use later.

Saving a shape's vector mask as a path to use later.

With your saved path still selected in the Paths palette, create a new Gradient Fill layer. You can do this using the Fill/Adjustment layer popup at the bottom of the Layers palette, which looks like a circle that’s split diagonally into black and white halves.

6. Making a new Gradient Fill layer.

Making a new Gradient Fill layer.

You’ll now have a Gradient Fill layer that has your shape’s Vector Mask pre-applied to it: essentially a shape that has a gradient background. We’re only interested in the new Gradient Fill layer from now on, so you can delete the old shape layer.

7. Gradient Fill layer in the Layers palette.

Gradient Fill layer in the Layers palette.

You might want to take this opportunity to click the Gradient Layer’s gradient swatch in the Layers palette, to choose the actual gradient you want. When you’re ready, open up the Layer Styles dialog and enable a Pattern Overlay.

3. Using a Pattern Overlay to add noise

There are two things you’ll want to do in the Pattern Overlay settings:

  1. Choose your noise pattern from the pattern popup.
  2. Tweak the opacity of the Pattern Overlay until the noise is subtle but noticeable. You’ll probably want something in the region of 5% opacity, depending on how much noise you applied, what the base colour of your pattern document was before you added noise, and what colour your layer’s Gradient Fill is. Just experiment until you find something you like.
8. Pattern Overlay options.

Pattern Overlay options.

That’s pretty much it. You can toggle the Pattern Overlay on and off in the Layers palette to see the difference it makes; you should notice a slight but pleasing sense of roughness and realness when it’s enabled, making the shape just a little bit more inviting.

Here’s an example of two identical buttons, firstly with just a gradient (top) and secondly with some noise applied (bottom). Since this screenshot is on Flickr, JPEG compression might make the noise a bit less refined than you’ll see in Photoshop or in an exported PNG for your app.

9. Buttons without and with noise applied

Buttons without and with noise applied

Here’s a (similarly JPEG-compressed) close-up of the difference between the two buttons.

10. Close-up of buttons without and with noise.

Close-up of buttons without and with noise.

You can download the finished button as a zipped PSD here.

Texture is an inherent part of any surface in the real world, and provides a cue to our brains that we’ll be able to grip or otherwise interact with that surface. Delicate use of noise can add a welcome note of reality to your interfaces, and make people want to use them.

If you’re interested in more beginners’ UI effects tutorials for Photoshop, follow me on Twitter and let me know.