welcome!

Hi, my name is Isaac (monospace) and you're visiting my picture font guide! I've been making picture fonts for a long time so I decided I'd share my knowledge :)
This guide is made with the assumption that you already know a thing or two about basic neoHTML. If you don't, there's a great guide in the Neopian Times. Just search "fonts" in the search bar and click on the first article.
[most recent update: 7/20/14]

intro to pic fonts

Even if you think you know what a picture font is, I'd still suggest at least skimming over this section just in case :P
Well, the basic concept behind a picture font is pretty self-explanatory. It's a neoboard font (aka siggy) which creates a picture. There are actually multiple types of characters that people use to create a picture fonts, including symbols (think siggy pets) and words, but I'll be focusing on solid blocks. They look like this in a font:
Obviously, the font is a peace sign. Underneath the picture is a caption, but the focus of the font is the image. Pretty cool, right? ;D

⇧top

step-by-step

Now, on to the actual guide. I'm gonna go through the steps of making a font (in this case, a pear) and teach as I go. Keep in mind that the order of these steps doesn't actually matter. You can go about making a font however you want; I just used this format to make the guide easy to use.
PS: You can use the pear as a premade if you want to! It does not require a Neoboard Pen - not all picture fonts do! Don't take credit for making it, please.

starting out.

Obviously, you need to have a concept behind your font before you start it (usually). Any good font is unique and original, so I devoted a few words to that here. I like pears, so that's what my font is gonna be. :P I'm using the baby buzz avatar because the colors work well for the picture. You can get colors from an avatar with Sunnyneo's online eyedropper (sunnyneo.com/eyedropper).
Before you start your picture, set up your basic code so it looks something like this:

NeoHTML box:
[center][fontf=verdanac=#6287B2s=1]neoHTML[/font][
NeoSignature box:
][/center]
Screenshot:

⇧top

building the picture.

Next, start the actual picture. There are 5 basic blocks to use: █, ▀, ▄, ▌ and ▐ (full, top, bottom, left and right, respectively). There are a lot more block characters out there, but I've found that the 5 above are the only really useful ones because they all have the same width. Experiment if you want, though!
The top and bottom blocks can be used to give the illusion of a slope or curve in your picture. Spacing the blocks differently from line to line changes the slope.
It's usually easiest not to change the font face of your picture and keep it as the automatic Arial. I talk about using other fonts here, though.

NeoHTML box:
[center][fontf=verdanac=#6287B2s=1]neoHTML[/font][p][fontc=#A1FFA0]▄███▄[br]██████[br]▄██████▄[br]█████████[br]████████[
NeoSignature box:
]█[br]▀███████▀[/font][/center]
Screenshot:

⇧top

adding detail.

Now that the basic design is done, I added some detail to make the pear more pear-like and attractive. On the right side, I gave it a little shine with top and bottom blocks. I also decided to add a stem at the top to add to the pear's pearness, but I had already reached the character limit in the NeoHTML box! To deal with this, I moved down enough stuff down to the NeoSignature box for me to work on the stem at the top. Once I finished that code, I just moved enough code to fill up the NeoHTML box again (it can be very important to fill up both boxes as much as possible because picture fonts take up a lot of code).

NeoHTML box:
[center][fontf=verdanac=#6287B2s=1]neoHTML[/font][p][fontc=#D4D4A7]█▀[/font][br][fontc=#A1FFA0]▄███▄[br]██████[br]▄████[
NeoSignature box:
]▀█▄[br]██████▄██[br]█████████[br]▀███████▀[/font][/center]
Screenshot:

⇧top

pasteable spaces.

A frustrating issue for a lot of font makers is creating empty space. Usually, users who can't figure out how to get around this use white letters (with either c=#FFFFFE or c=snow). There's a much better way though! It deals with pasteable spaces, which are basically regular characters which are completely blank. If you've ever tried to push text over with spaces you make with your space bar, you know that they end up showing up as only one space.
Although they are extremely helpful, they can be a bit tricky to use. For some reason - I'm not sure what it is - you can't copy-and-paste this space from one source to another. If you have a font saved using these, you may have to add them back in each time you use the font. They are about half as wide as blocks, which can be a bit of a problem (there is an exception, which I explain here). On a PC, you can get these spaces by pressing alt+255 (if you're on a laptop with no number pad, it's alt+fn+255). On a Mac, the shortcut is option+space.

NeoHTML box:
[center][fontf=verdanac=#6287B2s=1]neoHTML[/font][p][fontc=#D4D4A7] █▀[/font][br][fontc=#A1FFA0]▄███▄[br]██████[br]▄███[
NeoSignature Box:
]█▀█▄[br]██████▄██[br]█████████[br]▀███████▀[/font][/center]
Screenshot:
NOTE: There is another type of pasteable space which I used to include in my guide because it's wider than the alt+255 ones and easier to use. Unfortunately, these stopped showing up on the Neoboards one day, and I replaced them on the guide with even wider ones which worked the same way. Since then, I have discovered that those show up with different widths on different browsers, so I removed them. If you still want to use them, there are some at this page and between these brackets: {  }

⇧top

caption.

A caption isn't always necessary in a picture font. In fact, if your font is clear and accurate enough, a viewer should be able to tell what it is without a caption. Sometimes, you may simply not have enough space for another line of text. If you do decide to add one, it's usually best to keep it simple and focus more on the picture. Adding some alt letters from here can make your caption cool-looking. Since I'm not feeling especially original right now, I'll just make my caption say "pεar! ♥".

NeoHTML box:
[center][fontf=verdanac=#6287B2s=1]neoHTML[/font][p][fontc=#D4D4A7] █▀[/font][br][fontc=#A1FFA0]▄███▄[br]██████[br]▄███[
NeoSignature box:
]█▀█▄[br]██████▄██[br]█████████[br]▀███████▀[/font][p][fontf=georgiac=#B0C9EFs=4][b][i]pεar! [/i][/b]♥[/font][/center]
Screenshot:

⇧top

tips

⇧top

sitely

Affiliates:

[Contact me if you want to affiliate]

Listed at:


Link back:




[click for credit]

⇧top

credit

CSS, images and content are by me (monospace). Credit goes to w3schools for helping me with CSS. Code for the hit counter is by BoingDragon.

⇧top






Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® 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