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.
- Create a new document in Photoshop and set the background to an off-white or creamy colour for paper. I’ve used #fdffdd.
- 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.
Below you can see how the text looks sitting on top of the textured background.
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.
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.
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.