Web Design Trend Showcase: Letterpress Text Effect

The trend that has become commonly known as ‘the letterpress effect’ has managed to make its way into a range of website designs. The effect itself is often added to text headers and buttons, giving an inset or debossed appearance. Take a look at this roundup of great examples of this trend, and follow on to a mini tutorial outlining how to create this effect in your own designs.

Create Your Own Letterpress/Inset/Debossed Text

The effect itself can be easily replicated using the layer styles built right in to Photoshop, follow these simple steps to create your own letterpress style text effect.

Type out your desired text into your Photoshop document, maybe this could be part of your website header or a button graphic.

Double click on the text layer to open the layer styles properties. First, add a gradient overlay to the text. Choose two swatches at a slightly darker shade to the background colour and position the angle straight downwards.

Next, add an Inner Shadow to simulate how the light would form a cast of shade on an inset shape. Alter the distance according to how deep you would like to effect to be, using very subtle amounts usually gives the best results. Drop the opacity to around 30%.

Finally, add a Drop Shadow to the text. By default the Drop Shadow produces a dark, blurred shading effect, swap around the options such as the Blend Mode, Color, Distance and Size to create a very fine highlight along the bottom edges of the letters.

The final image shows how these simple techniques can give the impression of a realistic effect. The subtle gradients, fine shadows and highlights help represent how the effect would appear in reality.

Rather than using a shade of the background colour on the Gradient Overlay, try a very dark grey/black to give a cool Adobe CS4 style effect to your text!

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Iggy's design tutorials and articles at his Web Design Blog or follow his daily findings on Twitter.

Awesome article Chris, I’ve always wondered how the “edge highlight” was achieved – I had no idea that it was with a drop shadow! I’ve always tried to do it with an inner glow, or 1px inside stroke – unsurprisingly they don’t work very well! :)

Not sure I’d consider this to be a digital representation of letterpress at all. More like simulating text carved into stone, a la the Roman era. Letterpress doesn’t have an inner shadow, for one thing.

I love the collection you have here, it is something I would aspire to as a web designer. I have the Master Collection at home so will be able to put this to practise. Keep posting designs and tutorials on here as I have marked you as one of my favourites, it is people like you that will enable me to develop positively as a web designer :).

One thing a lot of designers don’t seem to experiment with much is contours, experiment with them as some cool effects can be created.
The cut outs are a better idea, allowing the background to show through, at least then you can still have some kind of detail.
Debossed does look better than embossed but don’t over abuse it ;) as 6 months from now we will all be talking about over use of debossed effect ;) you can see it already heheh

Technically, if you are going to call this “Letterpress” and if you’re basing that on letterpress blocks the text should be raised not embossed. I mean, the definition of letterpress is a reversed, raised surface is inked and then pressed into a sheet of paper to obtain a positive right-reading image.

I’d hate to see new designers thinking of letterpress as something it’s not.

Hey Chris, Thanks for this post, really nice effect! I have to say I’m loving this blog more and more everyday! I really like the posts like this one where you show a whole lot of examples of a style and then at the bottom give a tut on how to do it :)

Thanks for this tutorial! I’ve been serching for a tutorial on this, I’m a Photoshop beginner.
Also, I really like how you added so much value to what could have been yet another “insiration roundup”.
I always enjoy reading you!

Hi,
Good one – thank you. I’m using Fireworks and it’s nearly impossible to approach the same effect using only shadows. However I managed to create such effect by coping text – >convert to curves -> ungroup -> select them all and union -> duplicate -> move copy 1px up -> select them two -> punch and this way I’ve got “shape” of shining elements.
Cheers – Matt.

Wow……that was a nice collection. And thanks for the tutorial….it was very simple to understand. I’ve been actually looking for such a tutorial. These letterpress effects do look good. Thanks once again.

Leave a response

Subscribe for email updates

Don't miss a post! Sign up for email notifications of new content on Line25. Every subscriber gets a free handy pack of web shadows.

About Line25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.