color bitmap font circus freak

Creating color bitmap font in photoshop using fontself maker

What do I think of color bitmap fonts? Never even gave it a thought. Funny that as I was asked by the fontself team if I would be interested in trying out their new fontself photoshop extension. It makes creating color bitmap fonts in photoshop a breeze.

I’ve been using fontself maker for illustrator for a while now. It really helps speed up my workflow when creating fonts in illustrator. No more copy, paste, copy paste.

I thought this new photoshop extension sounded interesting, I was intrigued—let’s take a look-see.

Color bitmap font let that sink in

I quickly realised that the photoshop extension won’t just create a regular font, no sir.

It will create a full color bitmap font.

You will think color font? I can already do that. Yeah but only a single flat color.

How about a color bitmap font with millions of colors with texture or whatever you want.

Your reaction should be Holy shit. When the hell did that happen?

This could be a game changer.

Color fonts a brief history

The technology has actually been around for a while. It’s just that Apple and Google went down one road and Microsoft went down another—typical.

The result is two different implementations and thus support is not fully widespread. Different operating systems are using different color formats, and the same applies to your applications. Some apps support it, some don’t.

But wait.

Change is in the air

That might all be about to change. The key players are working on OpenType SVG. The hope is this will standardise the use of color fonts. Meaning we all get full support for both Mac and PC regardless of what application you are using.

The good news is things are evolving quickly. I already found that Typekit are offering color fonts. Seems like people are starting to push the technology forward.

Colour fonts on the Mac

Every native app since 10.7 supports Apple color bitmap fonts. They can be used in apps like TextEdit, Safari, Keynote and Pages and as I have just found out the latest version of Photoshop CC 2017.

Colour fonts on Windows

Windows 8.1 introduced color vector fonts via the COLR/CPAL tables, and Windows 10 Anniversary introduced support for OpenType SVG fonts along with Apple’s and Google’s bitmap font formats, essentially in the latest Edge browser (these fonts won’t show up yet in Word or Powerpoint).

I don’t own a PC so am unable to test if it works with the new Photoshop 2017.

How I created my first color bitmap font

Now I recently created a font called Circus Freak. It’s a traditional layer font or chromatic font.

It consists of 4 styles that you place one on top of the other. You can then change the color of each layer to create whatever color mix you want (see demo below).

color bitmap font

My original Circus Freak font has 4 layers.

When I say color I mean a single flat color—what I’m about to make will blow that idea out of the water.

From single color to millions of colors

Circus Freak would be the perfect choice to create my first color font. I’ve done the hard work, so time to get busy.

I thought it would be a cool idea to merge those 4 layers to create just 1. It would save time and be much easier to use.

This time I would be creating it in Photoshop CC 2017, with the fontself plugin.

1. Setting up my photoshop file

Fontself instructions say set your canvas no bigger than 1000×1000. I setup my photoshop canvas at 600 x 600 pixels wide.

I then used my font Circus Freak to type the letter “A”—I decided to use only 3 layers. I’ll use this letter A as a template for all the other glyphs I’ll be creating.

Colour font in photoshop

My canvas in photoshop 600 x 600 pixels plus my first letter

2. Adding color adjustment and texture

I added a new color adjustment layer/Hue/Saturation to each type layer. My thinking was that if I use an adjustment layer I can quickly change the color in all my other layers. That’s the color sorted.

Now for some texture

I then added a layer mask to each type layer that I got from my new letterpress kit. I scaled and rotated it into place. Now it has the grunge look and feel that I’m after.

I’ll rotate the texture some of the glyphs to give it a more random look.

Adding texture and colour adjustment layers

Adding texture and colour adjustment layers

3. Adding all the other characters

Now the boring bit, I duplicated the layer many times. I then edited each type layer and manually typed B, C, D, E, F, G—you get the idea right.

Creating all the colour glyphs

Creating all the colour glyphs

It’s a ball ache but worth it in the end.

4. Changing the colors

Now I had all the glyphs but they were the same color. Another boring bit, I had to edit each color adjustment layer so each glyph looked different.

You would think picking a random color was easy. Try doing it 160 times or more and you realise you’ve got your favourites—too late now.

The final color font a quick sample

The final color bitmap font a quick sample

The inspiration for my bright and showy color’s was the artist Ben Eine. In another life, I worked just off Old Street in London (hipster central) and walked past one of Bens type works every day. Such bold colors—loved it.

Ben Eine's colourful street art

Ben Eine’s colourful street art

5. Adding a baseline before converting

Now I just added a single photoshop guide for the baseline for my font—job done.

Adding the baseline

Adding the baseline

6. Converting to a font

The last step was to use fontself to convert my images to a font. All you need to do is select each layer and type the letter into fontself.

I used a plugin to record my screen actions to speed this up. As I had the font all named I could copy the folder name and paste it into fontself. I recorded myself doing this once then ran it 160 times. I love automation when it works properly.

Converting the A with fontself

Converting the A with fontself

That’s it my first color bitmap font, it certainly is very bold and very colourful. I’m not totally sure I got the colors right, but it’s too late now.

Circus Freak

Shown below is the full-color font in photoshop. I’ve not added any layer effects or color. What you are seeing is what the font creates—Neat huh?

The upper and lowercase glyphs use different colors

The upper and lowercase glyphs use different colors

Colour and texture are part of the font

The colour and the texture are part of the font

Includes standard punctuation, numbers & Symbols

Includes standard punctuation, numbers & Symbols

Download Circus Freak Free

As this was an experiment and colour font support is limited, and I’m a nice guy I’m giving this font away for free. So download and test this little bugger, and let me know if you use it for anything.

Use Circus Freak for free—personal and commercial use is okay. Please note that support is limited, if you are on a mac it works in Photoshop cc 2017, TextEdit, Safari, Keynote and Pages. It should also work in any native apple application. The font format is .OTF and it includes

  • Uppercase glyphs only (but lowercase do work as alternative colors)
  • Numbers
  • Standard punctuation
  • Standard symbols

Please note: Although this font is free, it can not be distributed by individuals, bulletin board systems, FTP sites, WWW sites, etc., without prior permission.

Get Circus Freak

If you want to create your own font in photoshop head over to Fontself maker.

That is all.

No Comments

Leave a Comment: