How to achieve the new and trendy letterpress effect with Photoshop
Posted in Design, Tutorials by Gergely MartonOne of the most unexpected trends Smashing Magazine observed over the last months was the emergence of letterpress in Web design. Probably the most important reason for this trend is the simple fact that this technique has been rarely used until now. Few of the top web designers in various countries re-designed their website and used this effect to give it a new and trendy look. I will show you how to achieve this effect with Photoshop and how you can use it with in different ways.
1. You create a new document and type some text with a bold and square font (I used a 60px Myriad Pro colored #82cd00).

2. Right click on the text layer you’ve created and select Blending Options
.
3. Select Inner Shadow with the following settings:

These settings depend on the size of the text, so you can play around with these and preview it to fit your needs.
5. I’ve added a gradient on the text to make it more realistic. (used colors: #8ac000 and #87bc01)

6. The results are as we excepted:

That’s all there is to create a letterpress effect!
In the next few lines I will show you how to get the same effect on a gradient background and with the same text size.
1. Create a new document with white background color, select the Rectangle Tool and drag a rectangle:

2. Right Click on the created rectangle shape layer and select Blending Options -> Gradient Overlay and apply a gradient:

3. Select the Type Tool and type in some text (I used the same font as in the first example):

4. Select the text color with the eyedrop tool from the gradient below. It is recommended to select a darker color from the gradient so the text will be a little darker and can be easily read. It is nice if the color is the same as the gradient behind it so it gives you a nice and realistic effect.

5. Use the same effect as above, Inner Shadow to achieve the letterpress style. And we add a Drop Shadow to outline the text a little bit. It is recommended to use a lighter color for the drop shadow which makes it more realistic.
Here are the drop shadow’s settings:

That’s it! This is how it looks after finished:

I hope you will find this tutorial useful and it will help you keep up with the new web trends to create fresh and cool web layouts for you clients.
A few interesting and well designed sites using this effect will give you an ideea about using letterpress in web design projects.
Related Entries
About the author
Gergely Marton, is a self-tought web designer and developer with over seven years of experience. He owns his own little web design agency WebGurus, and runs this blog in his spare time. Usually the work gets more important for him than anything else, but he struggles to get some time to read and to play his violin.
-
http://www.rethinkseo.com Sean Hurley
-
http://www.berndartmueller.at Bernd Artmüller
-
http://iniwoo.net/ T-Law
-
Mark from NYC
-
juliaap01
-
http://tattoos4everybody.com flower tattoo designs
-
http://www.medyumburak.com Medyumlar
-
http://www.kidslikecoloringpages.com/category/tinkerbell Coloring Pages
-
http://www.stajump.com Replica jerseys
-
http://www.topgeldzaken.nl/lenen-zonder-bkr-toetsing/ lenen
-
http://www.caps-store.com monster energy hats wholesale
-
http://www.socfx.com/ Lou Sparx
-
qirrank
-
http://www.gcmachines.com/ oil plants
-
http://www.freebiejeebies-free-gifts.com klaudio
-
http://www.webdesigner.co.in Kate Brown
-
http://www.4ucreated.co.uk Norfolk
Sponsors
Recent Comments
- Ansh on FancyPlayer Revisited – jQuery Fancybox and Flowplayer Complete Integration
- Published Articles on Inspiration: The Art Of Luke Lucas
- Fast Business Loan on Create a Glass Text effect in Photoshop
- Fast Business Funding on Inspiration: The Art Of Luke Lucas
- Fast Business Funding on Create a live-update list effect with jQuery
Recent Posts
- Inspiration: The Art Of Fredy Santiago
- Freebie: Complete Web UI Kit for your next design
- Inspiration: The Art Of Rob Shields
- Freebie: Aluminium UI Buttons
- Inspiration: The Art Of Maxime Archambault




