Many peo­ple are adopt­ing a new design trend where the let­ters are seem­ingly pressed into the back­ground, bet­ter known as a let­ter­press effect. In this short tuto­r­ial, I’ll show you a quick, easy, and non-destructive way to achieve this effect. I’ll be using Pho­to­shop here, but you may be able to adapt the tech­niques for use in any other image manip­u­la­tor once you under­stand the two things that are required for a let­ter­press effect.

There are a few ways of doing this, but this way is by far my favourite because it’s so easy to mod­ify the effect later on if needed.

First, a short his­tory lesson.

To make you a bit more savvy on the sub­ject, let me fill you in on the ori­gins of the let­ter­press effect. You most likely own a book, con­tainer, or even busi­ness card that you’re able to rub your fin­gers along and feel the let­ters raised in or out. You guessed it, that’s the let­ter­press effect. Ori­gins go back to as far as 750AD and has almost been used exclu­sively in phys­i­cal print­ing until around a decade ago. Graphic and web design­ers then adopted it as part of their design toolkit. Cur­rent design trends were begin­ning to age, so design­ers needed some­thing to spice up their work.

If you’re inter­ested in see­ing some exam­ples of let­ter­press in web design, take a look at Line25’s fan­tas­tic gallery arti­cle.

Alright, let’s do it!

Pop open Pho­to­shop and pro­ceed to cre­ate a new can­vas. In this tuto­r­ial, I’ll be using a can­vas with the size of 400x400 and back­ground colour of #555555. After doing that, go ahead and type your text out and make it’s colour #999999. You can repli­cate this if you’d like, it shouldn’t really mat­ter but this colour and size should yeild the best results.

Alright, now let’s actu­ally 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 lay­ers panel. Now, head over to the bot­tom of the lay­ers panel and choose Layer Styles → Drop Shadow. Now, make sure to repli­cate the options in the next image below. I’ll explain what these do in a moment.

Repli­cated every­thing yet? Good. Now let me explain a few things. The first thing you should have done is set the blend mode to nor­mal. 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 back­ground with­out being too dis­rup­tive. You should have set the opac­ity to 100%, which will ensure that the drop shadow is nice and crisp. Next is impor­tant, make sure you set the shadow angle to 90°. Last part is easy, just make sure the both dis­tance of the shadow and the size of it is 1px. You can change these later if you want to change the look of the let­ter­press, but we’ll keep it like this for a more clas­sic let­ter­press look.

Alright, now we’ll be doing doing the sec­ond 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 imme­di­ately 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 famil­iar stuff here. You really just need to dupli­cate the set­tings that you used on the drop shadow, but with one major dif­fer­ence. Make sure to set the inner shadow colour to #cfcfcf. This is lighter than the colour we set the text to (#ccc­ccc), and adds a bit of polish.

And that, my friends, is the let­ter­press effect in Pho­to­shop. I pre­fer this method because it’s really easy to change the colours of the shad­ows and text, and believe me, that hap­pens a lot! In this exam­ple, the text is pressed out­ward, but if you were to reverse the colours of the shadow and tweak the text colour as well, you could eas­ily achieve an inset let­ter­press. I’ll leave it to you to exper­i­ment with that, though.

If you want to get fancy, you can also add some gra­di­ents and such. I won’t go into the details of doing this, but the above image is an exam­ple of what a lit­tle bit of cre­ative tweak­ing can do.

So, in clos­ing, let me out­line a few things that you need to remem­ber 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 back­ground, the drop shadow should have a lighter colour than the back­ground, and the text colour should be the same as the background.
• If you want an out­set, the inner shadow is should be a colour lighter than the back­ground, the drop shadow should have a darker colour than the back­ground, and the text colour needs to be a colour that is light, but not as light as the inner shadow.