Creating Editable Letterpress Styled Text

Letterpress Thumbnail

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.

Final Image

Tutorial Details

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 1

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 2

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 3

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 4

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 5

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 6

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 7

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 8

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 9

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.

Step 10

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Facebook
  • Mixx
  • TwitThis

181 thoughts on “Creating Editable Letterpress Styled Text

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

  2. 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. :(

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

  4. 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?

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

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

  7. Pingback: More Notes «
  8. 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.

  9. 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…

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

  10. 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!

  11. 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!

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

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

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

    • I don’t know if I will get to explain you correctly because my English is so bad but I’m seeing than other people like you has the same problem and the solution is really simple.
      If you follow the tutorial your final effect is not the same. Just change where you put -1 put 1, and where you put 1, change to -1.
      Now in Spanish.
      Y ahora en español que ese very mucho suena raro jeje. Simplemente cambia los valores de los pasos en los para la sombra y luz, intercambiándolos sacarás el efecto que ha hecho el autor. Donde ha puesto 1 en el desplazamiento vertical, pon -1, y al revés en el otro caso, donde puso -1 pon 1.
      Simple.
      Saludos

  14. Heya, i tried several times following the tut every single wordd, but everytime it looks more like the text is outdentented rather than indented, any ideas?

  15. Sick tutorial, i read it on your iPhone app.

    after i finished the tut, i dragged the Graphic style on a vector logo (all stroke, no fill) and it worked perfectly, not just that, but it looked awesome!!!

    thanks for the tut, im going to keep watching your tuts.

  16. I’d also like to know what size font you used. The vertical move definitely needs to be adjusted depending on the font size and though I keep playing with it, it doesn’t seem to be quite as smoothly done as yours, especially when I try applying the graphic style I created to other fonts.

    Would you say that this works best if you stick to a particular color value range? For example, the second fill should be x shades darker than the first fill?

    BTW, I followed step-by-step in CS2 and was able to create this effect (and I’m still somewhat of a beginner). So my advice to others working in different versions is simply to look carefully around the workspace. You won’t get the drop down menu for the colors but you can manually change the color value of the second fill based on the original color values.

  17. Sorry but I can’t figure out how to make this work. I’m Using CS5 and all the dialogues look identical to CS4. Where I seem to be going wrong is when I try to transform the dark inner glow to make it offset all it does is drop the entire type down one point. How do I get only the glow within the type to lower while keeping the actual type in the correct spot.

  18. I am glowing inside about this tutorial. Viva La web. Took a while to figure it but now I’m really exploring graphical sytles because of this. Thank you.

  19. I cant seem to get this to work as a graphic style. Once i create the graphic style and try to apply it to other elements (text, for example) it only changes the color of the text to one of the colors used in the tut. no other effects are added. Is there a step missing from saving the graphic style? What am I missing? (I am using CS4)

  20. This effect doesn’t seem to work at all on text sizes smaller that 48px. Makes this effect pretty much useless on buttons.

    By the way, you can accomplish steps 5 thru 10 much easier by adding two drop shadows (yes, you can add multiple instances of the effect) to the original fill. One shadow goes up uses a dark color with multiply mode selected, while the other shadow goes down using a lighter color and screen mode. Much easier than creating new fills and moving them around.

    • Just realized that this effect is probably meant to be used on large text. Smaller text, as in buttons, looks great by just leaving off the inner glow. Do everything else and you get the great letterpress you in this tute.

  21. Very n1 & helpful tutorial. I did it a few times to get a good result. U have to be very careful with the color shades. If the colors too different it wouldn’t work out.
    I also played a little bit with the opacity of the two fills below the text. For me 80% for the first and 50% for the white works excellent :)

  22. Really great tut! I was really scratching my head trying to figure out how to do this in Illustrator. It bugs me that Illustrator doesn’t have the same array of easy-to-use effects as Photoshop. Guess it’s because it’s all vector in Illustrator…

    Anywhooo, thanx again for a great tut!

  23. I am having the same problem as a few others. I get zero effect when I get to the Inner Glow step. I have tried it several times with different fonts in various sizes and different colors. I tried it in CS4 and CS5 to no avail. I am pretty disapointed because I love the look. I am not a newbie, I know the difference between the Illustrator vs. Photoshop effects so I am not sure what is going wrong.

  24. i think it is missing some steps in Step 4, when the inner glow is applied, the next images shown next has a drop shadow effect already, if its inner glow only, it should be centered. I dont quite understand the part that made that drop shadow effect inside the letters, i wish i could because its a really great tutorial, thanks anywayz

  25. Good tutorial. I’d like to add that if you would like to change the color of the effect quickly because you need to apply it on a different background, I found it easier to select your text & background and use the recolor artwork tool (use the 1 color preset) rather than change all colors individually.

  26. Thanks for sharing!

    I found it difficult to choose the correct colors.
    What I’ve done: the same effect in Photoshop, and pick the colors from there.

    Final result looks stunning!

  27. Nice tutorial. Thank you. However i cannot make this effect. Because of colors. Can you give color codes? or hint how to select appropriate colors?

  28. Hey, great tutorial! There is a little question though, when you apply the inner glow in the early stages of the tutorial, it appears to be angled, as if the glow is not appearing equally across the whole typeface, thus creating a realistic shaded effect. When I apply the inner glow, it isn’t angled like yours. Is there a way you can control which angle the inner glow appears?

    Tea

  29. Great tutorial, even though—as explained before—letterpress isn’t an accurate description (which is what I was looking for). There’s a lot of great techniques in here, that, even though I don’t need them right now, I will come back to this later! Thanks for posting!

  30. this tutorial doesnt even yield the same result, i tried this like a zillion times already and im on illustrator cs5. under inner glow if i check ” centre” then i get almost similar results otherwise its just way different.

  31. tHE EFFECT IS GREAT!!! i LOVE BUT i CANT DOI IT :( I DONT KNOW WHY I GOT THE FONT TRIPPLE NOT IN AN UNIQUE WORD… WHEN I USE THE TRANSFORM EFFECT IT GET RUINED….SOMEBODY KNOWS WHY??

  32. To be honest, in Photoshop it’s much easier to do. Also, who said in that in Photoshop it’s not editable? Thats a myth. Ofc you can edit after styling in Photoshop, I’ve done it plenty of times.

  33. I know this is an old post but I’m hoping somebody can help me out… I got AI 5.1 and I just don’t see Inner Glow Effects… All I see is Effect–> Stylize –> Glowing Edges.. Did I miss something? Please help.. Thanks

  34. I love this effect. I cannot seem to re-create it though.
    CS5
    I end up with an embossed effect every time. The darker and white transform effects do not go INSIDE the letters or object for me. They move above and below the letters.

    Also, the initial inner glow effect only seems to work when I change the color to lighter than the original color – not darker as you suggest.

    I’ve tried this in multiple ways and cannot figure out where I’m going wrong. Wanna do this so badly!

    • Hey all. Like Jonas, I wanted to be able to do this so badly, but was unable to recreate the effect. I tried many times, but it looked embossed… I don’t like failure. I read all comments, but no solution. I did pick up a couple things and finally figured it out!!! So I have to share, b/c newbies like me, were having similar problems, and the experts were just like ‘i have no idea what people are having a problem with?’

      Here goes:
      1.your first colour, is background – lets say very light blue
      2.your second colour (first ‘new fill’ you apply to text) lets say medium blue
      3 your inner glow fx should be set to ‘edge’ and your colour should be DARKER then your first fill (medium blue), then based on text size play with the blur. This step creates the depth inside the text area. I kept adding a lighter colour b/c I overlooked the way he explained and glow, made me think lighter for some reason ;)
      4. your second new fill (darker blue) and -1px or more transform (the color is actually outside the text, but it helps with the illusion of depth when you only use just a slight negative vertical move
      5. your last new fill (white or very light blue – must be lighter than your background) at 1px or more has the same effect as the previous step, but on the other edge of the text. it too is actually outside the original text area, but if subtle enough, it lightens the bottom edge of the text.
      Too much transform of the last two fills, makes it look embossed. But the key to this whole comment is the inner glow is darker then the first fill and set to edge. Trust me, you’ll see.

      I’m using CS5

      • Hi Brad,

        thank you so much for this feedback. I had the same problem. My text looked embossed. With your advices it worked for me. Great work! :-)
        I think the most of us have had the problem because of this little error by the transform settings. The darker one needs to have “-” value and the lighter one (white) needs to have “+” value. In the tutorial its the other way around.

  35. Thanks for this tutorial! It was very useful when I needed to do some quick icon illustrations for a blog post. You can check out my result here: http://wp.me/p1ERmb-5b
    I did have to do a bit of changing of the tutorial (as other comments mentioned in CS5 it’s not exactly the same!) But I think it turned out pretty good.

  36. I am amazed by your tutorials, they are very easy to follow.
    Keep going with your good work!!
    I like your website

  37. I love this tutorial, and I’ve finally found a project to use it on. I am using red text on a white background, so I changed some of Rype’s steps above to suit that. I’m using CS5.
    1. Transformed the darkest colour (2nd fill) by -3px
    2. Because my background is white, instead of using a white fill for the last step (3rd fill), I used a very light grey and transformed it +3px. I also horizontally transformed it +2px.
    Thanks for a great tute.

  38. Thanks for the tuts.
    I’m using CS5 and I’m not able to get the same result.
    I have try several times with no luck.
    I think the difficulty level should not be Beginner…
    You should provide color you use for each step and also give a little more details, this will help newbies.
    For example: ‘With the text still selected, take off any fill or stroke’ maybe give more detail how to do it…
    I don’t give it up and will try to find out why it is not working.

  39. Hi, I can’t seem to get colours correct to give me the best effect. What are the blues you use, web safe would be helpful.

  40. Ouucchh i already remember the steps, but i have the problem with color, mine doesnt look like shadow inside. its more look like embossed..
    :(
    mind if yougive me trick about colors

  41. For those that are having problems with this not looking correct when they follow the steps, I think I figured out why. I was having problems with it and it kept looking embossed rather than depressed. Simply make the white layer transform -1px and the dark layer 1px (oposite of what is shown in this tut). You can get to those values by clicking the expand arrow to the left of each layer and then clicking on the Transform effect.

  42. This procedure was driving me nuts when I could not get the same effect. I finally realized that it was because the transform is explained in the wrong order.

    The dark transform should be moved in the -ve vertical and the white transform should be moved in the +ve. Just look carefully at the images as the transform is applied and you will see it’s the opposite of the explanation.

    • i found the same problem and solution. despite having a lot of experience in illustrator and following each step to the “T” (including eyedropping the same colors he used) i still could never get it to look quite like what he created…

  43. I keep having a problem at 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.) I end up with a hard-edged drop shadow of the letter “outside” instead of a soft inner glow shadow. Ugh.

    Note: I am working with an object as opposed to editable type, it is my logo. Doesn’t seem like this would be a problem.

    Can you help?

    Thanks!

  44. Great tutorial, just helped me out with the logo I had to design for a website. Saved me a lot of time trying to work out how to do it!
    I experimented with the settings and ended up turning the glow effect off which produces a more sharper version as another option people might like to try.

  45. This is fake Inner Shadow.
    If you try it yourself, you can easily notice that the Inner Glow part of the effect is still evenly distributed, instead of being moved slightly down. Just because you add a small dark and glow effect to the top and bottom, doesn’t hide that the inner glow transition is still not moved.

    Thanks for your tutorial, but it doesn’t remake the lack of a true Inner Shadow effect in Illustrator (which btw is absolutely embarrassing, since even CSS got a true Inner Shadow effect, and Illustrator CC claims to output CSS.

    The Sketch App or similar software currently being developed, will eventually kill Illustrator I think.
    Illustrator is simply too slow and old, and their developers don’t care about the community or trends whatsoever.

    It’s dying software… :(

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>