Tutorial: How to make & use your own Photo Fonts

September 6, 2010 · 8 comments

in Crafts,Photoshop,Tutorials

Photo Fonts allow users to break away from traditional lettering, and use fonts made from real everyday objects, scanned doodles, painted brush strokes, or whatever your imagination can dream up!

TrueType fonts are restricted to monochrome outlines, while Bitmap fonts use the full colour pallet and alpha transparency.

Photo Fonts are a series of intelligent bitmap images that work like a standard TrueType font, meaning that you type as normal and the Photo Fonts appear for the corresponding keyboard characters.

You can create your own Photo font by following the steps below.

Step 1: Decide on your subject matter

You need to start by deciding if you’re going to photograph real characters (such as signage, number plates and so on, like I have), shapes in nature (patterns which form letters and numbers) or create your own characters using anything you can possible imagine!

To get a little inspiration before you embark on your Photo Font expedition, be sure to check out www.handmadefont.com. Estonian design entrepreneurs, Vladimir and Maksim Loginov, have set up a Photo Font business selling their unique, handmade character maps as high-resolution transparent PDF files. Their vast collection of typefaces includes ketchup, French fries, bread crusts, lego, post-its, bent wire, toothpaste and even fake poo! They are constantly developing new themes, and work on commissions for advertising, packaging and print.

Step 2: Organise your images

Once you have shot, downloaded and edited your images, save them in an organised manner for easy reference later. You may end up with several images for the same character, so save the individual files logically, A 01, A 02, A03 and so forth.

Step 3: Chose an Application to work with

There are three ways that you can use your handmade Photo Fonts:

Option1: Bitfonter
Bitfonter is a widely used application because it automatically detects letter shapes, removes the background if needed, and converts the image into a Photo Font. Additionally, Bitfonter has a metrics and kerning editor, so if need be, you can refine the spacing of your font.
Bitfonter costs around R3800, so if you are not willing to spend that on making a pretty font, then see options 2 and 3.

Option 2: Photofont Start Plugin
There are two free plug-ins are available to download for PC and Mac. Photofont Start allows users to install and use Photo Fonts inside Photoshop and other applications that can use Photoshop plugins, while Photofont ID can be used with InDesign. You can download Photofont Start at http://www.fontlab.com/photofont/start/
The downside of converting your characters into a typeface, if that you can only have one image per character.

Option 3: Photoshop
You are most likely going to make a Photo Font to create specific headings or words, and not for writing a page of text. In that case, as you may have several images you like for the same character, working in Photoshop gives you more control over the choice of image per character, as well as the size and placement thereof.
Although you have much more control using Photoshop, it is the most manual method, and a little more time consuming, as each character does not correspond to the character on your keyboard.

This tutorial uses Photoshop for placement of your Photo Fonts.

Step 4: How to place your characters using Photoshop

4.1. Display your images as thumbnails in a separate window. By having your images labelled correctly, you can quickly look for a character as they are displayed in alphabetical order.

4.2. Open a new document in Photoshop, by selecting File > New. In the pop-up window, name the file, and set the image dimensions.

4.3. Select a character thumbnail from the window, click on it and drag it into Photoshop.

4.4. Once the character image has opened, select the Move Tool, click on the image and drag it into your new document.

If you look on your Layers menu, you will see that the character has been placed onto a new layer. For ease of reference, rename this layer so it is the same character. To rename the layer, double click on the word Layer 1, rename it, and press enter.

4.5. To resize the character, select Ctrl T, hold in Shift to maintain the proportions, click on the corner of the selection box, and resize to the desired size. Click Enter to confirm the change. Use the Move Tool to reposition the character as needed.

4.6. To rotate the character, select Ctrl T, place your curser near the corner of the selection box, and turn the box left or right. Click Enter to confirm the change. Use the Move Tool to reposition the character as needed.

4.7. Repeat steps 4.3 – 4.6 with the remaining characters to form your word.

4.8. Some Photo Fonts look better with a slight drop shadow to create depth and the illusion of 3D.

To create a drop shadow, duplicate the Layer, by right clicking on it and selecting Duplicate Layer. Now select the bottom of the two layers, and from the Image menu, select Adjustments > Hue & Saturation. On the pop up window, move the Saturation and Lightness sliders to the far left, so the image on the bottom of the two layers goes completely black. Change the opacity of this layer to between 25 – 35% depending on personal preference, and using the Move Tool or your keyboard arrows, nudge the shadow layer slightly sideways and slightly downwards. Lastly, soften the shadow by applying a Gausian Blur from the Filter menu, and enter a radius of between 2 – 5 pixels depending on personal preference. Merge the character with the drop shadow, by selecting the top of the two layers, and then selecting Merge Down from the drop down menu on the Layers menu. This will enable you to move the character around, with its drop shadow linked to it. Now repeat this drop shadow process with the remaining characters.

4.9. Once you have finished adjusting your characters save a flattened version, by selecting Flatten Image from the drop down menu on the Layers menu.

Have fun making customised Photo Fonts!

When shooting your characters, remember that 6’s can be used upside down to form 9’s, some I’s can be used as 1’s, some N’s can be used sideways as Z’s, some 3’s and be used upside down as E’s, and some M’s can be used upside down as W’s.

{ 7 comments… read them below or add one }

Erika van Zyl September 6, 2010 at 11:14 am

This is absolutely brilliant – I am going to pass it on to our layout artists and designers so they can make up their own photo fonts for the various publications (eg bricks for Construction World or Housing in South Africa). Fabulous!

rikki hibbert September 6, 2010 at 11:17 am

That will look fabulous! The possibilities with Photo Fonts are ENDLESS!

Erika van Zyl September 6, 2010 at 11:18 am

I’ve copied this link and emailed it to the designers so expect a response!

rikki hibbert September 6, 2010 at 11:22 am

Great! They can call me if they need any assistance ;-)

L'Zeri Swart September 6, 2010 at 12:52 pm

Interesting – and so creative…

rikki hibbert September 6, 2010 at 12:55 pm

Thanks ;-)

Julian September 6, 2010 at 9:50 pm

Fan-flippin-tastic! Brilliant. I see a lot developing out of this style.

Leave a Comment

{ 1 trackback }

Previous post:

Next post: