Ever since I was about ten years old I was fascinated by heraldic figures. This tutorial is all about creating heraldic figures. It's not about 'tricks,' but more about 'creative inspiration,' and how to achieve good results relatively 'quickly.' Let's look at making shields, heraldic design elements, and simple text effects to create a classic branded design. Have fun!
Final Image Preview
Below are the final images we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.
Step 1 - Collecting
Search your local flea market, your grandma's basement, or your local library for some nice books about heraldic figures. Buy them and then search for nice objects you like in those books. Of course, you can search the internet, but don't forget that the internet is sometimes a little bit overrated. Real treasures can be found on the streets, rather than the internet. Once you've collected a couple of figures you like, try to draw them yourself, and as always, practice makes perfect. Once you're happy with your drawing, scan it and save it to your hard disk.
Step 2 - Cleaning Up
This is a step that is underestimated by many. To get a nice result, good trace work is crucial. I first cropped and cleaned up the image in Photoshop, and by just using a hard edged Eraser, I remove all the objects I don't need. Once done, go to Image > Threshold, leave everthing as it is. Next, simply click the OK button. Now crop the image again and save it to your hard disk.
Step 3 - Tracing
Now the tracing begins. Open the image in Illustrator. I select the image (which is now still in pixels) and go to Objects > Live Trace > Tracing Options. Play with the Threshold until the image looks the way you like it. I used the Live Trace option because it gives the image a nice authentic look. You can, of course, trace it by hand, but I think that often looks to computer generated.
Once done, don't forget to click the Live Trace button to trace your image. Now pick the Direct Selection tool and click on the white space around the image. Once selected, delete it. Off course you can also click the Ignore White button in the Live Trace menu, but then you also loose the white fills inside the image. Repeat these first three steps for all the objects you want in your composition. I did it with this swirl, a ribbon and a crown.
Step 4 - Build a Shield
Now we're going to make our center piece; a nice looking shield. First, open up a new document in Illustrator. Set your rulers (Command + R) and set a middlepoint. Then draw the shape of half a shield, using the Pen tool.
Duplicate the shape and flip it vertical. Then place the flipped shape to the left of the original shape, so that both left and right are identical. Next, merge them together, so that your shield looks like the image below.
Fill the shield with white and give it a stroke (I used a Weight of 9 points). With your shield still selected go to Object > Expand and click OK. Now ungroup your shield. The stroke and the inner part should be two separate objects. Select the inner part and determine the horizontal and the vertical midpoint using guides. Drag a line over the horizontal midpoint. Select this line and the inner part of your shield and then divide them. Do the same for the vertical midpoint.
You should now have four inner parts of your shield and an outer part (what used to be the stroke). Bring the outer part back to the front (Shift + Command + Right Bracket key) and give the top-right and the bottom-left part of the inner object a black fill color. Then your shield should look like the image below. Group all off the objects and save your shield.
Step 5 - Text
This is where the magic happens. We're going to make a really simple text effect. First of all, open up a new document in Illustrator and type your text. Then select a nice scripted font (I used the lovely Buffet Script). Copy your text (Command + C) and then paste in front (Command + F).
Now there are two text objects on top off each other. First select the top one and make the fill color white. Then select them both (Command + A) and deselected the one on top by Shift-clicking on the top. If all is well, only the one in the back is selected. Make sure this one has no fill color and a black stroke. Also, make sure the stroke is rounded.
Raise the stroke weight until the text is filled.
Select the front text object again and simply use the Arrow keys to move it up and to the left. Make sure you do this proportional. So I moved it four times up and four times to the left. Now it should look like the image below. Clean your image up by outlining your text objects (Command + Shift + O).
Step 6 - Combining the Objects
Now that you have all your objects, bring them all into one document. I used the shield as the center. The crown comes on top and the swirls are copied, scaled, rotated and placed proportional around the shield. My text goes on top of the shield and the ribbon just underneath it.
Conclusion
Finally, we need to unify the design stylistically. Currently, we have some hand drawn elements (swirl, ribbon, and a crown) and some clean vector elements (the shield and text). We could have spent time either drawing the shield and text by hand and then Live Tracing them, or creating the swirl, ribbon, and crown with the Pen tool so that all the elements have a computer generated clean vector look.
In this case, we're going to use a quick alternative to unify this design. Let's add some texture, which gives this design a watercolor look. Of course, you can also experiment with colors, patterns, and gradients. You can also experiment with different objects as well.
Keep in mind that the use of texture is useful if your final output is in an illustration or design. However, if you're creating a logo, then you'll want to unify the final design stylistically in vector, as discussed above. Have fun and get out there and find some heraldic imagery!
Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.
