BoardPaint got their homepage at Neopets.com

welcome!

Hi, my name is Isaac (butactually) 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: 4/1/12]
Important information on a recent neoHTML glitch!

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 eyedrop colors from an avatar on a site called Sunnyneo (it's offsite so you'll have to find it yourself though ;P)
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! Well, there are two very similar ways, actually. They both deal 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.

The first kind of pasteable space you have to copy-and-paste from another source to use. There's one between these two brackets: {　}, and there's a bunch on this symbols guide. I would suggest either bookmarking the Symbols Collection or keeping a pasteable space on a document or something which you can find easily.

Update 2/17/12: Recently, the first form of pasteable spaces which I used started to malfunction on the neoboards. It seems you can no longer use them! If your old picture fonts are breaking, I updated to include a different space, which you can copy & paste the same way as the old one! Sadly, the new one is significantly wider than the older one so it might make things look wacky. :(

The second kind is a little trickier 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 the other spaces, which can be an advantage sometimes. The problem with both kinds, though, is that they're narrower than the normal blocks (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.
For our example, I moved the stem of the pear over using the first kind of 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:

⇧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, my caption is "pεar! ♥" xD

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

Different font faces: Most faces besides Arial look bad in a picture font, but there is one exception: Monospace. The most important advantage that Monospace has over Arial is that the alt+255 pasteable spaces are the same width as all other characters. This makes aligning fonts much easier. Also, there are no thin white lines between lines of blocks like there are otherwise. So why not always use Monospace? Well, "f=monospace" takes up 11 characters, which can make fitting your picture in very difficult, especially if your picture has multiple colors and/or you don't have a Neoboard Pen. Courier, another fixed-width face, has fewer characters in its name but it doesn't work in all browsers so I'd advise against using it. Be aware that Monospace does have issues for some people, although it works fine in most cases.
Finding inspiration: Originality is important, but it's hard to be original. There have been a zillion Christmas trees, hearts, and other clichés because they're easy to make and easy to think of. My advice is to actively look around for inspiration. Check out your favorite avatars or look around your physical surroundings for something that you think would look good. Find something that you can plan out in your head and get started. Try to challenge yourself, too!
Planning: For a lot of people, starting a picture font with the top line and working downwards is difficult and a big stumbling block to making any complex font. If this is you (and there's a very good chance that it is), I'd suggest trying to create the picture in MS Word or another text editor. Then, you can add the necessary tags and put it into your font! But keep in mind: There is a very tight limit on characters when you're making your font, but your text editor has no limit. Take this into account, especially if you're using multiple colors!
If you have any questions or suggestions for this section, please neomail me! I'm always open to suggestions and any other kind of mail but I don't get on every day. I'll try to respond ASAP but don't get upset if I don't send anything for a few days.

⇧top