Matt Gemmell

TOLL is available now!

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

★★★★★ — Amazon

Etched effects in Photoshop

design, ui & photoshop 2 min read

My previous Photoshop tutorial on using noise for subtle texture was well received, so I’ve decided to write more. This time, we’re creating an etched effect (in this case, for text on a metallic background, but it’ll work for any background and is equally applicable to icons and other shapes, as well as text).

It’s exceptionally easy to create an etched effect, since we only need to replicate two aspects of how shapes look in the real world when they’re cut into a surface:

  1. The natural shadows inside the cut-out part.
  2. The subtle pools of light falling onto the front edges of the cut-out part.

To start, create a new document and fill it with a suitable background. I chose a simple gradient layer with a grey gradient, to give a basically metallic appearance. I then added some text, and made it a bit darker than the darkest colour used in the gradient.

Some text, with a gradient background

Some text, with a gradient in the background.

We only need to apply two effects to create the etched effect; one for each of the visual factors I mentioned previously. First, we create the interior shadow using the Inner Shadow layer effect.

Inner Shadow settings

Inner Shadow settings.

You can tweak the settings to adjust the apparent visual depth of the etching, but I find that a Distance of 2 pixels and a Size of 4 pixels works well for a believable effect. Make sure you set the light angle to 90 degrees if you’re designing for iOS, or whatever global light angle your particular target platform simulates.

Next, we need to replicate the effect of light spilling a little way into the carved-out shapes. Interestingly, we can do this by making unconventional use of the Drop Shadow layer effect.

Drop Shadow settings

Drop Shadow settings.

By changing the shadow to pure white, with a Normal blending mode, and making it only 1 pixel in Size and 1 pixel in Distance from the layer’s contents, we can create the impression of some light reflecting along the bottom edge of whatever is in the layer (the text, in our case).

Both those styles put together create a pretty decent etched effect for the text, as shown below.

The final etched effect

The final etched effect.

The same Layer Style can be copied and pasted onto any other shape or icon you like - it’s great for titlebars and similar interfaces. You can download the finished etched effect as a zipped PSD here.

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