In this tutorial we will learn how to create an inscription in a retro style based on the free font- the Agency FB. In the process of the font-change we will learn something about letter anatomy. The techniques described here will be useful not only for the work with typography but also for the work with any vector objects.
Step 1
Take the Type Tool (T) and create the inscription "Vector Tuts". You can edit the parameters of the text with the Character panel (Window > Type > Character). I used the free font Agency FB for my text. You can also choose any other free Sans Serif font from here. Set the Optical kerning between the characters and the Vertical scale 150%.
The professional typographers never use this way to scale the text, but we will change the shape of the letters, so this way can take place.
Step 2
Select the text and go to the Type > Create Outlines.
Now we can work with the form of letters as with regular vector objects. Create the horizontal guide and place it in such a way that it would go through the points of the title-letters.
While working in typography, always use the guides, they will help you to place the elements of the letters. For more precise work turn the Smart Guide mode on (Command + U).
Step 3
Drag the guide down while holding down the Option key; this action will duplicate it. This guide should pass through middle bar of the letter 'e'. (Bar is the horizontal stroke in characters such as A, H, R, e, and f)
Keep the new guide selected and go to the Object > Transform > Transform Again or use the shortcuts Command + D
Step 4
Ungroup the text (Shift + Command + G), then select the 'V' letter and drag the left corner of the bounding box while holding the Shift key. After the transformation, the lower part of the 'V' letter should pass through the lower guide.
Delete the extra points of the 'V' letter, if you think that they should be deleted.
I use the delete Anchor Point Tool (-) for deleting of the points.
Step 5
Move point A 1px to the left and point B 1px to the right. For those types of movements I use the arrows keys. You can set the necessary Keyboard Increment values in the Preference window (Command + K)
Create two horizontal guides which will limit the lower-case letters in height. The bottom line is called the Baseline, and the upper called the Meanline.
Lock the guides in the Layers panel.
Step 6
The lowercase letters have the rounded corners; let's make them sharp.
Select the points 1 and 2 with the Direct Selection Tool (A), then click on the Vertical Distribute Space icon in the Align panel.
Select the point 1 and convert it into corner point by clicking the appropriate button in the Control panel.
In some cases you'd need to use the Horizontal Distribute Space icon in the Align panel; the choice of a particular function depends on the location of the selected points.
If you didn't manage to convert the smooth into the corner points, then first convert it to smooth and then again into the corner points.
Transform all the angles of the lowercase letters while using this technique.
Step 7
While using the Direct Selection Tool (A) and the Delete Anchor Point Tool (-) align the top of the letter 'r' and the bottom of the letter 'u'
Align the inner parts of the letters 'r' and 'u' with the help of the align panel.
Step 8
Unblock the guides in the Layers panel. Select the lower guide which corresponds to the Baseline and go to the Object > Transform > Move… and set the value of the vertical displacement and click on OK.
Displace the top guide to the same distance which corresponds to the Meanline.
The value of the displacement should have the opposite sign in this case.
Step 9
With the Direct Selection Tool (A) select the points which are indicated on the figures below and while holding down the Shift, move them to the intersection with the new position of the guide.
Using this technique, reduce the height of the bar of the capital 'T' letter.
Step 10
Shift the bottom guide to the crossing with the end stroke of the letters 'c' and 's'
Those parts of the letters are called the Terminal. Select the points 1 and 2 on the 'e' letter and move them till the intersection with this guide.
Using guides and the Direct Selection Tool (A) we give the terminal letters 'e', 'c', 's' and 'r' the pointed look. Give the same look to the upper part of the letter 't'
This part of the letter 't' is called the Ascender.
Step 11
Create the projections on the capital letter 'T'. Create a rectangle with the Rectangle Tool (M). Select the bottom right point of the rectangle and shift it up with the Direct Selection Tool (A)
Those elements of the letters are called the Serif. Select the serif and go to the Object > Transform > Reflect, select the Vertical Axis and press the Copy button in the dialog box.
Move the resulting form into the right part of the letter 'T'
Step 12
With the Pen Tool (P) create the serif on one of the lowercase letters.
While doubling the created form and using the Reflect command, create the serifs on all the lowercase and capital letters.
Step 13
With the Rectangle Tool (M) create a square and place it in such a way that the center of the square is placed on the left corner of the lowercase letter.
Keep the square selected, go to the Object > Transform > Rotate and set the 45 degree angle in the dialog box.
Drag our object into the other letters, hold down the Option + Shift, and double it.
Step 14
With the Spiral Tool create the form of the curl on the capital letter 'V'. Many beginners and even advanced users have difficulties with the usage of this tool. If you are among them, I recommend you to check out this video. Apply to the created line the Round Cup in the Stroke panel.
And now, using the Width Tool, change the width of the curl as it is shown on the figure below.
Step 15
Keep the curl selected, go to the Object > Path > Outline Stroke.
Select all the elements of the letter 'V' with the Lasso Tool (Q), then click on the Unite icon in the Pathfinder panel.
With the Direct Selection Tool (A) and the Delete Anchor Point Tool (-) edit the conjugation place of the curl with the letter 'V'
While using this technique, combine the elements of the rest of the letters. As the result of this work, the letters of the text should represent the unique objects. On the figure below the text in the Outline mode (View > Outline) is shown.
Step 16
Take the Type Tool (T) create the text 'community'. I used the free WinSoft Pro fort for this text. We choose the value of tracking that the text would be located between the 'e' and 's' letters of the upper inscription.
Keep the text selected and go to the Type > Create Outlines. Using the guides and the Direct Selection Tool (A) create the serifs on the letters. The moving of the points is made with the arrow keys.
The elements in the center parts of the letters are made with Rounded Rectangle Tool.
When the work is completed, all the elements of the letters should be united with the Unite in the Pathfinder panel.
Step 17
Take the Rectangle Tool (M) and create a frame around the created text.
Select all the created objects and go to the Effect > Warp > Flag and set the parameters which are shown on the figure below.
Now go to the Object > Expand Appearance.
Step 18
Fill the background with the black color and the inscription 'Vector Tuts' with the yellow color and the 'community' inscription- with the grey color. Create four circles of the same size and place them in the corners of the background.
Select all the circles and go to the Object > Compound Path > Make. Select the black background and the Compound object, then click on the Minus Front icon in the Pathfinder panel.
Step 19
Select the black colored object and go to the Object > Path > Offset Path, and then set the offset value in the dialog box.
Swap the fill and the stroke, then take the Scissors Tool (C) and cut the created object in 1 - 8 points.
Delete the corner segment.
Step 20
Apply to the top and the bottom segment the trapezium-shape profile from the Stroke panel.
Create the curved segments which connect the background with the vertical segments. Apply the arc-shaped profile to the curved segments from the Stroke panel.
Step 21
Create the vector wooden texture. The wooden photo texture will be used for these purposes. You can download it here. Place the texture into the current document. Keep it selected and go to the Object > Live Trace > Tracing Options and set the parameters which are indicated on the figure below.
Now go to the Object > Expand and place the texture below all the created objects.
Step 22
Create a rectangle in dark-green color and place it below all the objects (for better visualization, the texture is off on the figure below).
Copy this rectangle and paste it front (Command + C then Command + F). Fill the new rectangle with a light green.
Select the top rectangle and the texture, then choose the Make Opacity Mask from the Transparency panel menu. Tick 'Clip' and 'Invert Mask' in this panel.
Step 23
Let's work a little more with the text. Copy the 'Vector Tuts' inscription and place it back (Command + C then Command + B). Fill the copy with white color and shift it a little bit up and to the left.
With the Pen Tool (P) create the objects, which fill the spaces between white and yellow texts.
Step 24
Let's create some scuff on the letters. We will use the photo concrete texture for this. You can download it here (credit to deviantART user ~ jaqx-textures). Place the texture into the current document. Keep it selected, go to the Object > Live Trace > Tracing Options and set the parameters which are indicated on the figure below
Now go to the Object > Expand and fill the texture with light-grey color.
Step 25
Select the concrete texture and all the elements of the inscription, and then select the Make Opacity Mask from the Transparency panel menu. Tick the 'Invert Mask' in this panel.
Conclusion
Dear Friend, our tutorial is over on this. Those who consider themselves being a part of our community can use the created inscription for the design of the t-shirts.
