Hopefully this guide I’m creating will be helpful for others who are making pixel fonts and trying to use Fontself to create them in Illustrator.
I would appreciate any feedback on the document. Right now I’m mainly looking for feedback on workflow, mostly because I’m trying to keep the font tweaking to a minimum while I work on the graphic design for the project that will use the font. So if I can make things efficient, I get to do the fun stuff, not the font stuff.
Caveat: Please, no quick takes, and stay on topic! Please read the post, open the illustrator file, ideally try the workflow before posting. If you post a long professorial rant, you obviously have too much time to waste and I will put you to work!
My questions are all detailed in the AI file, but to summarize them here:
- What’s up with AI Image Trace not being able to work with small bitmaps?
- Is it useful if Fontself could remove white background for you, or ignore it on Fontself import?
- Grouping glyphs is annoying for regular fonts, but pure hell for pixel fonts, which have diagonals that break groups.
- Can someone please explain how sizing works in Fontself. I’m custom resizing to the template doc, but I don’t know why I’m doing that.
A final question: Is there really no way to do this in Photoshop+Fontself, which would keep everything nicely in the world of raster art? I have tried, but it will only output a bitmap font, which aren’t compatible with most design programs. And it’s blurry.
My Workflow (as of original post)
- Develop pixel art alphabets (in Aseprite, Photoshop, anything but Illustrator)
- Screenshot alphabets (at large enough size that image trace will work)
- Paste/Import Screenshot into Illustrator (Template Doc)
- Run Object > Image Trace > Make & Expand (get a larger screenshot if this doesn’t work)
- Remove Background (click white exterior, Select > Same > Appearance, then delete)
- Ungroup Objects (you may have to do this twice)
- Group Individual Glyphs (They will be separate objects wherever pixels don’t abut directly; watch for any diagonals)
- Resize Art to match Cap Height of Template Font (with all styles grouped, match largest size)
- Import Glyphsets into FontSelf
- Save Font
Stop reading now and go into the illustrator file. Then, please do comment if you have any thoughts on how I can improve the workflow. More context follows, but I’m not really looking for feedback on the project at this point. I will soon though!
FSPixelFont-AmateurGuide_v1.00.zip (2.2 MB)