SimpleCod3rS


 
HomePortalCalendarFAQSearchRegisterMemberlistUsergroupsLog in

Share | 
 

 Make your own FONT Tutorial

Go down 
AuthorMessage
Admin
The One and ONLY! Its Vertual!
The One and ONLY! Its Vertual!


Number of posts : 109
Registration date : 2007-05-12

PostSubject: Make your own FONT Tutorial   Thu May 17, 2007 3:19 pm

First thing you'll need is the hardware:


  • A pen or some other device that makes a mark on paper.
  • A piece of paper. A napkin will do if you can't find any paper.
  • A computer with a scanner.

Here are two pieces of specialty software you will need for making
fonts:
Adobe
Streamline:
Converts your grayscale scan into an eps (Encapsulated
Post Script) file which you can open and edit in Illustrator.

Macromedia
Fontographer:
This is the program that makes fonts.

Also, you should be somewhat familiar with the following software:
Adobe
Photoshop
: Use this to scan your artwork in and clean it up
if you want.

Adobe
Illustrator
: Used as a clipboard for importing your outlines
into Fontographer.
Got all that? Great! Let's draw the alphabet...

When drawing your alphabet, keep in mind that it'll be troublesome
if the characters overlap. If they do, you'll have to cut them apart
later. So I'd recommend keeping each letter separate from the others,
and leaving plenty of space between the lines.
I scanned my napkin into Photoshop at 100% (as seen here) at a
resolution of 200 pixels per inch. My computer sucks, but if you've
got one of them fancy new computers you might want to scan it in
at 300 dpi. Whatever. I'm a lo-fi guy.
Next, I'm gonna take the alphabet into Streamline to convert it
from a grayscale PICT file to post-script outline format. Streamline
lets you control the detail of your image based on details per inch,
so I need to make it bigger to get the detail I want out of it.
In Photoshop under "Image: Image Size" I "uprez" the image to about
8.5 inches by 11 inches, at around 150 dpi. Now I'm ready to exit
Photoshop, so I save the file as a grayscale PICT with no compression.

Now I open the pict in Adobe Streamline, a simple little program
that just converts grayscale images into eps outline format. I only
use two functions here. Under the options menu there's "Conversion
Setup" which gives you a window like this:

These are the settings I used for this font artwork. I like to
have more curves than straight lines so I changed that from the
factory defaults. Also I changed the details per inch ("Tolerance").
I don't know what the other stuff does.
I selected a portion of the artwork and converted it (File: Convert).
I didn't like the way the "R" was being broken up, so I hit undo
(command-z) and went in to adjust the threshold level. This is under
"Options: Color/Grayscale Setup". It gives you a window like this:

I moved the threshold slider from 50% to 39% so anything that's
39% black or darker in grayscale mode goes to black when outlined.
This way more of the image goes to black. Here's the before and
after:


You can zoom in real close on your image, convert a part of it,
undo, adjust your settings, and convert again until you've got something
that looks cool. Many a font has come out of accidental settings
in Streamline. This is a good place to play around with your scan
to see what comes up.

Above is an example of two different typefaces that came from
the same grayscale file when I was first learning how Streamline
works. I was trying to make something that looked like the top font
(CrustiEr) and ended up with the bottom font (Moonshine) because
I didn't have the details per inch high enough.
When you are happy with your conversion, save it as an Illustrator
file and quit Streamline. Open it up in Illustrator.

What will happen when letters are copied from Illustrator to Fontographer
is the characters will be sized to fit from the lowest descender
(like the bottom of the lowercase y) to the highest ascender (the
top of any capital letter). To get all of your characters to come
across the same size as each other as they move from Illustrator
to Fontographer, you'll have to create a dummy character that represents
what this height should be.
So I draw a box that's big enough to go from the top of the capital
A to to the base of a lowercase y. Umm.... like this:

Now I copy each horizontal row of letters (along with the box
that keeps the height of all the characters uniform) in Illustrator
and paste 'em into a space in Fontographer. It's kinda goofy, but
this is important: When copying in Illustrator, you must hold
down the "option" key as you pull down "copy" from the edit menu.
The keyboard shortcut for copying won't work, and you must hold
down the "option" key as you copy.

Keeping Illustrator open, open up Fontographer, too. Go under
"File" and select "New Font." You'll get a window like this:

Select the "A" box and pull down "paste" from the edit menu. Once
again, you might have problems if you use the keyboard shortcut
to paste, so remember to use the pull-down menu.

So now I've pasted the characters A-J into the A box. Next I paste
K through T into the K box. And repeat with each line of letters
until I've gotten everything from Illustrator into Fontographer
so I can quit Illustrator before my computer crashes.


Last edited by on Thu May 17, 2007 3:20 pm; edited 1 time in total
Back to top Go down
View user profile http://simplecoders.gogoo.us
Admin
The One and ONLY! Its Vertual!
The One and ONLY! Its Vertual!


Number of posts : 109
Registration date : 2007-05-12

PostSubject: Re: Make your own FONT Tutorial   Thu May 17, 2007 3:20 pm

Before saving the Fontographer file, I go under the "Element" menu
to "Font Info." Here I name my font and add some kind of copyright
text. Thusly:

It's nice to have some control over how widely your font gets
distributed, so be sure to put some kind of note in your notice
field that lets people know they shouldn't redistribute your font
without your permission. You should also list your website, e-mail
address, or other contact information in case somebody likes the
font and wants to get in touch with you.
Save now. Save often.


Double-click on the "A" box. You'll get this:

Double click on the dummy height box and hit delete to get rid
of it.
Use "command-a" or "Edit: Select All" and you'll get this monstrosity:

Drag it all until it's almost touching the vertical rule on the
left. This vertical rule represents where the space of your character
begins.

Click and hold on the vertical dotted rule on the right, and drag
it over between the A and the B to define where your A character
ends:

Select all again, then hold shift and click and drag to partially
de-select the A:

"Cut" and your A is alone:

Use "command-]" or "View: Next Character" to move on to the B.
Paste, and repeat the process. This is hellishly complicated for
me to describe, but it's all simple copying and pasting. Hopefully
it'll make sense if you try it. It's a pain to write about, but
once you get these mechanics down you can really cruise through
an alphabet.


Once you've got all you characters into their respective boxes, you

can double click on an individual letter's box to examine and/or edit

it. Under your pull-down menus you can turn off "View:Show Points"

and turn on "View:Preview" and you'll get a better view of what your

letter looks like:


What you see above is a fairly common problem with importing outlines

from Illustrator into Fontographer; the counters inside this letter

R have filled in solid black when they should be white. To correct

this problem go up to your pull-down menu and do "Element: Correct

Path Direction." This should fix your fill-in problem.

You can also go to the Fontographer window that shows all of your

letters, select all, and then correct path directions. This should

fix all of your fill problems in one fell swoop.

Once you've got all your characters into their respective boxes,
corrected your path directions, and typed in your font's name and
copyright info, go under "File: Generate Font Files." You'll get
this window:

Must be easy, because that's what it says. Hit the "Generate"
button, put the font in your system folder, and start using it.
Design something fun!
Back to top Go down
View user profile http://simplecoders.gogoo.us
No-Danger
No-Dangers Private Tag!
No-Dangers Private Tag!
avatar

Number of posts : 68
Registration date : 2007-05-14

PostSubject: Re: Make your own FONT Tutorial   Fri May 18, 2007 12:58 am

Lol you stole that off otoomsite i posted that thread u just made it beta
Back to top Go down
View user profile http://bradslabs.sooch.info
Admin
The One and ONLY! Its Vertual!
The One and ONLY! Its Vertual!


Number of posts : 109
Registration date : 2007-05-12

PostSubject: Re: Make your own FONT Tutorial   Fri May 18, 2007 12:12 pm

Yes well of cource i made it better, thats what i do, make thing BETA!

Lol Jk
Back to top Go down
View user profile http://simplecoders.gogoo.us
No-Danger
No-Dangers Private Tag!
No-Dangers Private Tag!
avatar

Number of posts : 68
Registration date : 2007-05-14

PostSubject: Re: Make your own FONT Tutorial   Fri May 18, 2007 9:16 pm

Lol u can princess up my hack pack if u like lol jks
Back to top Go down
View user profile http://bradslabs.sooch.info
Sponsored content




PostSubject: Re: Make your own FONT Tutorial   

Back to top Go down
 
Make your own FONT Tutorial
Back to top 
Page 1 of 1
 Similar topics
-
» How do I make the login popup show an Image, instead of it's bland colors
» can i make the poster details in the topic above the topic
» Do migraines ever make you mean or irritable?
» Does throwing up make it go away quicker for you?
» How to make migraine patients happy!

Permissions in this forum:You cannot reply to topics in this forum
SimpleCod3rS :: Forums :: Coding/Tutorials :: Tutorials-
Jump to: