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!

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

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

152 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. Valério Vaz says:

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

  50. Matt says:

    Thanks for the examples, I dont think I really understood the style until the last one…

  51. Tim says:

    These guys are also using such an effect: http://readytotalk.net/

  52. paul says:

    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!

  53. Mghmg says:

    thanks I’ve been looking for tutorial like this one

  54. thanks very nice tutorial lo pondre en practica en mi web

  55. Some great advice there, excellent tutorial

  56. awesome tutorial man. Will be using this soon

  57. W3Spor says:

    Thank you for good tutorial! Very useful and good inspiration.

    have a beautyful day!

  58. csselite says:

    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.

  59. parweb says:

    witch font do you use for this tutorial ?

  60. nice effect, thanks for tutorial and inspire..

  61. gc says:

    +1 on the font used please?

    I’d like to purchase this.

  62. Thanks for this wonderful tutorial. Learning from your tutorial i managed to put up a CS4 Style file which can be downloaded here. http://tinyurl.com/lxedo5

  63. Well done, I have been trying to find the perfect pixel and percentage settings for a lil while now.

    Thanks!

  64. beli says:

    I think that your collection is good. Some backgrounds are really fantastic.


    Webdesign Stuttgart

  65. aHan says:

    Awesome effect!

  66. josephine says:

    I got close to the letterpress effect, following the tutorial, but I am new with Photoshop and I got a bit lost. The text has not the same strong effect in depth.

    Any advice? will appreciate it.

  67. Thanks for the tutorial and examples. Nicely done.

  68. Koala says:

    Tnks

  69. stefanobeck says:

    Thankyou, it’s a godd and simply tutorial, I want use for my composition in Adobe after effects

  70. No color codes? I couldn’t exactly acheive the same affect without understanding which colors are darker and whatnot.

  71. Lollylost100 says:

    Just make sure you’re using 32-bit RGB, otherwise you will have problems making this effect :).

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

  73. Mostafa says:

    good but complicated

  74. brad says:

    What typeface did you use for this tutorial Line 25?
    I really like it. Thanks for Tut!

  75. Ian says:

    Ah ha! So that’s how it’s done!
    So easy too…Thanks.

  76. Kiran Shinde says:

    Nice Easy Trics.. I like Font which u used as excample. What is the name of Font?

  77. Glenn Van Bogaert says:

    Nice tutorial. But I’m wondering, how you make a letterpress effect on a 1px line?

  78. great tutorial…i’ll definitely use these for my designs! letterpress is but cool…

  79. jon says:

    thanks for this, i dont consider myself a noob in photoshop, but this gave me nothing. my end effect looks absolutely nothing like yours, and i followed it step by step, and i checked it twice.

  80. Eko Setiawan says:

    Cool..Thanks Chris…Great list for inspiration.

  81. On the tutorial section, I can’t help but think you’ve missed pointing a step out Chris.

    After adding a gradient to the font. Shouldn’t the next step be to copy the layer, turn the fill to 0% and then add the effects as desrcibed on the copied layer?

    I know this is at least one way of doing it. It would also correlate with the fact in the screen grabs adding the inner and outer shadow, the gradient overlay box isn’t ticked?

    Nice work though

  82. richard hughes says:

    i like it – thanks for sharing

  83. Jay says:

    Hi Chri,
    Great letter press effect. I really like the font, what is it and where can I get it from?

    Thanks

Comments are now closed