10 Wonderful Letterpress Type Tutorials

September 26th, 2009 by Jacob Gube | 16 Comments | Stumble It! Delicious

The letterpress type treatment (or as I call it, inset text treatment) can be easily done in Photoshop. In this article, you’ll find a collection of tutorials from various parts of the web that will teach you how to create this awesome text effect using common graphics applications (and a couple using just CSS).

Check out my own tutorial here on Six Revisions called How to Create Inset Typography in Photoshop. You may also want to peruse the Beautiful Examples of Inset Typography in Web Design collection for design inspiration and usage examples.

1. Web Design Trend Showcase: Letterpress Text Effect

The Line25 Web Design blog has a tutorial and showcase all-in-one article that features great examples of the text effect as well as a method for creating it in Photoshop.

2. Create a Sleek Pressed Letter Design

MyInkBlog, a great resource for graphic and web designers, regularly publishes awesome tutorials and one of them that features a see-through letterpress text effect.

3. Creating Editable Letterpress Styled Text in Illustrator

Creating your text in Adobe Illustrator lends you flexibility in resizing it without loss in fidelity. Learn to create the letterpress effect in Illustrator with this tutorial.

4. Grooveshark Design Style in Fireworks

Inspired by Grooveshark’s old user interface, this Adobe Fireworks tutorial walks you through the inset effect that design.

5. Letterpress Emboss Text Effect

Some individuals learn best by viewing video tutorials and here’s one that will walk you through the creation of the letterpress text treatment in real time.

6. Typography Inset-Advanced Photoshop Techniques for Web Designers

This article from Carsonified goes through five different Photoshop techniques for web designers, one of them being how to make the inset text effect.

7. Create a Letterpress Effect with CSS Text-Shadow

If you already use CSS3, this tutorial will teach you how to create the letterpress effect by using the text-shadow property and a simple png background (made in Photoshop).

8. Create Letterpressed Type Using Only CSS

This tutorial recreates the inset text/letterpress effect using only CSS2 specs.

9. Two Simple Ways to Create Text Embossing Effect

In this tutorial, you’ll find two methods on how to create the letterpress/inset text effect.

10. Quick tip: Inset Shapes, Lines and Text

Here is another method for creating the inset text effect applied not only to text, but also to Photoshop’s preset shapes/brushes and lines.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in distance-learning education, front-end development, and web accessibility. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.