Skip to main content

A WORLD MADE OF ICONS: Why are Final Fantasy I characters so darn iconic? (And how can we capture that ourselves?)

A down and dirty guide to chasing the iconic through blunt force minimalism with little to no artistic training.

In an age of over-design now cresting into a tidal wave of AI halucenations, how can we rise above the floodwaters? How can we design iconic characters? Iconic anything? What the heck does "iconic" even mean in the context of game art?

L’formula

"In character, in manner, in style, in all things, the supreme excellence is simplicity."
– Henry Wadsworth Longfellow

I'm about to enter the perilous character-design stage of Wake Up, Dead Kosmonaut's vertical slice, and these things weigh heavily on my mind.

Fortunately, I have a formula.

A quick disclaimer: This is not a guide to commercial success. Lots of successful things are hideous.

This is also – surprise – not an artist’s tutorial. There's a lot of character design tutorials out there for artists and animators, by artists and animators.

This one's for untrained do-it-yourselfers making their own videogame graphics (or comics, or tiny sculptures of googly eyed dinosaurs with blunderbusses, or stage play costumery, or anything else where people and things need to be recognizable at a glance from a distance), presented by an untrained do-it-yourselfer.

Consider it a tutorial in taste that approaches creating art like clicking together Lego bricks.

After all, every creative endeavor starts with taste.

We are here in the pursuit of the interesting, the striking, and the memorable – and the doable-by-ourselves. (Call me crazy, but I would rather capture those things than create something commercially successful, ugly, and shallow. Or worse yet, generically high quality and totally forgettable. Or – horror of horrors – passable, but made by someone [or something] other than me.)

Anyways! This is a method that I sometimes use as someone with only moderate artistic talent and little training. It is far from the only way, but it is one that works for me.

BEHOLD!

___

James's formula for iconic, striking characters (done on the cheap, by yourself, without any professional training):


1. Identify the essential nature of the character.

2. Depict this essential nature with three or four iconic visual items.

3. Have no competing details.

The clincher: If you want to take the fast track to these things, draw your characters at tiny scale first. It forces you to distill them.

___

If you don't believe me, take a look at Final Fantasy I and II's enduring character designs:

And yes, I'm aware that legendary Japanese artist Yoshitaka Amano did character concept art. I'm also aware that his art looked like this:

While the game looked like this:

Incidentally, the American art looked like this:

As much as I enjoy some good old Amano style androgynous albino supermodels, it's the game sprites that have enshrined themselves in the collective pop-culture consciousness*.

*And sometimes other things.

The sprites are, after all, what the player plays with.

So, those tiny little clumps of pixels are what I'm focused on today. Clearly, there was more at play than just, "The big art, but little."

Drawing an icon instead of a picture: The maximum amount of information with the minimum number of lines

Thanks to the incredibly limited graphical abilities of the age (and the fact that digital art had not yet begun the detail = quality revolution in fantasy art) the original Final Fantasy designers were forced to draw everything like it's an icon.

By that, I mean when you draw a sword, you draw the idea of a sword. You have such limited space and time that you draw the bare minimum necessary to trigger the concept "SWORD" in the viewer's mind. You're not drawing "a sword," you’re drawing the Platonic form of it: ultimate SWORDness.

Most importantly, unnecessary detail takes away from this.

When we look at something, our brain has to analyze it, compare it to our existing mental conceptions, and then decide which category it falls into. The more complex the image – the more deviations from our existing conception – the more analysis has to take place.

But what if you look at an image and it's nothing but the mental conception? There's no analysis: one glance at the image immediately triggers the concept in your mind. That is an icon.

Back in the halcyon days of my youth, I did a lot of cartooning for Texas A&M's student newspaper, The Battalion.

I saw many people torpedo what could have been incredibly funny cartoons because they would go, "This cartoon has a toilet in it… I have a toilet!" Then, they would sit down in front of the toilet in their house and draw it exactly.

Well, it turns out the specific toilet sitting in your house has all sorts of weird little details that are different from what other people have. And it turns out, none of us have a specific toilet in mind. We have a nebulous idea of "toilet." By drawing an actual toilet, and capturing all of the specific details unique to it, you are creating a picture that deviates dramatically from people's mental image.

The end result is that when the viewer looks at your cartoon, they don't immediately go "Oh, that's a toilet!" They have to stare at the thing and decipher it and figure out that, despite all of the deviations from their mental image, it is in fact (probably) a toilet.

But what about "Draw what you see, not what you know" ?!

Unfortunately, we aren't drawing.

We are attempting to evoke what is already in the viewer's head.

With my own cartoons, I found that replicating specific items from specific reference pictures made the end product worse, because I always ended up with weird details that (even at a cartoon level of simplification) distracted people away from the idea it was supposed to evoke.

It was something that I just sort of stumbled my way through until, one day, I found someone else had put it into words.

While going through the A&M library, I picked up a book on the comic book shelf and opened it to a random page. It just so happened to be dedicated to famous golden age Hollywood caricature artist Al Hirschfield.

Hirschfield's pictures almost don't register as "caricatures" to the modern eye. We have been trained on decades of the county fair "get your caricature for five dollars" art style that just looks like a traditional portrait with freakishly huge cheekbones. Hirschfield's art looks nothing like it.

His pictures do, however, look like their subjects. Or rather, the idea of them.

At the bottom of the page was this little quote which I have tragically been unable to find again, so you'll just have to make do with my rough paraphrase:

"I try to capture the maximum amount of information with the minimum number of lines."

I immediately thought "Oh my goodness, that's what I need to do! Anything that isn't necessary to display the idea of the subject actively takes away from it!"

John Lennon was clearly paying attention.

Shaggy hair
Prominent nose
Round glasses
JOHN LENNON

We are not trying to create an artistic rendering of reality. We are engaging in the visual communication of an idea.

Just like verbal or written communication, anything that is not necessary to communicate our point actively takes away from it.

What's this got to do with Final Fantasy again?

Early Final Fantasy’s Platonic Simplicity (and slow fall from grace)

When Final Fantasy wanted to communicate "Mage," they didn't have the space to get a bunch of pictures and re-create them with all their detail. They had less than 30 X 30 pixels and ~3 colors to work with.

The sprite had to be the minimum amount to convey the idea of MAGE. They were forced to give you a visual cue and let your mind fill in the rest.

So, what makes up a mage at this size?

Pointy hat
Robes
He's a black mage? Obscured face

BEHOLD! You've just created the idea of a mage.

Too much detail, and suddenly it's no longer a cue – it's a complex image that you have to interpret.

The fighter is a straighter example.

Compared to all the magic that everybody else is doing, this guy is only about beating things. So:

Bare arms.
Bad attitude. (The only one with angry eyebrows!)
Just-walked-out-of-a-bar-fight hairdo.

The Jack of all trades Red Mage is an excellent (and ultimately tragic) example:

He's significantly different from the more straightforward black mage and white mage, who just needed to communicate the ideas of "dark magician" and "magic healer." He's this kind of Jack of all trades swashbuckler type who can do a little bit of everything. How do we communicate that? If you had space, you'd give him armor, a sword in one hand, a magic wand in the other, and end up with a messy, confusing character. But you don't have space, so you have to communicate just the idea.

How do you say that in less than 30 x 30 pixels?

Musketeer hat
Feather
Dashing long hair
Mage-y cloak

Once more space was available, unnecessary details crept in and diluted something that used to be perfectly distilled to only its essential components.

It's surprisingly easy to lose the things that defined the character. This image actually depicts him using weapons and wearing armor, but is doing so much at once that the clean, iconic, IDEA can't be communicated. You've got to sit there and interpret this thing before you realize "Maybe this dude can do weapons and magic and armor?"

The dark age of detail

[Warning: incoming negative examples taken from beloved franchises. Brace for outrage.]

These days we've gone beyond the problems with art taken from reference images and leapt straight into full-blown detail = quality territory.

People no longer go "I want to draw this thing, I’ll go sit in front of one and draw it!” or even “I'll look up a picture of it!" They say "I want to draw MY VERSION of this thing." This means they take the idea – the iconic Platonic ideal sitting in their head – and then crap detail onto it until it feels unique.

This is a "rogue."

Not only is the end result over-designed to death, but each of its individual components are also smothered in icon-destroying quantities of detail. The daggers, gauntlets, belt, armor – literally everything the character is built out of – go out of their way to deviate from our mental icon of each one of these things. It's not just that we don't recognize this guy as a rogue, we don't recognize anything he's made up of as the things that they are. We have to analyze each step of the way:

"So there's a scowling hippy Billy Connelly look-alike wearing a couple of dish racks on his shoulders and holding two glowing, uncomfortable looking, hyper ornate… are those daggers? Oh, and the stuff under the dish racks is like if Tim Burton designed football pads! And he's got skull-ornamented robot hands! I've got it: this is cyborg Billy Connolly with steak knives playing in Hot Topic's new American football league!!

This is the standard for video games. (Just grab a modern videogame character at random – not one of the classics from the 8-bit era, but someone who was created in the age of HD. Now, hide the image and try to draw them from memory.)

Now that we've trained AI on all of this stuff, the vomit-ocean of detail is only going to surge to new heights.

We've been unique-ifying art by piling on the details for so long that a lot of people don't even know what the base underlying idea originally looked like anymore. It's spikes all the way down.

Fortunately, when you see an icon, you immediately recognize it.

Characters as Icons

That's how you make a mother-flipping roguish swashbuckler, kids. YOU TAKE AWAY ALL OF THE CRAP.

Black.
Sword.
Mask.
Manly blouse.
Debonair mustache.
Musketeer boots.

And that's it. You're done. A character (and a movie) so iconic that all the CGI in the world has yet to top it.

(Incidentally, every single character in The Princess Bride is almost the pure Platonic ideal of what they are: Buttercup is the idea of a Princess, Wesley is the idea of a swashbuckler, Inigo is the idea of a Renaissance swordsman – the list goes on and on. There isn't a single character in that movie who isn't visually distilled down to their pure essence.)

Now, this isn't to say that we just steal things from our inspirations wholesale: you can't just take Wesley from Princess Bride and throw him into your game and say "look, we have an iconic rogue!" Instead, we construct characters the way that Wesley or the Red Mage were constructed:

What is the essential nature of this character? What are a handful of visual elements that communicate this essential nature? Now we design a character entirely around those visual elements and REMOVE ALL COMPETING DETAIL.

Icons are made of Icons

Importantly, each component the iconic character is constructed from are also icons. If the character has a sword, it is the idea of pure SWORDness. If he has an eyepatch, it is the idea of pure EYEPATCHness.

Alas, the urge to slather on details and reinvent the wheel (this ain't your daddy's eyepatch!) is one of the strongest forces in game art. After all, how will people know that how many polygons you can display at once if everything doesn't have three layers and tesseracting barnacles all over it?

Tragically, extraneous detail and trying to reinvent the wheel are both things that require the player to stop and INTERPRET what they're looking at.

Our brain knows what an eyepatch looks like, and that is not an eyepatch. It may not be long, but I do have to sit here and analyze and interpret and finally go, "Somebody decided to reinvent the eyepatch?"

Show us how it's done, Lego.

How do you communicate "pirate" on a fingernail-sized hunk of yellow plastic?

Unkempt hair.
Eyepatch.
Stubble.

Each element is distilled to its purest essence and there's not a single unnecessary line or detail anywhere to be seen.

While we're at it, Lego knew how to design some iconic rogues:

Dark clothing.
Hood.
Cape (hard to see, but they all have little plastic capes on their backs)
Shifty, untrustworthy facial hair.
Wolf faction-emblem (again, the bare minimum amount of detail needed to convey "Wolf.")

Look at these unsavory bastards! These guys are gonna shank you in a dark alley and then sell your organs on eBay! Seriously, these guys are more "Thieves' Guild" than any thieves' guild I've ever seen in any videogame ever.

Lego isn't the only one who can do this. Most memorable eyepatch wearers in the videogame world lean towards the same iconic simplicity.

Valve gave us a master class in iconic design with Team Fortress 2 (and then crapped hats all over it, but that's another story.)

The Demoman holds the idea of a grenade launcher, while wearing the idea of a flak jacket, the idea of a knit cap, the idea of an eyepatch, and the idea of mutton chops. And there's no other details to distract from them. Every single character in the game is like this: a handful of visual elements that perfectly capture the essential nature of the character, and NOTHING ELSE.

Icons are the building blocks with which you build other icons.

Once you have this, you can make anything.

1. Identify the essential nature of your character.

2. Depict this essential nature with three or four iconic visual items.

3. Have no competing details.

Heck, you might even be able to unique-ify a thing or two. A hero piece can actually stand out when it's, you know, different from everything else assaulting the viewer's eyes.

But how do I know which items are essential?

The final hack: start small

You can accomplish all of this quite easily by doing character design backwards:

Draw your characters as tiny sprites first.

Even if your game doesn’t need tiny sprites!

It automatically forces you to select only the most essential elements. There's not space for anything else.

Once that's in place, you can draw big versions of them and add secondary details. You know what's essential; everything else is just gravy.

Starting small and expanding to big rather than starting big and condensing to small helps you do this:

Instead of this:

Things get to expand rather than contract and get lost.

We actually did this accidentally in Defender's Quest 1.

As a young lad, lead programmer Lars had created large amounts of gloriously Super-Nintendo-looking sprite art for a never-finished (perhaps never started?) JRPG project.

When he was programming the bare bones of DQ'S battle mechanics, he grabbed liberally from this back catelogue to fill in battle sprites. Knights, Berserkers, Mages - almost everyone in the main cast began life as one of Lars's old sprites.

Naturally, we were focused on gameplay first, so when it came time to do the character art for cutscenes (a duty which I usurped), each of the characters already had a design at 40 x 40 pixel size. My job as the (self appointed) cutscene artist was to make big versions of the little sprites already in the game.

Even though I was working at a glorious 812 x 952 pixel scale, I had to stick with only primary elements that were present in the tiny 40 x 40 sprite. It created a natural heirarchy of detail: the essential elements were already decided for me.

Slack the berserker is pants + shirtless muscley torso + sword + red afro.

Nothing I added could be more important than those.

I could add little details that made the character more alive at the larger scale, but they had to be secondary - none of them could be so prominent that they ought to appear on the small sprite.

(Most of them got added to those primary elements. Pants got subtle stripes, the hairdo got lavish tangles, the bare muscle-y chest got scars, the sword got fuller and guard and grip.)

I was creating a high resolution version of the original image, not the other way around.

Incidentally, this is the reason that our wild, unwashed hooligan frequently criticized for his, ahem, unorthodox hygiene:

...still makes time to shave his face and wax his chest. The tiny little goatee was all the detail I dared give without contradicting the sprite.

(Some of these tiny additions would eventually become so iconic in cutscene art that we ended up adding them into the sprite art as new essential elements.)

Anyways, DQ's cast is hardly the pinnacle of character design - I'm sure that Lars could do pixel art circles around his younger self these days, and I would certainly like to believe that my art skills have inched along in some capacity* - but the method did ensure that we had simple, striking, instantly recognizable characters focused on expressiveness and personality rather than spikes.

*For starters, I wouldn't try to draw everyone in Macromedia Flash 8.**
**I would draw it in Paint.net (free) and – if I was feeling extra fancy – Asprite ($20), for those of you who are dying to know.

I don't think they're going to be showing up as tattoos 20 years from now, but they did inspire a modest amount of fanart:

One of which (from fellow indie devs Endless Fluff) was so iconic looking that it inspired our own cover art for the game's physical release.

(If you haven't grown sick of my rambling, non-artist artist advice yet, you can read all about it here.)

So, as I plunge into the characters of Wake Up, Dead Kosmonaut, they're going to start life as tiny 40 x 40 pixel sprites. Even though these will never appear in the game!

Try it sometime. I'd love to see what you come up with.

PS: I've never even played Final Fantasy. I just appreciate great, iconic characters.

Comments