Tutorial: Festive Engraved Type

With Christmas eve barely a day away many of us will need to create name cards to attach to the presents, or to show the guests where they need to sit at the dinner table. Here’s a tutorial to help you make the type on these cards a little more festive by simulating posh engraved type. Now there are a good number of readymade engraved and inline – also called “handtooled” – typefaces on the market, but I don’t know that many with a shadow line and/or a hatched fill, like Chevalier for example. So I’m going to show you how to create both effects in Adobe Illustrator. I originally developed these techniques in a version way before CS, so you shouldn’t encounter any problems replicating them in any version of any vector drawing software.

Shadow Line

Let’s start with making a shadow line. This is a fine line which runs parallel to the contours at one side of the characters. It looks more delicate and refined than a regular shadow or 3D effect. To showcase this effect I used FF Danubia by Viktor Solt-Bittner – a nostalgic looking modern serif with a twist, which also comes in a delightful connected script version.

I zoomed in on the project because this kind of shadow line is very fine by definition. There are two possible ways how to go about creating it.

Type in the name – or any text for that matter –, duplicate it and paste behind the original (Edit: Copy -> Edit: Paste in Back). Offset the duplicate down and to the right (Object: Transform: Move…), but make sure not to exceed the width of the hairlines (the thinnest strokes in the characters). We can easily measure this width by converting a character to outlines (Type: Create outlines) and moving an anchor point until it magnetically clicks to the opposite anchor point. The distance can be read in the information window (Window: Info).

Set the colour of the duplicate to white. Duplicate the duplicate and paste in back (Edit: Copy -> Edit: Paste in Back). Offset it the same distance as the first duplicate, and set its colour to the desired colour.

Although this technique gives a pretty good result some minor problems arise. The most visible are the spots where the shadow lines touch the letters; it is just not very tidy. That’s why I prefer the second technique.

Type in the name – or any text for that matter –, duplicate it and paste it behind the original (Edit: Copy -> Edit: Paste in Back). Apply a stroke to the duplicate that is twice the width of the hairlines. Recent versions of Adobe Illustrator allow you to simply specify the outline inside or outside objects, yet this does not work with live text so we still need to do this the old fashioned way.

Theoretical intermission


As you can see in the example at the left the outline eats away at the character shapes, most noticeably in the hairlines. This is because Aobe Illustrator centers the width of the outline on the vector, which means half the width is situated inside the character shapes. At the right half of the outline (which is double the desired width) is covered by the white duplicate of the text on top. Thus the character shapes remain intact.

Duplicate the duplicate and paste in back (Edit: Copy -> Edit: Paste in Back). Offset the duplicate down and to the right (Object: Transform: Move…), but make sure to not exceed the width of the hairlines. Set its colour to the desired colour. The end result is tidier because the white outlines ensure that the shadow lines remain at an equal distance from the letters.

Open Face

Let’s now take a look at the bottom lines of text. For these I used the classic Engravers Roman Bold because it’s nice and wide, with butch serifs and a mutha of a tail on the R.

In an engraved face the outline needs to be situated at the inside of the character shapes, and this is a little more complicated. The starting point is identical though – define an outline that is twice the width of the hairlines. Set the inside colour to white.

Duplicate the text but this time paste it on top of the original (Edit: Copy -> Edit: Paste in Front). Select both text object and define as a clipping mask (Object: Clipping Mask: Make).

Select the original without the mask, duplicate it and paste in front (Edit: Copy -> Edit: Paste in Front). This duplicate is now sandwiched between the original at the bottom and the mask on top. Keep the outline but set the inside colour to transparent. Offset it to the left; the distance shouldn’t exceed the width of the outline.

We now have an engraved face. All we still need is the shaded fill with horizontal stripes.

Hatching

Draw two horizontal lines which run a little wider than the text. Set the line width equal to the thickness of the hairlines and make sure they correspond exactly with the top and bottom serifs.

Using the Blend Tool specify a blend between those two lines by subsequently clicking the starting points of the top and of the bottom line. Define the Blend as Spacing: Specified Steps. We can decrease or increase the distance between the horizontal shading lines by respectively increasing or decreasing the number of Steps.

Duplicate the original text and paste it on top of the blend (Edit: Copy -> Edit: Paste in Front). Select the blend and the text object, and define a clipping mask (Object: Clipping Mask: Make). We now have a shaded face, much like Chevalier.

Add a shadow line and we’re ready.

It is advisable to use Layers because the consecutive text objects which are layered on top of each other make it a little difficult to select and edit objects in between other objects.

Type in header: FF Danubia Script, Engravers Roman Bold & Dalliance Flourishes

Tags: , , , ,

25 Comments:

  1. Great tut thank you.

    Posted by Rocstdy on Jan. 7, 2009
  2. Oh so that’s how it’s designed. I like the last sample thank you.

    http://www.greenqueso.com

    Posted by Aaron Q on Jan. 18, 2009
  3. Why aren’t there hundreds of comments complimenting this excellent tutorial?
    Great content.

    Posted by James on Mar. 25, 2009
  4. Thanks James. There may not be hundreds of comments, but yours is worth at least a dozen. ;)

    Really appreciated. :)

    Posted by Yves Peters on Mar. 25, 2009
  5. Thanks for two great tutorials, so simple and yet so powerfull. Good idea with such short tutorials.

    best regards

    Finn

    Posted by finn madsen on Mar. 25, 2009
  6. Great tutorial.

    Posted by Casey on Mar. 25, 2009
  7. Thanks, what a simple yet great effect!

    Posted by Bee on Mar. 25, 2009
  8. Thanks for the good tut!

    Posted by Pat on Mar. 25, 2009
  9. Thank you so much for these tutorials. Truly appreciated!

    Posted by Georgiana on Mar. 25, 2009
  10. Genial. Es de agradecer artículos tan sencillos y con tanta clase.

    Un saludo.

    Posted by Enrique on Mar. 26, 2009
  11. This is so helpful! Thanks for sharing!

    Posted by Monica Majors on Mar. 26, 2009
  12. Nice tutorial – all the necessary info, but not a lot of fuss and footnotes. Thank you for sharing this stuff.

    Posted by George Mack on Mar. 30, 2009
  13. Illustrator makes it even easier than this.

    You no longer need to make a white duplicate on top to force the outline to be outside the letter only (What are you using Illustrator 88?). Illustrator now includes an option in the stroke menu which allows the stroke to be outside, inside, or centered. Just click on the little grey icons below the stroke weight menu, by the heading “stroke alignment.”

    When/if you want to turn it into a real vector instead of an Illustrator effect just go to Object>Path>Outline Stroke.

    Posted by Thom on Apr. 1, 2009
  14. I have CS4, but it simply doesn’t work on live text, what can I say?

    I think you didn’t read carefully enough. I do know about the stroke alignment, that’s why I wrote “Recent versions of Adobe Illustrator allow you to simply specify the outline inside or outside objects, yet this does not work with live text so we still need to do this the old fashioned way.”. Yes you can convert the text to outlines, but I explained the technique for live text.

    Posted by Yves Peters on Apr. 1, 2009
  15. Thanks for this, although, I can’t help but think that you didn’t clearly explain the creation of the engraved face. I cannot, for the life of me, duplicate your results there.

    Posted by Eric Murray on Oct. 1, 2009
  16. Thanks for the tutorial. Very clear and concise. Thank you. This one is getting bookmarked for reference under type tips.

    Posted by Linda Patrick on Oct. 27, 2009
  17. Very thought out, thanks :)

    Posted by Web & Graphic Designer on Feb. 16, 2010
  18. A splendid and sophisticated effect! Thanks!

    Posted by studdude on Feb. 21, 2010
  19. Nice two-for tutorial! So simple, yet so helpful for budding designers such as myself!

    Posted by Chris on Sep. 10, 2010
  20. this is worthless. barely explains anything. no screen shots, just some mumbo jumbo about clipping masks. thanks for wasting my time

    Posted by trev on Apr. 8, 2012
  21. Well, Trevor, this tutorial does require a minimum level of intelligence and a basic insight in Adobe Illustrator. I guess you just don’t make the cut. ; )

    Posted by Yves Peters on Apr. 9, 2012
  22. Hello, I would like to start designing fonts. What sofware is best for doing this Victorian shadowing that you show above????
    I hope you can help

    Posted by Nancy on Nov. 7, 2012
  23. Wonderful tutorial I appreciate the simplicity of it.

    Posted by Gabriel Cabrera on Dec. 5, 2012
  24. I might being a bit side-tracking but there’s one more question I’m dying to know. How do you get it so nice and crisp at the end? I’m referring essentially to the first image of the post.
    Anyone can help me out. Going crazing with the various save for the web tools but far from a decent result. Any just as brilliant tutorial for web optimization to hint to?
    That would be major help…

    Posted by justa on Jan. 29, 2014
  25. The best results when saving simple “line drawings” like these is using “Save for Web and Devices…” and then select either GIF or PNG. This way you avoid these unsightly JPEG artifacts.

    Posted by Yves Peters on Jan. 29, 2014

Post a comment:

  •  

The FontFeed

The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.

Archives

Subscribe

The FontFeed RSS The FontFeed Comments RSS