10 Wonderful Letterpress Type Tutorials

Sep 26 2009 by Jacob Gube | 26 Comments

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

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

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

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

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

Typography Inset from 5 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

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

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

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

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.

Related Content

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.

26 Comments

Andrew Houle

September 26th, 2009

Nice roundup, thanks for the MyInkBlog inclusion!

Janko

September 26th, 2009

I love this nice little technique. Thanks for including my tut :)

Dainis Graveris

September 26th, 2009

I literally love this article! I had found that Tutcandy letterpress tutorial some time ago, but lost it and never found again..not until now :)

Che - TUTcandy

September 27th, 2009

HUGE thanks for adding my tutorial to your awesome list…

Web 2.0

September 27th, 2009

Great tutorial collection, was very useful, thanks..

Liora

September 27th, 2009

I liked the Advanced Photoshop Techniques for Web Designers – thanks.

Johnson Koh

September 28th, 2009

Cool collection. Thanks for the useful list.

Designect.Com

September 28th, 2009

Great, i very like. Thanks!

Nicholas Foo

October 3rd, 2009

nice set of tutorials. Inner shadows just rock!

Mahmudur Rahman

October 4th, 2009

Very attractive and informative Letterpress Type Tutorials links, thanks for shearing this nice post.

lexing

November 1st, 2009

Love the letterpress concept. So real and 3d effect feature.

Ed Hardy

January 25th, 2010

what will happen when people read this post…

starkeyart

February 14th, 2010

In every search I do this site comes up first! I know how to do letterpress in Photoshop… I need a tutorial to actually DO letterpress. The real thing.

Patrick

June 11th, 2010

What I like most is the “Letterpress Emboss Text Effect”. I really like the emboss presentation of the letters. I hope you can share more to us.

Jass

July 29th, 2010

Good collection..! thanks..! I have been looking for this for a long time.

Windows

September 7th, 2010

everyone will be excited when see this post. Very attractive and informative Letterpress Type Tutorials links, thanks for shearing this nice post.

Win 7

September 7th, 2010

I need a tutorial to actually DO letterpress. The real thing.

cryoffalcon

March 9th, 2011

thanks for sharing the links, they were useful.
take care.

Robin Phelps

March 22nd, 2011

I’m sure I’ll be able to use this in a school design – great tutorial.

AL

April 6th, 2011

Thanks for sharing. Your teachings will be very useful. Thanks again!

drew

July 14th, 2011

Thanks for this post. I will be looking to do this for my web portfolio redesign.

Honee

November 13th, 2011

Great read! I’m loving the letterpress style lately and your post is fantastic! I’m learning a lot of ways how to do it.

Thanks for sharing! :)

Raahul

June 16th, 2012

Thanks Jacob! thanks you so much… i always see it and try it on photoshop but until now i was not able to insert Pro Art in it…now these tutorials are sooooooooooo cool and easy…

:D i felt like i installed this technique in my brain!

Leave a Comment

Subscribe to the comments on this article.