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 realized 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 standardize 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.
Color 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.
Color 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). 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 1000x1000. I set up 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.
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.
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. 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 realize you've got your favorites—too late now. The inspiration for my bright and showy colors was the artist Ben Eine. In another life, I worked just off Old Street in London (hipster central) and walked past one of Ben's type works every day. Such bold colors—loved it.
5. Adding a Baseline Before Converting
Now I just added a single Photoshop guide for the baseline for my font—job done.
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. That's it my first color bitmap font, it certainly is very bold and very colorful. I'm not totally sure I got the colors right, but it's too late now.
Circus Freak
The upper and lowercase glyphs use different colors. Color and texture are part of the font. Includes standard punctuation, numbers & symbols. 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?
Download Circus Freak Free
As this was an experiment and color 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 cannot be distributed by individuals, bulletin board systems, FTP sites, WWW sites, etc., without prior permission.