Create A Trendy Letterpress Header

by TutsArena - Tutorials

Letterpress has emerged as a huge trend in 2009. Although the letterpress effect is used on a number of websites, you’ll notice it most with regard to online services simply because the effect is eye catching and will draw attention to itself easily.

Letterpress is a fairly simple technique with no “right” way of acheiving the effect.  There are several different ways to get this effect, however, we will show you one of the quickest and most desirable techniques.  While we show you how to achieve this effect, it’s best to play with the styles. This is a Photoshop tutorial.

Examples

The Final Product

Letterpress Tutorial

Step 1 – Create your background

This effect works on any color background, so choose a color you’d like to work with (in the example, we use a fairly heavy gradient, however, the effect works best with solid colors or slight gradients).  In our example we used #121f28 and #000000, or black and added uniform monochromatic noise at 1.75%.

Letterpress Step One
Feel free to use this background as a starting point or simply download the PSD at the end of the article.

Step 2 – Adding Text

In this step, add your text.  I typed Template Tuts with the font Myriad Pro with the color #f4f4f4 and a tracking value of -50.  Tracking is simply the letter spacing and can be changed through the “Character” window.

Letterpress Step 2

Step 3 – The Effects

Start off by going to your Blending Options and adding a gradient overlay.  Remember when we said to play around with the settings to get the desired effect?  This is where that comes into play.

Letterpress Gradient Overlay
Our gradient overlay settings.

Letterpress Inner Shadow
Our inner shadow settings (use a dark color for your shadow).

Letterpress Drop Shadow
Use a light color for your drop shadow, the purpose of this setting is to highlight a part of the text to make it “stick up”.

That’s It!

You should have an effect similar to ours.  If you couldn’t quite manage to get it, simply download the PSD and see for yourself exactly how we did it!

(letterpress.psd)

About the author

TutsArena is dedicated to providing the best, free web design tutorials.


Visit TutsArena's Website | All Articles From This Author

No Comments


Sponsors

Recent tutorials

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.