March 30, 2009

How to achieve the new and trendy letterpress effect with Photoshop

Posted in Design, Tutorials by Gergely Marton | Tags: Design, Tutorials, Typography

One 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).
letterpress_cap1

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

letterpress_cap4_a

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:

letterpress_cap7

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

letterpress_cap7

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.

Author: Gergely Marton (20 Articles)

Marton Gergely 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.

13 Comments to “How to achieve the new and trendy letterpress effect with Photoshop”

April 1, 2009 at 9:21 pm
Sean Hurley says:

This has to have been the simplest way to do this! Thanks so much I am going to use this like its going out of style.
April 17, 2009 at 3:38 pm
Bernd Artmüller says:

hi…thanks for this tutorial…

and you really have a great blog and blog design…

cheers, bernd
May 19, 2009 at 12:26 pm
T-Law says:

Great effect, thanks.
February 10, 2010 at 9:47 pm
Mark from NYC says:

Maybe one reason the “letterpress” effect hasn’t seen much use lately is that is was overused in the mid-90s. Before Photoshop had the Inner Shadow feature, I used to make it with layers and cutouts and drop shadows. It was a true pain, but the results were striking. The current trend appears to be for a more subtle, reversed embossed version. Because it’s so easy to do, don’t be surprised if it’s overused again, probably before the end of 2010. Still, it’s quite beautiful. Thanks for the post.
May 5, 2010 at 12:56 pm
juliaap01 says:

hiiiiiiiiiiiiiiiiiiiiiii
That is realy great it is good to see.I hope we will see a lot more.Well done
====================
juliaap01
Home Design
June 7, 2010 at 12:26 am
flower tattoo designs says:

Very interesting post. Keep writing dude !
July 21, 2010 at 12:06 pm
Medyumlar says:

Very interesting post. Keep writing dude !
August 5, 2010 at 8:39 pm
Coloring Pages says:

I enjoyed this. Where is your contact details though?
August 6, 2010 at 1:56 am
Wholesale baseball hats says:

Took me awhile to read all the comments, but I really love the article. It proved to be very useful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! I’m sure you had fun writing this article. Comfortably, the article is really the sweetest on this precious topic.
August 6, 2010 at 2:02 am
Monster Energy Hats says:

I recently came across your blog and have been reading along.
I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading.Nice blog,I will keep visiting this blog very often.
August 6, 2010 at 12:44 pm
Coloring Pages says:

Adding to my bookmarks thanks. Needed more pictures though.
August 9, 2010 at 2:06 pm
Replica jerseys says:

Very interesting post. Keep writing dude !
August 14, 2010 at 7:30 pm
lenen says:

Over de voor- en nadelen van het afsluiten van een lening zonder BKR-toetsing.