Photoshopping the LetterPress Text Effect

Lately LetterPress has become a real trend in web design. For those unfamiliar with the effect, LetterPress gives the impression that words and letters have actually been pressed or bevelled inwards. It’s not hard to see why it’s so popular. LetterPress is stylish, very simple, and it’s third dimension allows it to catch the eye without being overpowering. It’s very easy too, and only takes a few minutes. Here’s how to apply the LetterPress typography effect in photoshop.

Step 1:

Open a new canvas in photoshop and paint a new colour to the background. Radial Gradients work well here. As you can see I’ve chosen a gradient of light greys, with the lightest colour glowing from the bottom of the canvas.

Step 2:

Type your word in and choose the colour of your text. The colour should be white, black, or a lighter or darker version of your background colour. As you can see, I’ve chosen white which conforms with the grey background.
The LetterPress effect works significantly better on larger sized text, and bold fonts work much more effectively. I’m using Museo with the weight as 700 and the size at 150pt. The settings in the next few steps apply mainly to text around 150pt. If your text is smaller, just use smaller sizes and depths. Likewise for larger fonts, use larger numbers in the settings.

Step 3:

Add a gradient overlay to your word. Set the colours to black and white, and reduce the opacity to around 5-10%. Your gradient needs to be subtle, and the lighter colours work better at the top.

Step 4:

Add an Inner Shadow to the text. This will give the effect that the text has been pressed into the surface. The depth of the inner shadow determines how far inwards the text is pressed, but I tend to find that less is more. Set the colour to black and reduce the opacity to 40%. The size and depth may change slightly depending on the size of the text you’re using (the size I used was 150pt). I’ve gone with a depth of 2px and a size of 4px. Also setting the angle at 120 degrees tends to be the most effective. The angle we use here will depict the position of the light source. 120 is a fairly natural angle, and it also helps to add the third dimension.

Step 5:

Add a light Drop Shadow. The shadow helps to give the effect that the edges are curved, as though they are beveled inwards. In order for the effect to be optimal, we need to once again consider that less is more. I’ve gone with a distance of 0px because all corners of the text will be beveled, as well as an angle of 120 degrees to be consistent with the light source and the inner shadow. Also, the colour is very important. In order to make the lighting of the text realistic, your shadow needs to be darker than the darkest colour in your background. This can easily be achieved by setting the colour to black and reducing the opacity to between 30% and 60%, depending on the darkness of your colour. That way, if you’ve got a red background, the shadow will appear dark red. Likewise with blue and every other colour.

Step 6 (optional, but worth doing):

Add some noise to your background. This light noisy texture adds to the realism off the pressed in letters. It looks like paper, or a notepad, or something else you’d imagine letters could be pressed into. I’ve gone with uniform, monochromatic noise with the amount set to 3%. Once again, i’m being minimalistic.

But I’ve got small font and it looks crappy with these settings:

Just use smaller numbers for the settings. I’ve based my figures around a font size of 150pt. If your font is significantly smaller, then just use 2 or 3 for the inner shadow depth instead of 4, or whichever number makes it look good.

That’s really all there is to it. The LetterPress effect is very simple to apply and produces great results. It’s simple, modern and incredibly stylish. Just remember to be minimalistic and all should be well.