Menu

10 Wonderful Letterpress Type Tutorials

Advertisement

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.

This was published on Sep 26, 2009

26 Comments

Andrew Houle Sep 26 2009

Nice roundup, thanks for the MyInkBlog inclusion!

John (Human3rror) Sep 26 2009

awesome. thanks!

Nice Collection, What About this Tutorial How to Create Letterpress Typography in Photoshop

Janko Sep 26 2009

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

Dainis Graveris Sep 26 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 Sep 27 2009

HUGE thanks for adding my tutorial to your awesome list…

Web 2.0 Sep 27 2009

Great tutorial collection, was very useful, thanks..

Liora Sep 27 2009

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

Johnson Koh Sep 28 2009

Cool collection. Thanks for the useful list.

Designect.Com Sep 28 2009

Great, i very like. Thanks!

Gergely Marton Oct 01 2009

Hey, nice list,
but I think you forgot one: How to achieve the new and trendy letterpress effect with Photoshop

Thanks!

Nicholas Foo Oct 03 2009

nice set of tutorials. Inner shadows just rock!

Mahmudur Rahman Oct 04 2009

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

lexing Nov 01 2009

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

Ed Hardy Jan 25 2010

what will happen when people read this post…

starkeyart Feb 14 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 Jun 11 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.

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

Windows Sep 07 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 Sep 07 2010

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

cryoffalcon Mar 09 2011

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

Robin Phelps Mar 22 2011

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

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

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

Honee Nov 13 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 Jun 16 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!

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners