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.
Related Content
Continue Reading
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
Stay connected with us:
WebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.
