Photoshop Tutorial: The Letterpress Effect

Letterpress is popular with many print designers because of the beautiful effect it creates on business cards, book covers or pretty much any type of printed material.

Letterpress works by pressing the ink into the paper leaving a coloured imprint. You can find a TON of information on letterpress printing here on the Five Roses website.

So what happens if you’re not printing your designs but would like the effect on your web design? Well this short tutorial is designed to show you how you can achieve a similar effect using Photoshop.

  1. Create a new document in Photoshop and set the background to an off-white or creamy colour for paper. I’ve used #fdffdd.

    Coour Picker

  2. Now to make it look a little bit more like paper we’ll add some texture. You could either scan in some of your own papers and apply them as a filter or you can use one of the textures that comes as a default in Photoshop.

    Choose Filter > Texture > Texturiser.

    Texturizer

The image above shows a magnification of the Canvas texture filter that will be applied to the background layer. Try changing the Scaling and Relief until you get an effect you like and click OK. Burlap also works quite well with this effect.

3. Add some type to your image. Retro fonts work particularly well and a couple of weeks ago I wrote a post about some of the free retro fonts you can download. I’m using one of them, from Font Diner, called Font Diner Huggable. It’s best to use a light(ish) colour for the font but not too bright as you’re trying to recreate a look of ink and inks are never as vibrant as the colours you can see on your screen. I’ve used Red – #cc0000.
Retro Font

Below you can see how the text looks sitting on top of the textured background.

Up close


5. Now we’re going to “press” the ink. This is done using the Inner shadow layer style. Click the fx button at the bottom of the layers palette and choose Inner Shadow.
Layer Style

By default the Inner Shadow will be black. Change this to a slighter darker colour than the text colour you’re using. Black is too severe. Reduce the opacity to about 60% or less and keep the Distance and Size to a small pixel number. The effect should be subtle.

6. To make the text fit in a little more, we need to texturize that too. Choose Filter > Texturize (because it was the last Filter used). You’ll see a message asking you if you want to rasterise the type. Click OK.

Rasterize Type

Your text should now look like it has the same texture as the background and that it has been pressed in.
Letterpressed


To finish off, add a little bit of extra light by using a large soft Dodge tool.
Letterpress

I ran the Dodge tool over the centre of each letter, but you can play around with it to see what you like best. And that’s it! Maybe not as beautiful as a real letterpress piece of text, but it’s still a nice effect and this method can be used with images or dingbats in exactly the same way.

Completed Letterpressed Text

Related posts:

19 Comments

  1. Very nice tutorial. One of the web design trends for 2009 is the letterpress effect.

    I would love to see another tutorial on how to achieve letterpress effects in web designs using Photoshop.

    As of now you are the only article that teaches this type of text effect.

    You can see some samples of letterpress here:
    http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

    Thank you

  2. This turned out to be
    not nearly as difficult
    as I was expecting.

    Cheers for sharing 8)

  3. Hi Phil

    You’re very welcome!

  4. Hi Tracey, you’re very welcome.

  5. Thank you so much. Been looking for a tutorial on how to do this correctly. THANKS!

  6. Great tut, Thank you for taking the time to make it. Just curious, are you sure the font you used is actually Huggable? The huggable one I just downloaded from font diner doesn’t look like that one :( Maybe it changed?

  7. Thanks everyone for all the comments.

    You’re very welcome Sneh.

  8. There is obviously a lot to know about this, but you did a good job covering it

  9. Like it. I am going to try to utilize this in print as well. I love letterpress effect but can cost alot more and harder to find printers for this type of design.

  10. Thank you so much for this tutorial. You completely solved my dilemma. I’m looking forward to browsing your other tutorials once I get this website of mine finished!

  11. Thanks everyone for all the kind comments on this tutorial. I’m really pleased you found it useful and appreciate you visiting.

  12. Wow brilliant content! Fantastic tutorial man. It�s ridiculous just how many exceptional tutorials you guys post. Really enjoy your site. Say thanks!

Trackbacks/Pingbacks

  1. Outlaw Design Blog » 2009 Web Design Trends and How-To’s - [...] Photoshop Tutorial: The Letterpress Effect [...]
  2. 2009 Web Design Trends and How-To’s | Design Tips | 有限会社 インスピレーション - [...] Photoshop Tutorial: The Letterpress Effect Easily achieve the trendy LetterPress effect with Photoshop Ps Letterpress emboss text effect …
  3. Tendencias del diseño web 2009 | Futuro de la Web Magazine - [...] Photoshop Tutorial: The Letterpress Effect [...]
  4. Youblogoff.com » Blog Archive » 2009 Web Design Trends and How-To’s - [...] Photoshop Tutorial: The Letterpress Effect [...]
  5. Publicious Links: The (Insert Theme Here) Edition « Publicious - [...] Laughing Lion Design has a tutorial on achieving a letterpress effect in Photoshop. [...]
  6. 2009 Web Trends and How-To’s ‹ alexboorman | creative design - [...] Photoshop Tutorial: The Letterpress Effect [...]

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>