The Tutorialist @thetutorialist-blog - Tumblr Blog

Step 10 - Want to use it Online?

It is super easy to use your font online for your sites! You can figure out how by clicking here and following these easy steps!

#hidehome #fonttutorial

Step 9 - Install Your Font

Would you rather see a clip to walk you through it? You can do that here!

We are so close now! We just have to install the font on your computer!

Double-click on the file named ‘yourfont.ttf’

It will show a pop-up box asking if you want to install the font

select install font

this should automatically put it into your font library on your computer

Open up a word document (or illustrator/photoshop- whatever works for you) and let's test it!

Write a sentence, and see if you can change your font to your created font by looking for the name in the drop-down menu.

If you cannot find it, try closing the document and launching it again, as sometimes it needs to restart to pick up the new font.

Some programs are really finicky with the new fonts and take a bit of hunting to find them

Keep in mind that if you see some odd boxes or circles forming while you type, it could be because you did not create that character in your font

You’re done! Congratulations... you now have a font that you created!

#hidehome #fonttutorial

Step 8 - Load the SVGs into Birdfont

Would you rather see a clip to walk you through it? You can do that here!

Birdfont is a great free application that you can download and use to create your font.

Start by making a folder on your desktop with the name that you would like to call your font.

Be sure you have the latest version or Birdfont downloaded for your correct operating system (MAC, Windows, etc).

Open up Birdfont and select SIL Open Font License (this is the only option you can select with the free download)

Select ‘create a new font’

Click on the hamburger menu in the top right corner

Select ‘Name and Description’

Change the Postscript Name, Name, Full Name, and Unique Identifier to whatever you want to name your font

You can close the name and description box for now - it will keep your preferences

Now you want to load in your SVG’s

Start by double-clicking on the letter you want to start with (it would make logical sense to start with ‘a’) in the Birdfont window

Click on the hamburger menu in the top right corner

Choose import SVG file

Select your corresponding SVG file for the appropriate letter

Let us turn on our grid option (as this will show you the baseline and top of the letter) which you can find to the left of the letter panel

You may also want to add additional lines to show where you x-height line is (the top of your lower case letters, and the descender line which indicates where the end of your lower case letters descenders - like the bottom of the ‘p’- go)

Now you can scale your letter to fit into the grid as you see fit using the controls on the left of the letter panel

Once you have repeated this process for every letter, number, and punctuation mark you need to save your font by going to the hamburger menu in the top right and selecting file->save as and then name your font and save it to the folder that you have created

This will save the document as a .bf (Birdfont) file to your folder so that you can come back and open it and edit things later

Do a once over and make sure everything is exactly as you like it

If you made any changes, save them, if not - let's export your font

Go to the hamburger menu at the top right and select import and export->export fonts

Name your file

Select all the formats you want to save your font as

Select Export

Choose the file you want to export to (likely the folder you created in the beginning)

You will now see all of these files in your folder!

#hidehome #fonttutorial

Step 7 - Save Your Letters

Would you rather see a clip to walk you through it? You can do that here!

Now we are going to save the letters to be able to use them in other programs! This is not what will make it a usable font, but this step will help us get there!

Make sure that every character is expanded ( object->expand)

Now we need to save the characters as SVG’s so that we can use them in other programs

Saving as an SVG to use in another program can be kind of tricky because we cannot include the artboard in the file.

Select the letter you are saving so that it is the only thing selected

Go to File->Export Selection

Select where you want to export it to, and select SVG in the dropdowns under the ‘Format’ label.

Select ‘export asset’

As it doesn’t give you the option to name your asset or SVG in Illustrator, you will have to name them after they are saved to the folder

The SVG should now be automatically saved in a folder called SVG to wherever you requested it be saved to when exporting

You will need to do this step for each individual letter, number and special character

#hidehome #fonttutorial

Step 6 - Recreate the Letters

*This step is optional! This is only if you want really refined letterforms.

Now we have to go in and make them each perfect! In order to do this, we are going to ‘redraw’ each letter.

Select your favourite drawing tool. For this tutorial I am going to use the blob tool. Its not the most ideal tool for sleek looking letters, but today we are having some fun!

Make sure that the appropriate ‘Refined’ layer is placed over the top of the layer you’re working on, and turn on the letter you’re going to redraw.

you can turn the letters off and on to your hearts content in the layers panel

When you’re done, you should have all your new letters in the ‘refined’ layer, and all your originals in the lowercase’ (or whichever sections you’re working on) layer

#hidehome #fonttutorial

Step 5 - Revamp the Letters

Would you rather see a clip to walk you through it? You can do that here!

Now we are going to give them a bit of a refined shape

Here you have a few options

You can leave them the way they are, or you can use your favourite illustrator tool to smooth everything out, although I recommend the smooth tool (I don't have a reason for this- just personal preference)

#hidehome #fonttutorial

Step 4 - Lets Work on the Characters!

Would you rather see a clip to walk you through it? You can do that here!

Now we are going to give each character a little bit of love.

We need to make a new custom sized illustrator document based on the proportions of your characters. This will be dependent on how big or small you want your individual characters to be. For the sake of this tutorial, I am going to use an Artboard that is 0.75 inch by 1 inch.

Now that you have your artboard, let's bring in some guides that will indicate when the top of your letter will end, where the bottom of your letter will end, and where the descenders (extra parts of the letters like the bottom of the lower case ‘p’) will end. You may also wish to include a line that indicates the top of the lower case letters (I find this extremely helpful).

To get guides in illustrator, you will need to go view->rulers->show rulers, and then you can click on the rulers and pull guides down.

Once you have your guides in place, let's build some layers, so that things are ready and organized from the beginning!

To get to your layers panel, you will go to window->layers

We are going to make 8 new layers

Uppercase

Lowercase

Numbers

Punctuation

Refined Uppercase

Refined Lowercase

Refined Numbers

Refined Punctuation

**All of the ‘Refined’ layers are only needed if you intend to redraw them with illustrator tools later.

Now let's paste our letterforms into this document and ungroup them so that we can take one letter at a time.

To ungroup you will select everything, go to object->ungroup

Pick your first letter - (preferably one without descenders) and place it on the artboard on the lowercase layer (we are starting with lowercase letters)

Place the letter on the bottom line according to where you placed your guide

Scale your letterform to a point you’re happy with it (but stay within the constraints of your grid lines)

Do this to every letter and place them all in the appropriate layer panel

When it comes to the punctuation, you will have to decide what proportions you think are appropriate for each character

#hidehome #fonttutorial

Step 3 - Lets make it Digital!

Would you rather see a clip to walk you through it? You can do that here!

Now we are going to make all of your letters digital!

If you find your letters don’t stand out enough, try taking the photo again with a light source that casts little to no shadows.

‘Preset’ is custom (you may have to do this one last)

‘View is tracing result

‘Mode’ is black and white

‘Threshold’ should be between 150-170 (I tend to use 160)

under ‘Advanced Options’, select ignore white

hit Trace

this turns your image into a vector image

#hidehome #fonttutorial

Step 2 - Refine Your Sketches

Once you have played with a bunch of ideas, and you’ve settled on the direction you are going to take your font, you can start to refine it.

Using your grid paper, put a version of each of your letters and your special characters into the amount of space you want to use for each character. The amount of space you choose is up to you!

Once you’ve got them all nicely drawn out on your grid paper, you can either ink them, or you can move on to step 3.

#hidehome #fonttutorial

Step 1 - Sketch Out Your Ideas

This is the fun part! If you have been thinking about a font you would love to make, here is your chance to play it with, have some fun and sketch it out.

On a piece of paper or in a sketchbook just play around with some shapes and styles of the lettering you have in mind and see what you come up with.

Try drawing different versions of each character, and think about how the letters might appear next to each other, or interact with one another when they are complete.

#hidehome #fonttutorial

Tools You Will Need For This Tutorial

- Pencils - Graph Paper - Thin Black Marker (optional) - Adobe Photoshop & Illustrator - A Camera or a Scanner (Phone works for Camera) - The Latest Version of Birdfont for your Operating System

#hidehome #fonttutorial

#fonttutorial #hidehome

Have you always wanted to learn how to make your own font to use on your computer? Well now you can! Check out how to make your own font with this easy to use tutorial by me - The Tutorialist!

#top

Trending Blogs

Recently Viewed Blogs

The Tutorialist