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.
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.
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.
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.
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.
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.
- The study “The uncrowded window of object recognition” advances the thesis that character spacing is the defining factor for legibility.…Read more
- Use this Photoshop technique to create electric glowing type sprinkled with pixie dust.…Read more
- It always seems magical when a piece of graphic design transcends the flat plane and enters the third dimension. The…Read more
- Sometimes, flat just doesn’t cut it, and we need to find other, more attractive ways to present designs to our…Read more
- Numerals (or figures) can take various forms. The figure style you choose ought to be appropriate to the project you…Read more
- Screenfonts: Push, Coraline, The International, Gomorrah, Madea Goes To Jail, Echelon Conspiracy (19)
- ScreenFonts: Captain America: The Winter Soldier, Under The Skin, Hateship Loveship, The Quiet Ones (4)