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.
Deaxon.com
SarahLongnecker.com
365DaysOfAstronomy.com
AlexBuga.com
PowerSet.com
ESOrganizers.com
LennartBasler.com
RyanRoberts.co/uk
LeeMunroe.com
BohemianCoding.com
MJarosz.com
Apple.com
Tutorial9.net
DailyChallenge.org
TheNorik.com
From-The-Couch.com
Inspireling.com
BrightKite.com
Postbox-Inc.com
Saturized.com
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!
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!
Nice selection.
The 365DaysOfAstronomy.com ‘s link isn’t working properly though
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! :)
Hi John.
Where do you guys do this kind of avatars??? Fantastic
Regards
TV
You can get the images from http://gravatar.com/ It works in conjunction with your email, and automatically added to any blog you post on with that email.
http://www.faceyourmanga.com/faceyourmanga.php?lang=eng
;)
Thanks Chris, another really great post. I like the letterpress look, it creates a nice effect websites.
I find that instead of using drop shadow, bevel and emboss directed down with a style of outer bevel looks more realistic.
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.
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.
good god, another PS effect run amok. has originality really died, only to be replaced by me-too-ism?
I’m lookink for this letterpress tutorial sice long time. It’s lovely effect.
I love this effect, I’ve been using it lots lately :)
some examples then a tutorial, great stuff
Cris, it’s a reaaly good colection and in the end, a tutorial! Good job :)
Hey this is good collection keep it up.
I like many of these collection.
That’s a quality showcase and an even better short tutorial.
Chris, your greater exposure recently is well deserved for you have excellent talent.
Nice tut…many thanks.
Here’s a nice vid showing a more traditional approach.
http://www.youtube.com/watch?v=Iv69kB_e9KY
nice showcases thanks for the collection..
Awesome tutorial and examples. Learned something new today :-)
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.
Excellent source of information. Keep up the good work!
Great list of creative designs, thanks.
Very nice examples, we will definitely make good use of the tutorial at our web design studio where I work.
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 :).
very thanks for you
Nice post
Awesome inspiration for every designer! Thank you!
Nice Mini Tutorial
What font is that? Pretty slick
I could be wrong but I think the font used is museo 500
Cool text effect.. hahaha simple and easy
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
So I guess it’s called letter press because it gives the impression that the letters were uhm, pressed.
A really nice set of designs. Enough here to keep me inspired for ages!
The list is nice, and tut for a treat! Cheers!
i like AlexBuga.com site, very simple example of letterpress
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
nice showcase collection.. like the last tip..
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!
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…
nice tut!
nice designs colection … better then the tut
I’m honoured to be featured amongst some real web rockstars! Thanks, Chris!
Some background are fantastic. Nice Collection..A good post for every graphic!
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!
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.
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.
Thanks Chris, great inspiration and tutorial. I featured the tutorial on TutorialKing
Thanks! This really helped!
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 !
wow looks cool!
Nice collection Chris. We also use this effect on our forum (webprocafe) be sure to check it out.
Interesante y muy logrado. Gracias!
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!! :)