neopets contact prefs
intro guide tips sitely credit

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: 5/19/13]

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: NeoSignature box: 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: NeoSignature box: 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: NeoSignature box: 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 the other spaces, which can be an advantage sometimes. This can be a bit of a problem though because they're not the same width as 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.

NeoHTML box: NeoSignature Box: 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: NeoSignature box: 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 you have this issue, 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!
• Block/text fonts: You can, of course, put the techniques in this guide to use making text out of symbols. If you're having trouble doing this yourself, there's a superb generator here:
  http://www.sunnyneo.com/siggenerator/
  which I totally recommend. If you want something more unique and original, my advice is to keep the letters as basic as you can, at least when you're starting out. The font I use to advertise this site is a good example of this, although you can't make the whole alphabet in this style and the "E" ended up looking a bit funky.
  
  
  
  [Thank you Tai for suggesting this tip!]
• 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

sitely

Affiliates:

[Contact me if you want to affiliate]

Listed at:


Link back:
<a href="/~BoardPaint"><img src="http://i317.photobucket.com/albums/mm376/horslover639/buttonnumber67b.gif" border="0"></a>
<a href="/~BoardPaint"><img src="http://i220.photobucket.com/albums/dd225/ashleygraphics/987.gif" border="0"></a>
<a href="/~BoardPaint"><img src="http://i52.tinypic.com/5tyrf4.jpg" border="0"></a>
<a href="http://www.neopets.com/~BoardPaint"><img src="http://i51.tinypic.com/xcknki.gif" border="0"></a>
[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