Post Pic

How to create the Letterpress Effect in Photoshop

This small and simple tutorial will teach you how to create a letterpress effect that you often see in Mac designs and web 2.0 designs.
The navigation text of the Apple website is a great example of this.
The effect can also be made in css code, but here I’ll show you just for Photoshop.

1. Adjusting the background.

In your document, you should make sure the background is dark enough. I recommend to use atleast 20% black in your main color.
The darker, the better… Although pitch-black doesn’t really look good either.


2. The text

Write the text, it should be brighter than the background. Give it atleast 20% of white (that’s the same as 80% black). You can change this later on.
If you don’t do this, the whole effect will be ruined since we’re attempting to create a realistic effect includding light and shadow.


3. Apply shadow

Open the style menu by double clicking on the text layer.
Apply a Drop Shadow.
This shadow will actually not be a shadow at all, instead, it will be the light.

Use the following settings:

Letterpress settings

Letterpress Settings

Also making the curve a bit more hollow can make the effect softer.
Note that the angle is set at 90°. You can also use 120° (default) when working with big letterpressed texts or shapes.


Extra: Adding more texture in the background

To get a more realistic feeling you can add noise in the background, do this as described below:
Duplicate the background layer (the one with the dark color on) by either dragging the layer on the new layer icon or by selecting the layer and pressing CTRL+J (Windows) or CMD+J (Mac).
With the new (so the upper one) selected, click Filter in the menubar at the top. Noise > Add Noise.
Set the amount to 2%. Distribution to Uniform. And check Monochromatic. Apply this filter by hitting OK.

Being subtle in design makes everything more pleasant to look at and harder to define how the effect is accomplished. (keep that in mind!)
So let’s make this noise more subtle by changing the layer opacity to 40% (can be done in the layers panel or layer style window).


My result:

Letterpress result

LetterPress Result

Take a look at the .PSD file:

Download here!


Show me your results!

Maybe you made a whole web layout based on this effect, or just created your first time letterpress by this tutorial.
I’ll be pleased to watch your results and help you out if you want to!


Reblog this post [with Zemanta]

10 Responses

02.20.10

Appreciation for the following helpful post! I additionally possess a webpage and i’m wondering, where can i download this kind of amazing theme similar to yours?

02.20.10

You can buy these on http://www.themeforest.com
If you use my referral link http://themeforest.net?ref=twistereli and buy a theme, you get a free ad on my site here!

02.20.10

Simple but useful tutorial. If this is associated with other photo it will come up with a great design.
.-= Website design´s last blog ..e-commerce =-.

I hope that you can also make a tutorial in free software like GIMP. I’m you will be helping lot of person by doing that.

02.20.10

Thanks for this tutorial. I can easy follow the steps because you have included some screenshots of the process. Great post.

02.20.10

You have a fantastic post here, really helpful. Very well written I shall be bookmarking the website and subscribing to your feed so i can regularly read content of this quality.

02.20.10

Great article. Waiting for more.

02.20.10

Great photoshop tutorial, thanks for sharing !

02.20.10

Simple but nice tutorial. Thank You !
.-= Mow Design´s last blog ..19 Best Fresh Photoshop Web Design Layout Tutorials =-.

02.20.10

Thanks for the tutorial and the PDS file! Cool effect. You misspelled ‘Letterpress’.

Leave Your Response

* Name, Email, Comment are Required


About Us

I recently started my higher education as a Graphic Designer and I will be running the Interactive Design part of it. That includes photography, making movies, flash animations and web design and the design of web applications.

Learn More About Us

Write For Us

Want to write an article for us? Just go for it and get your name out. The good part compared to others is that your article DOESNOT have to be exclusive, meaning you can have it on your own website too!

Read More Details