collapse

Author Topic: Font Creation 101  (Read 1191 times)

0 Members and 1 Guest are viewing this topic.

Offline MrSteve81

  • Initiate
  • **
  • Posts: 31
  • Last Login:March 11, 2010, 04:29:01 PM
  • Mrsteve says so
    • Email
Font Creation 101
« on: March 11, 2009, 01:57:08 PM »
A new tutorial made by me for everyone to use if they want.
Post it elsewhere if you want but leave my name on it. It took a while to write and I'd like people to know it was me who made it.

Making fonts is easy to do. Not as easy as making a palette but still not a difficult task at all. Hopefully this tutorial will help you create something cool that everyone will want to use in their mugen.

For this tutorial you will need
Photoshop/ Paintshop/ any decent image editor
Font Factory available here - http://virtualltek.mgbr.net/inicial.php?page=down07
Ideas for a font or "borrow" an already made font

As this is a tutorial I will create my font from scratch so you can see all the steps in creating your letters and numbers as well as punctuation.

First off decide what you will use this font for. This will help you decide how big to make your letters. The name font on the default mugen plus is 6 pixels high and 4 pixels wide (apart from M,m,W and w. These need more room).
Personally this is a bit small for me so I'm going to make it bigger.
My letters are going to be 10 pixels high and 7 pixels wide. The M's and W's will be 10x10. However you can make your letters as big as you want and as randomly sized
Open up photoshop or your editor of choice and create a document 10 pixel high and about 3000 pixels wide. It wont need to be this wide but you can always crop it at the end.
Paint bucket the background a colour you wont use in your font. I usually go for  RBG 255,0,255. Its the horrible pink that everyone uses for background colours.
Now pick colours that you DO want to use. I'm going for a black and white font to be boring but you can use any colours you want. Just make sure you don't use your background colour or more than 256 total colours.
Create the letter A in the size you've decided to use. Mine looks like this:



Not the most thrilling letter but you get the idea. Continue making your alphabet next to your A. I personally don't leave any gap between my letters but I think it still works if you do. It might make it easier for you later if you do leave a gap but its up to you. Make the whole alphabet and the numbers 0-9 as well as all the punctuation you feel will be necessary. I'm going to make only the uppercase letters because I don't plan to keep this font.

You don't have to make upper and lowercase letters but we'll get to that later.

Once you have finished go to Image > Mode and select indexed colour.
This brings up a dialog box where you can choose you colours to have in the palette. Choose exact in the drop down menu and then choose custom in the same menu.
Your background colour should be in the bottom right corner on photoshop. I believe its different in PSP but I don't use that so...
Remove the background colour from where it is and then click the bottom corner. This brings up your colour selector. Just type in your RBG code. Much easier than clicking it in exactly the correct place!
Click OK then OK and you're done. Save it as a .pcx and close photoshop.

Thats the hard part finished.

Now open Font Factory. This is a rather simple software that will take your .pcx and turn it into a lovely font for use in mugen.
Click open image and find your font.
As you know how high all your letters are you can fill this detail in on the left hand side as well as any of the other details you know. Set the colour depth at 16. I don't understand this but it works!
In the drop down menu select variable if you letters are different sizes. This is very important.
Then click the notepad icon. I find it a lot easier to work this way because I'm not convinced the other more visual way works properly.
You will be presented with something that looks a lot like this

Quote
[Def]
Size = 0,10
Spacing = 1,0
Colors = 16
Offset = 0,0
Type = Variable

[Map]

This next part takes a little bit of brain power but not too much. If you get it wrong you can edit it using the visual way. PAY ATTENTION!

Your "A" letter should start in pixel 0 and be x pixels wide. Mine is 7 pixels wide.
So I will type A 0 7
My "B" starts in pixel 7 and is 7 pixels wide so I will write B 7 7 in the next line

Continue doing this until you have something that resembles this

Quote
[Map]
A 0 7
B 7 7
C 14 7
D 21 7
E 28 7
F 35 7
G 42 7
H 49 7
I 56 7
J 63 7
K 70 7
L 77 7
M 84 10
N 94 7
O 101 7
P 108 7
R 115 7
S 122 7
T 129 7
U 136 7
V 143 8
W 151 10
X 161 7
Y 168 7
Z 175 7

As you can see I forgot to make the letter Q. Make sure you don't forget any letters. Especially if you are making a tutorial. Makes you look quite silly...
Do the same for your numbers and punctuation.

If you haven't made a lowercase as well All you need to do is copy all that text but instead of having "A" you need to have "a".
For example:

Quote
a 0 7
b 7 7
c 14 7
d 21 7
e 28 7

And so on.

Now save the font with whatever name you want. And put it in your font folder.
Open your fight.def in the data folder and where it says name.fnt change it for your new font.
Then test. Mine looks like this:



And thats all there is to it.

If you use this tutorial and have any problems just ask and I'll see if I can help you out.



Offline Hellzone

  • Character Creator Newbie
  • Forum Member
  • ***
  • Posts: 278
  • Country: United States us
  • Last Login:April 11, 2019, 09:08:42 PM
    • Skype - defcon_awesome
    • ItzHellzone Gaming
    • Email
Re: Font Creation 101
« Reply #1 on: April 29, 2009, 08:34:30 PM »
I've read this over and over, but i am still slightly confused, i make all the letters on the same docoument right?

Offline MrSteve81

  • Initiate
  • **
  • Posts: 31
  • Last Login:March 11, 2010, 04:29:01 PM
  • Mrsteve says so
    • Email
Re: Font Creation 101
« Reply #2 on: April 30, 2009, 01:18:38 AM »
All one document, all one horizontal line.

Offline DJ990J

  • Initiate
  • **
  • Posts: 50
  • Last Login:January 13, 2013, 01:56:53 AM
  • Eat rocks
Re: Font Creation 101
« Reply #3 on: June 14, 2009, 10:09:39 PM »
I did this but it wont work for me i keep getting this error. it says it can't read my font, error loading fight.def and loading data/system.def 
wut happed :-??

Offline Rage

  • IMT Princess
  • IMT Content Architect
  • *
  • Posts: 7305
  • Country: United States us
  • Last Login:Today at 03:11:36 AM
  • The trend setter
Re: Font Creation 101
« Reply #4 on: June 14, 2009, 10:18:40 PM »
I did this but it wont work for me i keep getting this error. it says it can't read my font, error loading fight.def and loading data/system.def 
wut happed :-??

Hoped u backed up ur file b4 u edited em  ;*))

I AM THE PRINCESS. LOVE ME!!!     
Proud supporter of CROM                 DONT CLICK THIS LINK...

Offline DJ990J

  • Initiate
  • **
  • Posts: 50
  • Last Login:January 13, 2013, 01:56:53 AM
  • Eat rocks
Re: Font Creation 101
« Reply #5 on: June 14, 2009, 10:24:44 PM »
Hoped u backed up ur file b4 u edited em  ;*))
actually i can edit the files and go back in to them and fix them
yeah thats how good i am  ^-^

Offline Rage

  • IMT Princess
  • IMT Content Architect
  • *
  • Posts: 7305
  • Country: United States us
  • Last Login:Today at 03:11:36 AM
  • The trend setter
Re: Font Creation 101
« Reply #6 on: June 14, 2009, 10:48:00 PM »
actually i can edit the files and go back in to them and fix them
yeah thats how good i am  ^-^

if ur that good then y u cant get it to work. ;*))

I AM THE PRINCESS. LOVE ME!!!     
Proud supporter of CROM                 DONT CLICK THIS LINK...

Offline DJ990J

  • Initiate
  • **
  • Posts: 50
  • Last Login:January 13, 2013, 01:56:53 AM
  • Eat rocks
Re: Font Creation 101
« Reply #7 on: June 14, 2009, 10:54:37 PM »
...........i dont no O.O

Offline Rage

  • IMT Princess
  • IMT Content Architect
  • *
  • Posts: 7305
  • Country: United States us
  • Last Login:Today at 03:11:36 AM
  • The trend setter
Re: Font Creation 101
« Reply #8 on: June 15, 2009, 10:27:35 PM »

I AM THE PRINCESS. LOVE ME!!!     
Proud supporter of CROM                 DONT CLICK THIS LINK...

Offline Playing Enemy

  • Portrait & Screenpack Creator
  • Contributor
  • ****
  • Posts: 911
  • Last Login:December 26, 2018, 03:59:17 PM
  • THE HARD GOODBYE
    • Royalty7 - The best decision I ever made
    • Email
Re: Font Creation 101
« Reply #9 on: June 15, 2009, 10:56:02 PM »
I did this but it wont work for me i keep getting this error. it says it can't read my font, error loading fight.def and loading data/system.def 
wut happed :-??
I was getting that same error. Just open your font in font factory, and under character size, set the width to 1. I had mine set to zero and it wasn't working, then set it to 1, and it worked. Hope that helps. :)


        "Maybe I am what they say I am.  A maniac...a psycho killer."

Offline DJ990J

  • Initiate
  • **
  • Posts: 50
  • Last Login:January 13, 2013, 01:56:53 AM
  • Eat rocks
Re: Font Creation 101
« Reply #10 on: June 15, 2009, 11:38:57 PM »
I was getting that same error. Just open your font in font factory, and under character size, set the width to 1. I had mine set to zero and it wasn't working, then set it to 1, and it worked. Hope that helps. :)
much tanx  :)

Tags:
 


* IMT Facebook

Help us by Donating!

IMT Discord

Join us at our Discord! Click the image below!

* IMT Shoutbox

Sorry, this shoutbox does not exist.

* Recent Posts

* IMT Calendar

April 2024
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 [29] 30

SimplePortal 2.3.5 © 2008-2012, SimplePortal