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.

  • http://blog.callumchapman.com/ Callum Chapman

    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!

  • http://www.lipelip.com lipelip

    Nice selection.

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

  • http://john.onolan.org JohnONolan

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

    • http://www.ideiasfrescas.com tiago

      Hi John.

      Where do you guys do this kind of avatars??? Fantastic

      Regards
      TV

  • http://www.dcypher.co.uk Webbo

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

  • http://schwartzbydesign.com duSchwartz

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

  • http://www.designtank.ws Chris Raymond

    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.

  • http://www.divadev.com/ Toby Cummings

    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.

  • scott b

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

  • http://designsgenius.com/ Sebyrar

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

  • http://www.johncartago.com John

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

  • http://drawne.com Andy Feliciotti

    some examples then a tutorial, great stuff

  • http://www.valeriovaz.com Valério Vaz

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

  • http://www.charlotteadvertisingagency.net Youssef El Hodaigui

    Hey this is good collection keep it up.

    I like many of these collection.

  • http://www.websiteme.co.uk Jonny Pioww

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

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

  • Jack

    Nice tut…many thanks.

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

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

  • http://www.joyologo.com/ joyologo design shop 2.0

    nice showcases thanks for the collection..

  • http://www.SohTanaka.com Soh

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

  • http://www.jefffinley.org Jeff Finley

    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.

  • http://www.tlisoftware.com/ website desing

    Excellent source of information. Keep up the good work!

  • http://iniwoo.net/ T-Law

    Great list of creative designs, thanks.

  • Suwat

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

  • http://www.nzcreativewebdesign.com Rob

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

  • http://www.golpesdepincel.com evertt d esousa

    very thanks for you
    Nice post

  • http://moda24.de/ Moda

    Awesome inspiration for every designer! Thank you!

  • http://www.dev.my dev.My

    Nice Mini Tutorial

  • http://cnn.com AJ

    What font is that? Pretty slick

    • Jack

      I could be wrong but I think the font used is museo 500

  • http://www.miraztutorials.com huwaw69

    Cool text effect.. hahaha simple and easy

  • http://www.crearedesign.co.uk James Mann

    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

  • http://blog.codesignstudios.com Dennison Uy

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

  • http://photorestorationretouching.com/ photo retouching

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

  • http://kapsarovb.blogspot.com/ Blagoj

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

  • Alessio

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

  • http://multilayerdesign.com Kev Jaques

    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

  • http://twitter.com/saurabhshah saurabh shah

    nice showcase collection.. like the last tip..

  • http://www.patrickortman.com Patrick

    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!

  • http://www.berndartmueller.at/ Bernd Artmüller

    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…

  • http://www.alkhalilgraphics.com man breant

    nice tut!

  • http://www.colorglance.com tauseef

    nice designs colection … better then the tut

  • http://www.inspireling.com Inspireling

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

  • http://www.aledesign.it aledesign.it

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

  • http://line25.com Chris Spooner

    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!

  • http://blog.popstalin.com Pop Stalin

    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.

  • http://www.kent-website-designer.co.uk/ Website Design Kent

    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.

  • http://www.tutorialking.eu Thomas | Tutorial King

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

  • http://badalyan.com Alex

    Thanks! This really helped!

  • http://designsgenius.com/ Sebyrar

    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 !

  • http://laranzjoe.blogspot.com/ lawrence77

    wow looks cool!

  • http://webprocafe.com welshstew

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

  • http://www.photorestorationretouching.com/es/inicio.html restauración fotografica

    Interesante y muy logrado. Gracias!

  • http://blog.designnerd.net Nikki

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

  • Matt

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

  • Tim

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

  • http://pauldewouters.com paul

    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!

  • Mghmg

    thanks I’ve been looking for tutorial like this one

  • http://pablo.folkloreskate.com Jorge Martinez

    thanks very nice tutorial lo pondre en practica en mi web

  • http://www.racunovodstvo.tag.si Knjigovodstvo

    Some great advice there, excellent tutorial

  • http://thewebblend.com louis gubitosi

    awesome tutorial man. Will be using this soon

  • http://www.w3spor.no W3Spor

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

    have a beautyful day!

  • http://www.csselite.pl csselite

    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.

  • http://www.parweb.fr/ parweb

    witch font do you use for this tutorial ?

    • http://www.lachlansleight.com Mptp

      It looks like Museo to me. (not certain though)

  • http://www.joyoge.com/ joyoge designers’ bookmark

    nice effect, thanks for tutorial and inspire..

  • gc

    +1 on the font used please?

    I’d like to purchase this.

  • http://kashifkhawaja.wordpress.com Kashif Khawaja

    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

  • http://newevolutiondesigns.com Tom – New Evolution Designs

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

    Thanks!

  • beli

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


    Webdesign Stuttgart

  • http://theramsblog.co.cc/ aHan

    Awesome effect!

  • josephine

    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.

  • http://www.nburmandesign.com/home/testimonials.php Multimedia Design

    Thanks for the tutorial and examples. Nicely done.

  • Koala

    Tnks

  • http://www.tutorial3d.it stefanobeck

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

  • http://www.surrealisitcsharks.wordpress.com 2hands10fingers

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

  • http://www.straydogmarketing.com Rachelle

    Sweet thanks!

  • Lollylost100

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

  • http://www.psprint.com/stickers-labels Ashely Adams : Sticker Printing

    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.

  • Mostafa

    good but complicated

  • brad

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

  • http://www.whatthef.co.uk Ian

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

  • http://www.siteplusdesign.com Kiran Shinde

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

  • Glenn Van Bogaert

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

  • http://www.edpalomo.com Edward Palomo

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

  • jon

    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.

  • http://www.dynamicwp.net Eko Setiawan

    Cool..Thanks Chris…Great list for inspiration.

  • http://www.anthonyherron.co.uk Anthony Herron

    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

  • richard hughes

    i like it – thanks for sharing

  • Jay

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

    Thanks