Laughing Lion Design - Jennifer Farley Illustration & Design

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.


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.

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

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

Comments (25)

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:

Thank you

7 years ago

Thanks Raymond!

7 years ago

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

Cheers for sharing 8)

7 years ago

Hi Phil

You’re very welcome!

7 years ago

This tutorial produces a lovely effect – thanks for sharing.

Tracey Gradys last blog post..More Fantastic Illustration Resources

7 years ago

Hi Tracey, you’re very welcome.

7 years ago

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

7 years ago

This is just awesome !! precisely what i was looking for…thanks a ton.

Rajeshs last blog post..EMC ECC discovery fails to complete discovery of VirtualCenter/ESX hosts (1009092)

7 years ago

You’re welcome Rajesh.

7 years ago
Wobbly man

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 years ago

[…] Photoshop Tutorial: The Letterpress Effect […]

7 years ago

[…] Photoshop Tutorial: The Letterpress Effect Easily achieve the trendy LetterPress effect with Photoshop Ps Letterpress emboss text effect […]

7 years ago

[…] Photoshop Tutorial: The Letterpress Effect […]

7 years ago

[…] Photoshop Tutorial: The Letterpress Effect […]

7 years ago

[…] Laughing Lion Design has a tutorial on achieving a letterpress effect in Photoshop. […]

7 years ago

Thanks for this quick little trick! will come very handy!
.-= Sneh Roy´s last blog ..Free Retro Circle Scribbles Brush Pack For Photoshop =-.

6 years ago

Thanks everyone for all the comments.

You’re very welcome Sneh.

6 years ago

nice ,very nice…

6 years ago

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

6 years ago

[…] Photoshop Tutorial: The Letterpress Effect […]

6 years ago

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.

6 years ago

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!

6 years ago

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

6 years ago

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

5 years ago

Leave a Reply

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


Pin It on Pinterest

Share This