Photoshop letterpress tutorial

I recently had to supply visuals to a client to show them what their design might look like when finally letterpressed. Its a tough thing to imagine, as usually the idea can be so simple, but its the right combination of paper and ink that creates the desired effect. Sending over what I call flat artwork/plain vectors just wasn't cutting it, so I started to build letterpress mockups in Photoshop.

There is a great video based tutorial here, but as a bit of an organisational junkie, I saw lots of unnecessary steps in this process. I've tried to strip it right down for less experienced users. If you are a dab hand in PS you can probably skim this tutorial and jump straight in.

What's letterpress?
Letterpress is a truly historic form of print. Its rumoured to date back to the second century in China. Books were handwritten until the first printing press was invented by Johannes Gutenberg in the mid 15th century, and some form of movable type was still the most common method of production right up until the last half of the 20th century, ultimately being replaced by the modern technique we know today as lithographical printing.

The process of setting type by hand by all means be a thing of the past, but small artisan presses and enthusiasts still offer the technique known as letterpress, as an alternative the full colour on gloss we've come to associate with being a good thing.

Its hard to fully understand the beauty of letterpress until you've held the crisp and heavy paper in your hands, and marvelled at tiny 5pt type, sharp as a tact and so much more detailed than any computer screen can offer. If you get the chance to print work this way I'd thoroughly recommend it, and also for the chance to work with some of the nicest people in the print world.

1) Start a new document

Just for simplicity I've started a 1000x500px document, this is purely for web, I'd normally work on an A3 300dpi document. You can always scale in down remember, but blowing it up just means you'll have to start again somewhere. Photoshop takes good care of sizes and resolutions now so pay close attention at the start to avoid problems later on.

2) Import/create artwork

Either import your final vector artwork from Illustrator, or create something quick directly in Photoshop. Whatever the artwork, its going to be deconstructed/broken apart, so I prefer to have an Illustrator file as my master version and just edit in Photoshop purely for effect. And chances to the artwork, and I'll go back to Illustrator.

The 'AW' is specifically for this tutorial so I just created it quickly in PS as I not precious about deconstructing it. Although letterpress prints very detailed in real life, it can be hard to show this on screen so I'm using overly bold shapes to exaggerate the effect. You can use whatever artwork you like, but may struggle with fine lines.

3) Background colour and texture

Double click on your Background layer in the layers palette to unlock it. Its locked by default in PS but we're going to edit this. Double click the layer again to bring up the 'Layer Style' options and click on 'Colour Overlay'.

You can now select a colour of your choice, in my case I went for #77b5ad. Now you'll have a coloured background on a black AW… lets add some texture.





There's plenty of good textures out there, especially from CGtextures, but I've found some of the best use for paper is, well, paper. I scanned Cairn Almond from a single recycled sheet, you can download this hi-res from my Flickr page.



Open the texture and simply drag this across into your document. Its probably a little too large for our 1000x500px document, so resize by pressing Ctrl/Cmd + T to fit the canvas size.

Double click the layer to bring up the Layer Style options again and set the layer style to 'Hard Light'. I should mention that Hard Light is correct for this colour/texture, you'll need to experiment to get the best results each time. 'Overlay' is a handy one to start with sometimes.

You'll notice the green colour has changed slightly and looks a little brown. This is due the texture already having a brown tint. If you used a greyscale document there wouldn't be colour change but I find it easier to adjust this colour using a 'Hue/Saturation Adjustment Layer'. This can be found in Layer > New Adjustment Layer > Hue/Saturation.

Adjust the sliders so they look like this.



So now you've got a textured background with subtle high/low lights, but the artwork is untouched. Lets dive into that.

4) Adding effects to artwork

The basic settings to make the letters pop are quite simple, the trick is just to not over do it, so its still looks realistic. You can apply these filters up to a certain point in Photoshop where the text is still editable (if you created your text in Photoshop), but you'll need to rasterise your type at some point so its no longer text, I do this at the start.

Double click the layer to bring up the Layer Style options again and check the boxes for the following four options, adjust the sliders so they match the following settings.

Drop Shadow - Normally used to give a raised appearance, but this time we want the artwork to be lower than the background, so we're using a white shadow where the light would be seen.



Inner Shadow - This complements the white drop shadow by adding a dark edge inside the letters. This acts as the most obvious effect really helping things to stand out.



Inner Glow - This one is really subtle (you'll notice size is set to 1px) as its there just to take the sharpest edge off the lines and make it slightly imperfect. Optional really.



Gradient Overlay - This adds a subtle top to bottom fade from dark to light, further adding the illusion of light being cast across the design. My gradient goes from #4d4d4d, to #3a3939, to #232323.

Please note - these values are proportional to the 1000x500px document size, if you were working on an A4 300dpi document you may have to increase the values to be able to see the effects. Like wise if you start on a large document and resize any unflattened layers the effects will probably be too strong. Always work on the biggest document you can, save copies and make smaller files later.

You should now have something that looks a little like this. There's lots of 'clean' effects on the artwork but we need to apply a texture to the fill too to make it match the background.

5) Adding texture to artwork

Hover over the AW layer with your cursor (right over the little AW preview thumbnail) and Ctrl/Cmd + click, this selects any artwork on this layer and brings up the 'Marching Ants'. You can do the same thing by using the Magic Wand (W), but I've always found the layer palette more accurate.



Still have your Cair Almond background texture open? Good, now you want to select that entire document (Ctrl/Cmd + A) and copy (Ctrl/Cmd + C) it.

Now back into you working document with the marching ants round the letters, you want to paste this background inside of the selection. Shift + Alt + Ctrl/Cmd + V, or the long way of Edit > Paste Special > Paste Into. You'll now have something that looks a little like this.



Now don't worry, you may wonder where all the layer effects have gone you just some time making. They're still there, this texture has just been pasted into a mask on top thats all. We just need to make a few adjustments to its own later effects and colour.

Double click on this new later to bring up the Layer Effects and set the vales to match mine. Hard Light 66% opacity, Fill Opacity 78%. Again these values are quite specific to these particular colours and textures, you may find Hard Light isn't working for you so try the other options. The last thing to do now is create another Hue/Saturation Adjustment layer to get rid of the brown tint still showing through. Go to Layer > New Adjustment Layer > Hue/Saturation, and slide the Saturation down to its resembles grey.





An important thing to consider when using Adjustment Layers is whether you want it to be applied to everything below this layer, or just that specific layer. In this case we only want to affect the textured fill, so be sure to check 'Use previous layer to create clipping mask'

6) Finishing touches

You could leave the design like it is now, but even the textures effects look a little uniform. If you were to letterpress such a large area like this the ink would start to break up and you'd have some beautiful imperfections. I add two layers to do this, one black, and one white for some irregularity.

Start two new layers at the top, and name these 'White' and 'Black'. I'm quite a stickler for keeping my layers organised in groups and naming things properly, so if you've been following correctly so far your layer palette might look something like this.



Lets start on the 'Black' layer. I've been building up a brushes collection over the years from other designers and some of my own, but if you've not got any 'dirty' brushes available then you can't go wrong with the eight starter packs from Eduardo Recife of Misprinted Type. Just click on 'Goodies' and download the .abr files. To load these in Photoshop, is really simple but Adobe do a great job of hiding the menu.



With the brushes palette open, click on the tiny arrow top right to bring a dropdown menu, and locate 'Load Brushes'. From there you can locate the files you've just downloaded and they'll appear in your palette.



Ctrl/Cmd + click on your AW layer again (Step 5) and then select the White layer. With a brush of your choice loaded and the colour swatch set to white paint over the top of the the AW. Because you have the marching ants up, you're only painting inside the selection and not onto the green area. This could also be done with a layer mask afterwards if you prefer not to have the marching ants up as a distraction.



You'll probably notice the brush marks are a little too strong, but thats OK, don't change it from white, just lower the layer opacity to around 35% and you'll get a much more subtle effect. Then continue the same process for the Black layer and experiment with the layer opacity to get just a few subtle dark lines.

This part of the tutorial is very much personal taste, you'll only get the hang of it once you have a go yourself.

7) Thats it

If you've made it this far you've learned to make a faux letterpress effect for your artwork. The same principles can be applied to multiple grouped layers for more elaborate artwork than my simple AW. I've added the 'after' badge back in there for good measure. Here's a quick animated gif of all the steps.



If any of the steps are unclear please leave a comment below and I'll answer them as best I can, good luck!

------