Line25

Web Design Trend Showcase: Letterpress Text Effect

Read the full post

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.

Deaxon.com

Letterpress text example

SarahLongnecker.com

Letterpress text example

365DaysOfAstronomy.com

Letterpress text example

AlexBuga.com

Letterpress text example

PowerSet.com

Letterpress text example

ESOrganizers.com

Letterpress text example

LennartBasler.com

Letterpress text example

RyanRoberts.co/uk

Letterpress text example

LeeMunroe.com

Letterpress text example

BohemianCoding.com

Letterpress text example

MJarosz.com

Letterpress text example

Apple.com

Letterpress text example

Tutorial9.net

Letterpress text example

DailyChallenge.org

Letterpress text example

TheNorik.com

Letterpress text example

From-The-Couch.com

Letterpress text example

Inspireling.com

Letterpress text example

BrightKite.com

Letterpress text example

Postbox-Inc.com

Letterpress text example

Saturized.com

Letterpress text example

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.

Letterpress text effect tutorial

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

Letterpress text effect tutorial

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.

Letterpress text effect tutorial

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%.

Letterpress text effect tutorial

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.

Letterpress text effect tutorial

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.

Letterpress text effect tutorial

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!

Subscribe by Email

Don't miss an update! Have new content delivered straight to your inbox.

Written by Chris Spooner

Chris Spooner is a designer who has a love for creativity and enjoys experimenting with various techniques in both print and web. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

90 Comments

  1. Nice collection, I love the 365 Days Of Astronomy site, love the lighting effect in the background and how you can see through to it through the logo.

    It’s a nice collection, but it’s impossible to beat the real thing – I love letterpress!

    Cheers for the round up!

  2. lipelip says:

    Nice selection.

    The 365DaysOfAstronomy.com ‘s link isn’t working properly though

  3. JohnONolan says:

    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! :)

  4. Webbo says:

    Thanks Chris, another really great post. I like the letterpress look, it creates a nice effect websites.

  5. duSchwartz says:

    I find that instead of using drop shadow, bevel and emboss directed down with a style of outer bevel looks more realistic.

  6. 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.

    A nice effect, but again, don’t think it’s letterpress.

  7. I love the letterpress look. It’s so clean and yummy. Thanks for the tutorial! I’ve seen it done many ways, but this tutorial much easier to accomplish.

  8. scott b says:

    good god, another PS effect run amok. has originality really died, only to be replaced by me-too-ism?

  9. Sebyrar says:

    I’m lookink for this letterpress tutorial sice long time. It’s lovely effect.

  10. John says:

    I love this effect, I’ve been using it lots lately :)

  11. some examples then a tutorial, great stuff

  12. Cris, it’s a reaaly good colection and in the end, a tutorial! Good job :)

  13. Hey this is good collection keep it up.

    I like many of these collection.

  14. Jonny Pioww says:

    That’s a quality showcase and an even better short tutorial.

    Chris, your greater exposure recently is well deserved for you have excellent talent.

  15. Jack says:

    Nice tut…many thanks.

    Here’s a nice vid showing a more traditional approach.

    http://www.youtube.com/watch?v=Iv69kB_e9KY

  16. nice showcases thanks for the collection..

  17. Soh says:

    Awesome tutorial and examples. Learned something new today :-)

  18. Jeff Finley says:

    Very nice effect! I think with a little more effort, it could have a more “crafty” look instead of the laser cut super sharp look.

  19. Excellent source of information. Keep up the good work!

  20. T-Law says:

    Great list of creative designs, thanks.

  21. Suwat says:

    Very nice examples, we will definitely make good use of the tutorial at our web design studio where I work.

  22. Rob says:

    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 :).

  23. very thanks for you
    Nice post

  24. Moda says:

    Awesome inspiration for every designer! Thank you!

  25. dev.My says:

    Nice Mini Tutorial

  26. AJ says:

    What font is that? Pretty slick

  27. huwaw69 says:

    Cool text effect.. hahaha simple and easy

  28. James Mann says:

    Hey guys, i like some of these designs, i can imagine that they are pretty simple to get coded up and functioning. Simple templates make for less headaches

  29. Dennison Uy says:

    So I guess it’s called letter press because it gives the impression that the letters were uhm, pressed.

  30. A really nice set of designs. Enough here to keep me inspired for ages!

  31. Blagoj says:

    The list is nice, and tut for a treat! Cheers!

  32. Alessio says:

    i like AlexBuga.com site, very simple example of letterpress

  33. Kev Jaques says:

    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

  34. saurabh shah says:

    nice showcase collection.. like the last tip..

  35. Patrick says:

    Everything old is new again, there was a time in the mid 1990s where this effect was common on websites, too.

    But of course, these days it’s much more beautiful, and web designers can be more creative with it. Thanks!

  36. this effect is really great, I also use it more often in my designs. I think it shouldn’t be used on small buttons, where anyone can read the text on the button and only on bigger font sizes.

    Thanks mate…

  37. tauseef says:

    nice designs colection … better then the tut

  38. Inspireling says:

    I’m honoured to be featured amongst some real web rockstars! Thanks, Chris!

  39. aledesign.it says:

    Some background are fantastic. Nice Collection..A good post for every graphic!

  40. Thankyou for the comments everyone, this is definitely one trend that seems to be creeping in everywhere. I wonder if it will end up being seen with negative views in the near future!

  41. Pop Stalin says:

    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.

  42. Yes, its a nice text effect. But using Layer Blending on rasterized Text, you can achieve some great looking text just by trial and error.

  43. Thanks Chris, great inspiration and tutorial. I featured the tutorial on TutorialKing

  44. Alex says:

    Thanks! This really helped!

  45. Sebyrar says:

    is it possible the letterpress effect run with a min-size. I explain me, when I try with a garamond font, 17pt of size, the effect isn’t clean !

  46. lawrence77 says:

    wow looks cool!

  47. welshstew says:

    Nice collection Chris. We also use this effect on our forum (webprocafe) be sure to check it out.

  48. Interesante y muy logrado. Gracias!

  49. Nikki says:

    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 :)

    Keep these ones coming!! :)

Comments are now closed