Tutorial: Typography Fleurons

[Bila]

Distilling Shapes from Typography
Difficulty: Intermediate

One of the biggest opponents a designer faces is time. In order to save time, it's important to develop libraries of original design elements from which you can pull when time is tight. In this tutorial you will learn how to make fleurons from script fonts. These fleurons, or 'ornaments,' as they are also called, can be used in all sorts of designs, from urban-inspired flyers to fru-fru wedding invitations.



You will need the following:
Adobe Illustrator (10, 11 or 12)
A Script Font, or follow along with our example font: Exmouth.
A working knowledge of vector paths.

Note: The keyboard shortcuts used in this tutorial are based on the Macintosh Operating System, but are followed by the drop-menu equivalents which will show the appropriate shortcuts for PC users.


Let's get started.

Type out the font from A to Z and take a look at it. What we're looking for are the swashes, terminals and loops on the letters that look useable or just interesting. There tend to be more 'swashy' shapes on the capitals, so be sure to type out the alphabet in both upper and lower cases.


Let's do the capital D.
Start by typing the capital D.
Next convert the type into Outlines. (CMD/SHIFT/"O" or Type>Create Outlines) Confirm that you have made outlines by selecting the D. If you see a bunch of Anchor Points, then you're good to go.

Now go to your Layers Palette and take a look at the path that was created. It will most likely be titled "Group." Ungroup it by hitting CMD/SHIFT/"G" or Object>Ungroup. The layers palette will now have our path listed as a Compound Path (since it consists of three paths). If it's already a Compound Path, then continue to the next step.


Now that you have the outlines, you can pull out the swash using the Direct Selection Tool and the Clipboard.

Grab your Direct Selection Tool (white arrow). Start by making a marquee selection of some of the anchor points that comprise the swash. Hold down the Shift Key to add the anchor points you missed to your selection. You will know which anchor points you have selected by their state. Solid anchor points are selected, hollow ones aren't.


Once you've got all your anchor points, Copy & Paste to create a new path.


In the Layers Palette, confirm that our new swash path is NOT part of a group. If it's still in a group at this point, just ungroup it. The grouping is a remnant of the typographer's process in creating the font. Keeping it grouped will also mess you up later on when we start putting together our fleuron.

Let's repeat this process with another letter so we can add a tail to our swash. The Ball Serif on the capital 'M' looks good.


How you put together these two paths is really up to you. The goal is to make the combined paths fluid. This step may or may not test the boundaries of your knowledge of manipulating vector paths. Reflect, Rotate, delete anchor points, etc. to connect the two shapes into one new shape. I tend to use the Join Function a lot (CMD/J or Object>Path>Join).


Here's the shape we came up with:


Now take our shape and make it more interesting. Duplicate it, skew it and rotate it to make our Finished Fleuron. Here's what I came up with:


Just like any tutorial, this may take longer than it should to make such a simple thing, but as you grow more accustomed to manipulating paths, this process will take no more than five minutes to distill the swashes and put together new fleurons.

For those of you starting out in graphics, this is great practice in understanding Vector Paths. It also adds to your original resources which you can draw upon for future projects. Save this Illustrator document and name it 'Exmouth.' Open it up whenever you feel like making more fleurons from this typeface. I keep mine under Documents>Resources>Original along with the rest of my original assets I use like splatters, textures, etc.

As a designer, you should keep this artwork fresh and updated. Make these in your spare time and save them as EPS files so you can drop them into Photoshop compositions or Flash animations. Develop libraries of artwork such as this and keep it organized for easy access. Most importantly: HAVE FUN because the best thing about being a designer is that you get to sit around drawin' pretty pictures all day.
_________________

[crossedxwires]

cxw
+
bila
=
<3

Thank you. :]
_________________
Your brains are too "incompitent" for you to comprehend my stupidity.

[DeejayKnight]

That's badass... Never though of that.

Good tut. Thanks!

[jermaine.insorio]

Nice tutorial! I can now used this in my wedding invitations. Thank you.
_________________
Anniversary Invitations 50th