How to achieve the new and trendy letterpress effect with Photoshop

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

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

• A step-by-step guide on the logo design process
• How to generate well designed price tags for your online store products
• Inspiration: The Art Of Rob Shields
• Creating a Polaroid Photo Effect In Photoshop
• Inspiration: The Art Of Genaro Desia Coppola