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!
Thanks for the examples, I dont think I really understood the style until the last one…
These guys are also using such an effect: http://readytotalk.net/
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!
thanks I’ve been looking for tutorial like this one
thanks very nice tutorial lo pondre en practica en mi web
Some great advice there, excellent tutorial
awesome tutorial man. Will be using this soon
Thank you for good tutorial! Very useful and good inspiration.
have a beautyful day!
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.
witch font do you use for this tutorial ?
It looks like Museo to me. (not certain though)
nice effect, thanks for tutorial and inspire..
+1 on the font used please?
I’d like to purchase this.
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
Well done, I have been trying to find the perfect pixel and percentage settings for a lil while now.
Thanks!
I think that your collection is good. Some backgrounds are really fantastic.
Webdesign Stuttgart
Awesome effect!
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.
Thanks for the tutorial and examples. Nicely done.
Tnks
Thankyou, it’s a godd and simply tutorial, I want use for my composition in Adobe after effects
No color codes? I couldn’t exactly acheive the same affect without understanding which colors are darker and whatnot.
Sweet thanks!
Just make sure you’re using 32-bit RGB, otherwise you will have problems making this effect :).
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.
good but complicated
What typeface did you use for this tutorial Line 25?
I really like it. Thanks for Tut!
Ah ha! So that’s how it’s done!
So easy too…Thanks.
Nice Easy Trics.. I like Font which u used as excample. What is the name of Font?
Nice tutorial. But I’m wondering, how you make a letterpress effect on a 1px line?
great tutorial…i’ll definitely use these for my designs! letterpress is but cool…
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.
Cool..Thanks Chris…Great list for inspiration.
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