Creating Editable Letterpress Styled Text
Tutorials | August 5th, 2009
A popular typography trend in web design and print design is letterpress styled text. This text styling is easy to do in Photoshop, but in Illustrator, it is super simple to create letterpress styled text while keeping the text editable. Utilizing the Appearance panel and Graphic Styles, you can quickly and consistently apply this style to any editable text and other vector objects.
Final Image
Below is the final text treatment we will be working towards.
Tutorial Details
- Program: Adobe Illustrator CS4
- Difficulty: Beginner
- Estimated Completion Time: 5-10 minutes
Step 1
Create a rectangle with the Rectangle tool (M) and fill it with a color of your choosing. I filled mine with a light blue color. I like having a background color on which the text can be placed to really see the highlights of the letterpress text. Still, you can create this tutorial on a white background.
Step 2
Type out some text with the Text tool (T) and chose a font. I am using the awesome Museo Sans 700 font. With the text still selected, take off any fill or stroke.
Step 3
From the pop-up menu of the Appearance panel, choose New Fill. Next, press the swatch thumbnail in the Appearance panel of the new fill and change the color to a darker shade of your background color.
Step 4
With the new fill selected in the Appearance panel, go Effect > Stylize > Inner Glow. In the Inner Glow dialog, change the Mode to Normal, the fill color (the swatch thumbnail to the direct right of the Mode drop-down menu) to a color slightly darker than your background color, the Opacity to 90 and the Blur to 2 px. You might have to play around with the Blur value depending on how big your text is. Now when you press the drop-down arrow of the new fill in the Appearance panel you can see the Inner Glow effect listed under it.
Step 5
With the text still selected create a new fill from the Appearance panel like you did before. After you created the new fill it will look like the Inner Glow effect you applied was lost, but it wasn’t. In the Appearance panel we have to be aware of hierarchy. When we created the latest new fill it was placed on top of the first fill. Rearrange the fills by dragging the newest fill below the first one in the Appearance panel.
Step 6
Select the latest new fill in the Apperance panel and change the fill to a darker color than your original text fill color. You won’t be able to see any change because the new fill is behind the first one.
Step 7
With the latest new fill selected, go Effect > Distort & Transform > Transform. In the Transform Effect dialog, change the Vertical Move to 1 px. This might need to be increase depending on the size of your text.
Step 8
Create a new fill from the Appearance panel like before and fill it with white. Place the new fill below all the other fills.
Step 9
With the white fill selected in the Apperance panel, go Effect > Distort & Transform > Transform. In the Transform Effect dialog, change the Vertical Move to -1 px. Again, this might need to be increased depending on the size of your text.
Step 10
All done! That was pretty easy. Moreover, your text is still editable! To make this technique more useful, we can create a Graphic Style. Select the text and press the New Graphic Style button in the Graphic Style panel. Now you can apply to Graphic Style to other fonts and even to other shapes and objects. Simply select some text or other vector paths and click the thumbnail of the graphic Style you just created.
Glad to see another tut from you on this site!
Please keep them coming.
I use this effect in photoshop all the time.
Great to see it in illustrator.
Ooh, this is terrific.
so fresh and so clean clean
More Than Love It!
Great technique, thanks for sharing!
Thanks for this tutorial
[IMG]http://img9.imageshack.us/img9/6231/captura518.th.png[/IMG]
Great effect. You do good work!
Finally a letterpress tut for Ai. Thank you.
nice typo tut.
thanks!!
Brilliant! Just what I was after.
Very good – this will help in future projects!
Hi Ryan perfect tutorial love the result of text could you please tell me the name of the second font you used in the final preview image thanks
Thanks! The font is Susa.
Great Tutorial ! Will help me in a new projects !!!
great tutorial! i was wondering how to do this in AI..
really amazing tutorial there ryan.
Nice Tutorial. Thank you for posting it.
Great tip, love the quality of the tutorials on this site always excellent.
Great tutorial and a nice simple effect which looks good. This will be good for me to learn use for new project. Thanks for sharing.
Amazing tutorial, i like the final result….so simple.
i’ll be waiting for next tuts…
awesome awesome awesome , you are great !
I know I can try to see if I can, but I’ll ask anyway. Can I use this in Adobe Illustrator CS2? I still haven’t upgraded to CS4 unfortunately.
I’m not sure. I think you should be able to apply the effects to the text, but I don’t think the Appearance panel will look the same.
Brilliant use of the appearance palette and transform effect Ryan! Great Work!
thanks for ai tutorial letterpress – i tried to create one by following your tutorial, but I still couldn’t create letterpress — all white, dark and original colors are piled up using stylize>transform.
I don’t know where I went wrong
I am newbie at Illustrator
Are you using CS4? What step did it start getting messed up?
Hi Rype, I got the same problem,it messed up at step 7.
Hi Josephine
You have to select Illustrator Effects instead of Photoshop Effects (both in Illustrator panel)
Fab tut!
Lovely effect, never knew what it was called until I saw this tutorial.
AWESOME TUTORIAL! I have been dieing to find a letterpress look in Illustrator and you have done it. I can’t wait to use this on a project. Great job!
Hey man! what a great tutorial!!, this is the first tutorial that I follow from you, Thanks is really helpful.
Absolutely gourgeous!!!
You have such a nice touch! Thank you very much
Out of curiosity what are the fonts you used in the last image?
Museo Sans, Susa, and Klavika Condensed
Hi…
Many thanks for this tutorial and all the others actually.
Very good explainations as compared with many tuto makers who simply don’t bother to give half the path through it. “dropping hint IN”
Ej:
http://designreviver.com/tutorials/icon-design-tutorial-designing-a-new-icon-in-illustrator/
“dropping hint OUT”
What s more, the design of your page is great (I mean it and I ll copy paste it to make my own … just kiding)
One thing about this tutorial. In CS3 at least, when you start giving glowing effects, people may get wrong if instead of using Illustrator effects, they use Photoshop ones (I did it … I m a beginner).
Best regards
As an absolute beginner to Illustrator, I’d like to say that this tutorial was very easy to follow. I have experience in Photoshop but I found Illustrator weird and confusing, and this tutorial did introduce me to some new techniques. Certainly very different to how it’s done in Photoshop anyway.
Thanks.
I tried! but my effect wasn’t that awesome though. ):
Pretty, but not letterpress. Letterpress has always regarded overimpression as poor-quality printing because it ruins the other side of the sheet. The ideal is called a ‘kiss’. It can be only barely felt, and only barely seen.
Maybe you could call it ’sunken’ or ‘embossed’ text instead?
I realize it is not true “Letterpress”, after all it is digital artwork. I’ve seen it described as such, and although it is not the technical term, I think it is a fair way of describing the effect even though it is not directly describing the printing technique. It is pressed letters, right?
Still, it might just create unneeded confusion. Some might get confused when talking about the “look” of Letterpress in digital art compared to the printing effect. So you might be right, changing it to “sunken” or “embossed” might be better. Really, I just like the Letterpress name better.
For some great Letterpress printing inspiration, check out Adventures in Letterpress.
Amazing !!!! Thank you so much for sharing it !
This is a fab tutorial!
What is the icon set that you used in the last image??
It is one I sell on iStock Web Icons (Reflections 2).
wow. great technique.. popular on the web.
seen lotsa photoshop tuts on this.
一直都在寻找这种效果的方法！
Great!
Thank you!
That’s cool, but I don’t have a little drop down box in the Fills of my Appearance palette. You must be using a newer version of Illustrator.
Awesome tutorial… But i cant get the final step! I don’t know what i am doing wrong please help!
The Transform effect or Graphic Style?
The graphic style
The graphic style.. It doesn’t create a typography graphic style
used to create such an effect in photoshop before. though it’s possible to achieve a similar effect, the required time was much longer. this new method will help me to save a lot of time.
thanks man.
keep up the good work…
Very nicely done! I’ve seen this done in PS but not AI. Thanks!
Clearly presented … many thanks. I’ve used this in Photoshop, but the pointers for doing so in Illustrator are much appreciated.
Why is this not offered as a downloadable style?
I can’t offer it as a download because of my contract I have with iStock. I know it sounds stupid, but I can’t offer any download I have created.
Ryan
thanks a bunch!
i’m a newbie n really liked what i see here…its neat!
I’m not sure I made it right. The corner of letter is like this http://auv.fileave.com/press.pdf
Any suggestion? Thanks
that’s cool, simple and easy but amazing.. thanks
Excellent Tutorial! Adding this site to my RSS Feeds now.
very nice style, thanks for the tut..
This tutorial is great! Thanks for making it. What are the three fonts used in step 10?
i love this technique !! but not as easy as Photoshop
Nice,
thanks a lot!
I didn’t have a dropbox either from my fill, but you can change the colour manually each time.
The possibility of making this into a graphic style is great!
Beautiful type tutorial, this letterpress effect looks very elegant. Thanks!
Million thanks! Already used for my portfolio website!
This is the greatest Illustrator tut I’ve seen in a long while. I feel like such a took – I didn’t realize you could apply two fills. This has opened so many new doors for me. Thanks much!
thank you, great now i can make my own letterpress based on your tutorial
hello
is this made in cs3 or cs4
cause am trying on cs3 and i dont get the results of step 3.
i get stuck there.
please help.
if you’re using cs4
can you help me how to use it on cs3.
thank you its a great tut.
Hi, thanks for this tutorial, its great. I have CS2 and it works fine. I had to start from the beginning a few times because some things didn’t work for some reason (i.e inner glow) but the result is fine. Is there any way to ‘smooth out’ the inner glow effect as it looks pixilated and I’m not sure how this will show when printed.
To Image Grafics:
In step 2 the line and stroke are set to none. So in step 3, highlight the text and click on the little button with the arrow on the top right of the appearance box. Then select the first option and the text colour will change to black. Then change the text colour to a shade darker than your background box (if you are using one). I don’t have the arrow next to the colour to change it, so went to my colour palate and changed it manually.
it is more easy on photoshop, nice tuts. thanks
Wow, I’m going to try that technique for sure. Is there a way you can do something similar in Fireworks? Anyone got a good URL for it?
thank you man
Thanks for the great tutorial-but I’m having trouble. Why is it that when I try to add a new fill or even go to illustrator effects for inner glow (or any other similar option) that all these options are greyed out?