Converting Images to Fonts, Part 3: Making your Black and White

By Alex on August 8, 2008 5:44 PM | Permalink | TrackBacks (0)

As you know, fonts normally come in a single color. Essentially, each letter is a shape - and the computer needs to describe your logo as a shape as well. Therefore, you need to reduce your logo into one or more black-and-white images that correspond to the regions you want the computer to fill when you're using your font.

Incidentally, the very basic techniques we'll use in Photoshop might help you with other matte and compositing work as well.

To start, grab a copy of your logo - it should be the highest resolution you can find - and open it in Photoshop. In my case, I've grabbed the GeniusDV logo right from the front page of this website. This is considerably smaller in size than the ideal, but it'll give us an idea of how powerful the shape-tracing process can be. Plus, it's all I have right now.

Now that you have your logo open, use the Magic Wand tool (like below, or press Shift-W twice). The Magic Wand will let you select areas with similar colors. Look at the top of your screen - you can set the tolerance for the tool (smaller values are "stricter," insofar as they require colors to be more similar in order to include them in the selection), and you can set whether the selection is contiguous or spans the entire image. For logo work, you'll probably want to uncheck the Contiguous box.

Now, the magic part - just click on a part of your logo that you'll want to fill for the font, and Photoshop selects the whole shape. If, like in our case here, you have a few different regions that you want to select at once, simply hold down on the Shift key to add regions to the current selection.

To pull this selection out from the image, just (1) create a new layer (Mac: Cmd+Shift+N, Windows: Ctl+Shift+N), (2) make sure your color has black in the background, and (3) press Backfill (Mac: Cmd+Delete, Windows: Ctl+Backspace). Finally, (4) turn off the original image.

Simply save this black-and-white file as a Bitmap (File->Save As..., then pick Bitmap under the Format drop-down), and you're all set for the next part: making your font.