NeoFontGuide
Page deticated to Howtomakefonts the Ice Bori. Sadly, the account she was on got iced, and I can no longer update her page... My main is avrilfangirl (not seasawgirl!!!) seasawgirl is my side account!
My main is avrilfangirl (not seasawgirl!!!) seasawgirl is my side account.




So you want to make a font, huh? You've come to the right place. Here you have an in-depth guide for any skill level. Fonts are something to spruce up your message on the neoboards and guild boards to bring attention to your post. The default message will look something like...



...like that. Now we don't want that, do we? If you do want that then turn back now...




†††Getting Started - PreLesson

To get started you need to open up the chat preferences page. Mostly, I will talk about the NeoHTML box, but sometimes I'll say something to do with the NeoSignature (siggy) box so pay attention and know the differences!





†††The Basics - Lesson One

Making a font involves using tags. Tags are what you also use in HTML. NeoHTML is quite the same, so if you are good at HTML, neoHTML should be easy. In neoHTML, a tag starts and ends with a square bracket like this: [ ]. (Is it a called a square bracket? What's the official name? If you know please neomail me!) In the square bracket (hereforth known as SB), you have your coding. Everything outside a SB will show up on your post, but everything inside your SB's will be hidden if you code them right. Coding a start tag consists of a key word, (there are a few exceptions), a change word(what you want to change), an equal sign (=), and your modification(s). Modifications are how you change your font (color, size, style, etc.). This info might seem a bit much, so reread this paragraph carefully. If you still don't get it, continue on, there will be some examples that can show you.

In my guide I'll use a color key. Things in red are the key words, things in green are change words, and things in blue are modifications. ***Remeber: modifications can change, but the key word stays the same. Change words are preset codes, but you can switch them around.
[Key WordChange Word=Modification]
Examples in action!
[fonts=1]
[fontc=orange]

What does 'c' and 's' mean??? C means color and S means size. neoHTML shortens it so you have more room.

Now that we understand the start tag we need to know the end tag rules. End tags are almost like start tags. They are enclosed in SBs. The one thing thats different is they don't have a modification or a change word. That was already determined in the start tag (above). They only have a key word, and a slash. let me show you.

[/Key Word]
Example!
[/font]

The slash stands for "end", so the example would mean "end font code". Every code in neoHTML needs an end tag. An end code almost symbolizes "stop making the font (modification)" or "stop making the font orange"! Got end tags? Good.

Start tags and end tags work together in your font code. Between them you put the actual text.

On my color codes, actual text (the text you want to show up in your message) will appear in purple.
[key wordchange word=modification] Text goes here... [/key word]
Example!
[fontc=yellow] Text goes here... [/font]

[fontc=yellow]text here[/font] would appear like this on the neoboards:


One more thing... that code was posted directly into the message box:


But we dont want to have to post that every time! Put it into your neoHTML box (see getting started) but change your actual text into the word "neoHTML" (without quotes) and you'll be set. You see, the word neoHTML, when posted in the neoHTML box will magically turn into what you type in your message box... eh, look at this image, it might help!


That should explain some. Well, thats all there is to the basics section. I hope it help a little bit... Now on to the next lesson!




†††Tags - Lesson Two
Tags? But we already learned about tags!! Yes, I know. This section is the different key words, change words, and modifications you can put into your tag. Lets hope you read the first lesson completely with your full attention on it, or now you'll be very confused...

KEY WORDS- TNT took away glow and shadow tags. :( So now you only have seven key words to use. Mind you, only the first one you can use chanege words and modifications, so we'll leave off the other ones 'till another section. So we'll be using the keyword named font.

CHANGE WORDS- there are three change words you can use with the "font" keyword. They are as follows: s, c, f. s=size, c=color f=face. Size and color are quite obvious, but face might be a new word to your neoHTML vocabulary. Face means the style of font (arial, papyrus, wingdings, etc) Note that you can only use faces that are one word long. If it has a space in it it's unuseable.

MODIFICATIONS- There are THOUSANDS, maybe MILLIONS of modification words, but don't get discouraged! Color modifications include "red, yellow, green, blue, steelblue, etc etc" and more. You can use those, or a hex code which is a six-digit number/letter combo that will make any color in the universe. Hence the "THOUSANDS, maybe MILLIONS of modification words". You can find color codes on various sites, like Drappastar's page or even get exact codes off paint programs like jasc paint shop pro. There are only seven size modifications (whew!) and they are 1234567! I'm not sure if all of the size modifications show up for every face on the neoboards, so keep that in mind. Oh, and don't use extremely small or big fonts to get on people's nerves! Face modifications are, again, any face (arial, papyrus, wingdings etc) that DOES NOT HAVE A SPACE IN IT.

Now that you know all of the tag words you can use, here are a couple examples:

[fontc=yellow] neoHTML [/font]
[fonts=4] neoHTML [/font]



†††More Tags - Lesson Three
MORE tags?! You've gotta be kidding me... I know. Last lesson you have to learn on tags, I promise! These are quite easy since the don't have modifications or change one, just a keyword. Here they are:

[center]neoHTML[/center]
[b]neoHTML[/b]
[i]neoHTML[/i]
[u]neoHTML[/u]
[sup]neoHTML[/sup]
[sub]neoHTML[/sub]


Center= centers the font
b= bold; makes the font bold
i= italic; makes the font italic
u= underlined; makes the font underlined
sup= superscript; elevates the font
sub= subscript; lowers the font

Enjoy!




†††Combinations - Lesson Four

Wait! I want to center my font, make it green, make it size 4 and have it bold all at once! Help? I knew you'd ask! Combinding tags is quite simple, just remember that you can only put the word "neoHTML" in your font once or you'll get this:


Evil fuzzles? TNT needs to explain things better. So I made this image showing what WOULD happen IF you could write neoHTML more then once:

You don't want that either... so here is how you can combind them without writing neoHTML more then once.

Step one: Put all of your start tags together, WITHOUT the word neoHTML or their end tags. Now, put in neoHTML. Then do all of the end tags. Eureka! Combinded! Example:

[fontc=reds=4][center][b]neoHTML[/font][/center][/b]

Whoa! How did you combind size and color with one keyword? Since size and color change words share the same key word, keep them grouped together as shown in the example. Anything that shares a common key word is grouped together.



†††Making More Room - Lesson Five

Yikes! Don't have enough room to fit in your end tags? Want to get rid of that evil siggy line? There's a solution for both! Study the following image:




See how I put the end codes in the siggy? See the SB's highlighted in red? The red SB's get rid of the siggy line and make the siggy like "connected" to your neoHTML box. Amazing right? But wait, the preview is messed up! Don't pay attention ever to your preview, because it's 50% wrong. Always post on a test board and see what it looks like!




†††Borders and Siggies - Lesson Six
Ok, from here on out this is the making your font look fancy. Ooh-la-la! I got some examples from great font makers right here:
















**In no way am I saying you should copy these fonts. These are some examples of what you can, in turn, learn. These people worked hard on their font so you should too!**

Now that we see the examples, and now that you're drooling over them, lets get started! We'll tackle borders first because if you know how to do a border, chances are you'll fly through the siggy course. Ok, we'll start with how the tags should be placed. Here is an example for an easy border:

[center][fontc=red]I say:[/font][fontc=blue]neoHTML[/font][
][fontc=red]:I'm done.[/font][/center]
(top line is neoHTML box, bottom line is siggy line)
How it would look when you post:


Oh, study the code carefully, see how I made it say "I say" instead of "neoHTML" and look at how it turned out! But I want the border on TOP of my words!!! Ok Ok, as you probably figured out, you can't "enter" on the neoHTML box. You use a special tag. [br] is the tag for pressing "enter" without actually pressing it. Weird, huh? Well, this is the only code (that I can think of) in neoHTML that does not have an end tag! Nope, it's a code all by itself. In my color guide I'll make it grey.

[center][fontc=red]I say:[/font][br][fontc=blue]neoHTML[/font][br][
][fontc=red]:I'm done.[/font][/center]
How it will look when you post:

On to siggies. Almost the same as borders, so I'll give you an example code and send you on your way. =)

[center][fontc=red]I say:[/font][br][fontc=blue]neoHTML[/font][br][
][fontc=red]:I'm done.[/font][br][fontc=orange]I love NeoFontGuide!![/font][/center]


I'm just as tired as you are ;p I'm sure you can figure this one out. But I want those fancy borders!!! How do I do that? Make your font face (remember [fontc=redf=arial]?) wingdings and look at a wingdings chart to see. :) Mindlessinvalid.com has a great wingdings and alt chart to build all kinds of borders! But *slaps your hand* don't get greedy with the premades: make your own! Did I do this guide for nothing? *looks at clock* I've been here for five hours writing this... and I'm not done :P



†††Share the Knowledge - Lesson Seven

Use these links below to show people that they, too, can learn how to make fonts! Just copy and paste the code into your lookup or shop or guild or website. And when someone on the neoboards is asking for a font, tell them to come here so they can learn. =)





NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions