Pixel Flames

Share:
by zephram

Download disabled

The designer of this FontStruction has chosen not to make it available for download from this website by choosing an “All Rights Reserved" license.

Please respect their decision and desist from requesting license changes in the comments.

If you would like to use the FontStruction for a specific project, you may be able to contact the designer directly about obtaining a license.

A pixel font made to look like fire! Now you can answer (and ask!) your burning questions...

Drawing and editing these takes more time and effort than most other forms of pixel art. Don't expect them to look perfect without some time and effort from YOU, as well. An effect like this requires hand adjustment of every part at every stage.

The coloring, infill color, and effects you use with this font make a drastic difference as to what looks are evoked by its shapes! Scroll down for lots of examples. :^)

Alternates on lowercase!

*

TODO: Alternates for .,?!@_*#$%&()+/:;<=>[\]^`[|]~†123456890

Original size: 18pt (use multiples of this value for pixel perfection)

24 Comments

v0.1 (fire look) - space width has been reduced since after 0.3

Comment by zephram 27th april 2018

v0.2 (electric look)

Comment by zephram 27th april 2018

v0.3 (wooden look)

Comment by zephram 28th april 2018

v0.3 (no infill)

Comment by zephram 28th april 2018

v0.1 (flesh look)

Comment by zephram 28th april 2018

awesome!

Comment by JingYo 28th april 2018

A basic fire tutorial :D

Comment by zephram 29th april 2018

v1.0 (high-voltage look)

Comment by zephram 29th april 2018

try some green colors?

Comment by JingYo 29th april 2018

v1.0 (animated)

Comment by zephram 30th april 2018

After making the last preview I thought "Hey, I should really give all the symbols alternates too!", but I have no idea where to put them. More Latin, maybe? Is there a range of glyphs which others use commonly for this purpose?

Comment by zephram 30th april 2018

I put alternate symbols, i.e., pictographs, math, et cetera, in the bold versions of my fonts, if they have bold versions, that is. You could also just create a separate symbol font.

Comment by TCWhite 30th april 2018

I have to ask; how do you find the 'original size'?

Comment by realicraft 8th july 2018

One of two methods:

1. Screenshot the glyphs at pixel size and measure their height. Works best when every glyph is the same height.

2. Download the font and find the smallest size which is pixel perfect. This is the preferred method, because once you try to make the text larger, you will sometimes have to use decimal values.

For instance, some pixel fonts will print normally at (for example) 7pt, but look distorted at 14pt. So I try 14.5, and if that works, then I say the original size is 7.25pt.

(At the original size, these decimal values seldom make any difference to how a font renders, so 7 or 7.25 would work fine. I just try to keep things simple.)

Comment by zephram 8th july 2018

For method one, this gives height in pixels, and that's viewable in the editor, so you don't have to screenshot it, and this gives px not pt.
For method two... how are you supposed to do that exactly?

Comment by realicraft 10th july 2018

Can you do alternates for the numbers as well? i'd like to able to anmate those... ;)

Comment by anonymous-1520403 10th july 2018

@realicraft: pt and px are quite closely related to one another. It is easy to convert values. Method 2 is to type some words, change font size values, and use your eye. It's that simple. Really.

@Se7enty-Se7en: When and if I feel like it. I added alternates for - and 7 so you can animate your name, if you want. More later...

Comment by zephram 10th july 2018

So what's the conversion rate? 1 px = ? pt.

Comment by realicraft 10th july 2018

I found a site that explains it better than I can. https://websemantics.uk/articles/font-size-conversion/

I still recommend using method 2, because it lets you check things in as many sizes as you want. Just open a graphics program, type some text, and then adjust the size until all the glyphs look perfect. Then try half or double that value, and keep fine tuning the overall value until it's perfect at every size.

Comment by zephram 10th july 2018

I tried this in Pixlr, but didn't know how to fill in only the text (using the fill bucket)... I had to do it in Paint (And a manual blur at the edges with the Pencil tool...)

Comment by anonymous-1520403 31st july 2018

I don't know how to describe that look, but it's very cool! 

Most graphics software should have an option called "Contiguous" that shows when you have the Paint Bucket selected. If you disable that, you should be able to pick and choose each area that gets filled.

Comment by zephram 1st august 2018

I like the animations, they really show off its potential.  This has come a long way and your hard work shows in the presentation, good job!

Comment by SymbioticDesign 1st august 2018

Thank you! The renewed interest in this one helps push me to improve it. I'd like to do more animated fonts as well, since I see very few of them.

Comment by zephram 2nd august 2018
Congratulations! FontStruct Staff have deemed your FontStruction worthy of special mention. “Pixel Flames” is now a Top Pick.
Comment by Rob Meek (meek) 5th september 2022

Also of Interest

GlyphsApp

Get the world’s leading font editor for OSX.

More from the Gallery

Phontby zephram
Xenobastardby zephram
FontStruct Idea Soupby zephram
Rykrosby zephram
Umbriel DSby Frodo7
Western Traintopsby elliotshock
fs lostby ETHproductions
Zaratustra PiPby Zaratustra

From the Blog

News

Gridfolk: Interview with Zephram

News

Heavy Competition Results

News

Heavy Competition

News

Gridfolk: Interview with Jiri Novak