Create a Hand Drawn Font Using Illustrator and Fontastic.me

01
of 06

Create a Hand Drawn Font Using Illustrator and Fontastic.me

Make Your Own Font with Illustrator
Text and images © Ian Pullen

In this fun and interesting tutorial, I'm going to show you how you can create your very own font using Illustrator and the online web service fontastic.me.

To follow along, you'll need a copy of Adobe Illustrator, though if you haven't got a copy and don't want to buy it, you may be interested in our similar tutorial that uses Inkscape. Inkscape is a free, open source alternative to Illustrator. Whichever vector line drawing application that you use, fontastic.me offers its service completely for free.

While I'm going to show you how to create a hand drawn font using a photo of letters drawn on paper, you can also use similar techniques to produce a font using letters that have been drawn directly into Illustrator. If you use a drawing tablet, this might be preferable to you.

If using a photo, ensure that you use a dark color pen pen to draw your letters and use plain white paper for maximum contrast. Also, take your photo in good light to help produce a photo that is clear and contrasty to make it as easy as possible for Illustrator to trace the individual letters.

Over the next few pages, I'll walk you through the process of creating your first font.

02
of 06

Open a Blank Document

Open a Blank Document
Text and images © Ian Pullen

The first step is to open a blank file to work in.

Go to File > New and in the dialog set up the size as desired. I used a square page size of 500px, but you can set this as desired.

Next we'll import the photo file into Illustrator.

03
of 06

Import Your Photo of Hand Drawn Text

Import Your Hand-Drawn Text
Text and images © Ian Pullen

If you haven't got a photo of hand drawn text to work from, you can download the same file that I've used for this tutorial.

To import the file, go to File > Place and then navigate to where your photo of hand drawn text is located. Click the Place button and you'll see the photo appears in your document.

We can now trace this file to give us vector letters.

04
of 06

Trace the Photo of Hand Drawn Letters

Trace the Photo of Hand Drawn Letters
Text and images © Ian Pullen

Tracing the letters is very straight forward.

Just go to Object > Live Trace > Make and Expand and after a few moments, you'll see that all of the letters have been over laid with new vector line versions. Less obvious is the fact that they will be surrounded by another object that represents the background of the photo. We need to delete the background object, so go to Object > Ungroup and then click anywhere outside of the rectangular bounding box to deselect everything. Now click close to, but not on, one of the letters and you should see that the rectangular background is selected. Just press the Delete key on your keyboard to remove it.

That leaves all of the individual letters, however, if any of your letters contain more than one element, you will need to group these together. All of my letters contain more than one element, so I had to group all of them. This is done by clicking and dragging a selection marquee that encompasses all the different parts of a letter and then going to Object > Group.

You will now be left with all of your individual letters and next we'll use these to create the individual SVG files that we need to create a font on fontastic.me.

Related: Using Live Trace in Illustrator

05
of 06

Save Individual Letters as SVG Files

Save Individual Letters as SVG Files
Text and images © Ian Pullen

Unfortunately, Illustrator doesn't allow you to save multiple artboards to individual SVG files, so each letter has to be manually saved as a separate SVG file.

Firstly, select and drag all of the letters so that they don't over lay the art board. Then drag the first letter onto the artboard and re-size it to fill the artboard by dragging one of the corner drag handles. Hold down the Shift key while you do this to maintain the same proportions.

When done, go to File > Save As and in the dialog, change the Format drop down to SVG (svg), give the file a meaningful name and click Save. You can now delete that letter and place and re-size the next one on the artboard. Again do Save As and continue until you have saved all of your letters.

Finally, before continuing, save a blank artboard so that you can use this for a space character. You may also wish to consider saving punctuation marks and lower case versions of your letters, but I've not bothered for this tutorial.

With these separate SVG letter files ready, you can take the next step to create your font by uploading them to fontastic.me. Please take a look at this article to see how to use fontastic.me to finish your font: Create a Font Using Fontastic.me

06
of 06

How to Use The New Asset Export Panel in Adobe Illustrator CC 2017

Image shows traced letters and Letter A in the Asset Export panel.
SVG creation is reduced to a click-and-drag workflow with the new Asset Export panel in Adobe Illustrator CC 2017.

The current version of Adobe Illustrator contains a new panel that allows you to put all of your drawings on one artboard and output them as individual SVG documents. here's how:

  1. Select Window > Asset Export to open the Asset Export panel.
  2. Select one or all of your letters and drag them into the panel. They will all appear as individual items.
  3. Double click the name of the object in the panel and rename it. Do this for all of the items in the panel.
  4. Select the items to Export and select SVG from the Format pop down.
  5. Click Export.