How to create a Bitmap Font, with Photoshop?


I want to create a custom font to use for a game, and it must be a Bitmap font. So the spacing etc between characters must be equal. Now I don't know much of Bitmap fonts.

The font itself will be a black Century Gothic with a white stroke. I could just type in the alphabet and apply a Stroke effect, but this wont ensure equal spacings.

What could be the best way to create such a bitmap font? (Or if any exists already just tell me)

5/2/2012 1:30:00 PM

There's no way to create a font, per se, directly out of Photoshop, so I'll answer based on what Photoshop can do, which is create images. This is an adaptation of a trick I picked up from the brilliant Angie Taylor, of After Effects fame.

  • Make a text file with something like "characters" on the first line, and one character on each line below.

  • Set up a Photoshop file that is the size you will need for your characters.

  • Create a text character, centered on the layer, and style it the way you want it.

  • Define a Text Replacement variable (image > variables > define), naming the variable using whatever is on that top line of the text file, and import your text file as the dataset.

  • Run File > Export > Data Sets as Files

You will have a collection of identically-sized files you can then a) load into layers (via Bridge Tools > Photoshop > Load Files into Photoshop Layers...) and turn into a sprite sheet using Horatio's script, or b) assemble as needed in your project.

5/3/2012 5:24:00 AM