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)

Info: Created on 21st April 2018 . Last edited on Thu, 2nd August.
License Creative Commons
Categories:
Sets:
Tags:
Fave Tags:
  • -

23 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 Sun, 8th July

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 Sun, 8th July

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 Tue, 10th July

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

Comment by Se7enty-Se7en Tue, 10th July

@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 Tue, 10th July

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

Comment by realicraft Tue, 10th July

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 Tue, 10th July

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 Se7enty-Se7en Tue, 31st July

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 Wed, 1st August

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 Wed, 1st August

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 Thu, 2nd August

Comments are closed.

Also of Interest

More from the Gallery

Gremlin Skinsby zephram
Pixel Flamesby zephram
Weavers Guildby zephram
Absinthelyric Printby zephram
db Luckyby beate
fs lostby ETHproductions
Myrtille Pixelby Frodo7
G1 Recoilby geneus1

From the Blog

News

New Bricks: Square Connectors

News

The Video Game Font Preservation Society

News

FontStruct goes open source!

News

New Bricks: Half Arcs