Many people are adopting a new design trend where the letters are seemingly pressed into the background, better known as a letterpress effect. In this short tutorial, I’ll show you a quick, easy, and non-destructive way to achieve this effect. I’ll be using Photoshop here, but you may be able to adapt the techniques for use in any other image manipulator once you understand the two things that are required for a letterpress effect.
There are a few ways of doing this, but this way is by far my favourite because it’s so easy to modify the effect later on if needed.
First, a short history lesson.
To make you a bit more savvy on the subject, let me fill you in on the origins of the letterpress effect. You most likely own a book, container, or even business card that you’re able to rub your fingers along and feel the letters raised in or out. You guessed it, that’s the letterpress effect. Origins go back to as far as 750AD and has almost been used exclusively in physical printing until around a decade ago. Graphic and web designers then adopted it as part of their design toolkit. Current design trends were beginning to age, so designers needed something to spice up their work.
If you’re interested in seeing some examples of letterpress in web design, take a look at Line25’s fantastic gallery article.
Alright, let’s do it!
Pop open Photoshop and proceed to create a new canvas. In this tutorial, I’ll be using a canvas with the size of 400×400 and background colour of #555555. After doing that, go ahead and type your text out and make it’s colour #999999. You can replicate this if you’d like, it shouldn’t really matter but this colour and size should yeild the best results.
Alright, now let’s actually get into doing the effect. In this method, we can be pretty non-destructible by only using layer styles. You’ll see what I mean in a minute.
Select your text layer in the layers panel. Now, head over to the bottom of the layers panel and choose Layer Styles → Drop Shadow. Now, make sure to replicate the options in the next image below. I’ll explain what these do in a moment.
Replicated everything yet? Good. Now let me explain a few things. The first thing you should have done is set the blend mode to normal. This ensures that the drop shadow will stand out. Next up is the colour change – make sure it’s #333333. It’s dark enough to stand out against the background without being too disruptive. You should have set the opacity to 100%, which will ensure that the drop shadow is nice and crisp. Next is important, make sure you set the shadow angle to 90°. Last part is easy, just make sure the both distance of the shadow and the size of it is 1px. You can change these later if you want to change the look of the letterpress, but we’ll keep it like this for a more classic letterpress look.
Alright, now we’ll be doing doing the second part of the effect – the inner shadow. Since you already have the effect panel open, just go over to the list of effects on the left and select Inner Shadow.
You’ll immediately see the inner shadow applied, but we’ll change that in a moment. Just take a look at the image below and copy the settings.
Alright, a lot of familiar stuff here. You really just need to duplicate the settings that you used on the drop shadow, but with one major difference. Make sure to set the inner shadow colour to #cfcfcf. This is lighter than the colour we set the text to (#cccccc), and adds a bit of polish.
And that, my friends, is the letterpress effect in Photoshop. I prefer this method because it’s really easy to change the colours of the shadows and text, and believe me, that happens a lot! In this example, the text is pressed outward, but if you were to reverse the colours of the shadow and tweak the text colour as well, you could easily achieve an inset letterpress. I’ll leave it to you to experiment with that, though.
If you want to get fancy, you can also add some gradients and such. I won’t go into the details of doing this, but the above image is an example of what a little bit of creative tweaking can do.
So, in closing, let me outline a few things that you need to remember when doing the effect with this technique:
- There are always two shadows.
- If you want an inset, the inner shadow is should be a colour darker than the background, the drop shadow should have a lighter colour than the background, and the text colour should be the same as the background.
- If you want an outset, the inner shadow is should be a colour lighter than the background, the drop shadow should have a darker colour than the background, and the text colour needs to be a colour that is light, but not as light as the inner shadow.