Iconning, for the desperate, a technical guide to Iconning

Iconning, for the desperate

Disgruntled that no one you know knows how to icon? Perhaps you’ve tried in the past but have given up on it with the notion that “it’s too hard or for the birds.” well have no fear the emolsifier is here to give you a crash course in Iconning.

People have told me that I’m the man to go to if they want a nice icon. Not that I actually advertise my abilities as an iconist… but yeah I have some experience in making icons. If you need a second opinion ask one of my clients, who I presume are happy with their graphical improvements. If you have issues I do have a policy of reworking icons again but that’s not what this is about.

What this is about is a guide to making icons, but unlike using a base or template I’m here to guide you. Notice I used the word “Guide”, this isn’t going to be a tutorial of making icons but a way to unlock the ability to icon. Everyone can do it, just takes time and effort. And if you have questions PM me, but if I read your question and it appears here on this guide I’m going to delete your question, so please read.

Unlocking the Mental Studio

People always think that art is this amazing skill that only special people who are born with it can do it well.

That's the wrong idea, everyone is human and thus whatever someone else can do you can do it too. It just takes time, effort, patience and finally the missing ingredient that is necessary! Passion to excel. Passion is in a sense the love for what you're doing and love has always been the best secret ingredient, no joke.

You must have passion to excel or you'll forever stay mediocre and unnoticed. No one wants that! everyone wants to be noticed, accepted and praised for what they have done. If you don't... well congrats on not having ambition. Passion is what makes learning anything easy because even if you fall down along the way, you're drive to get better or to keep doing it will compel you to get up and continue doing it!

Stroke 1, Basic Iconning No-ledge

B.I.NO, this is the basics of Iconning. If you’re a person who thinks he can just sop up the information regarding the actual making of icons, please skip this section. For those with the fortitude to read all of my babbling might I welcome you to the Icon making sphere of FFO.

Iconning’s basic rules are outlined in the Faq but for the sake of convenience they’re listed below:

That is the Basic No-ledge of this part of this section. Think of this as etiquette that you must follow as an icon maker. If you don’t not only will you have to fix it but you end up looking like an idiot, there goes some of your rep as a iconner with finesse.

Iconning is an art form, but it’s a very systematic art form. Unlike picking up a pencil and doodling Iconning requires of the icon maker to know how to click. There is no such thing as shoddy equipment in iconning, so it comes down to being comfortable using the mouse and skill. To become good at iconning or modest at it you must at least be comfortable with using a mouse, the skill can be developed later once you’re comfortable.

Now before we go any farther than that, I must ask of you a question: “Why do you want to Icon?” if you wish to do it solely to extort cash from people, please stop here. This guide won’t do you any good because you don’t have the right mindset to learn. If you wish to do it to help others, please stay seated. If you wish to do it because it seems like an amusing use of your time, please stay seated. If you wish to do it because you think it’s a cool art form, get up and move to the front row before I drag you there myself.


Stroke 2 Drawing around the idea.

Iconning, now when you think of Iconning you think it’s about drawing the icon and adding details and lovely things to make the image look cool. Well the thing is that is what Iconning is mostly about. But whenever a human thinks about drawing something they picture it in their heads and then they hit the barrier of “how to draw it”.

This is the “How to draw it” section of the guide. If you already know how to draw and want to just get better at specific things skip this section. For those who have stayed in this section let’s get started.

Since my background is in anthromorphic art let’s start with making a simple wolf anthro icon. if you don’t know what that is, I suggest you go to youtube and look up “Black and white 2 creatures.” You’ll catch the idea pretty quickly.

When trying to draw a wolf anthro try to envision what it’ll look like in your head. Hold those mice in place! Just picture it. Now focus on the curvature of the area above the eyes leading down to the snout and finally curving back slightly and hitting the lip. If you could understand that, you’ve just discovered what drawing around an image means and have a very useful skill in both drawing and iconning.

If you couldn’t let’s try something else more concrete. Go on goggle and search up a picture of a wolf facing complete right or left, make sure you can clearly see the head and all of the details on it. Now take your finger and follow the outline of the area above the eyes along the top of the muzzle to the nose. Did it? If not do it because this’ll help you get the feel of what you’re doing.

Once you can trace it out from memory in the air, get a piece of paper and trace it out with a pencil. Once you do that, get on paint and try moving the mouse to that same pattern. This’ll take a few tries but if it looks like the curve to a good extent then you’re fine. Now if you have an icon on your computer load it up and access a blank icon medium, a icon state with nothing in it. You know the drill, draw the curve again. Make a certain you can make it as small as 8 spaces horizontally, if you can do it to 7 spaces excellent if not don’t sweat because this is just a basic step.

What you’ve just done is learnt the best method to draw something, it’s drawing around the idea or object. Because you’re not drawing IT, you don’t think about all the intricacies that go into drawing the object itself. Practice on anything, because learning how to do this will also lead to allowing you the ability to draw well in real life, meaning you’ll have a highly desired skill that people will always be amazed by!

Once you feel confident enough to draw most anything with this method and can make it small and compact you’re good. You only need section 3 and all of your iconning know how is there.

Stroke 3 does this make my butt look big?

You’ve heard it said on cartoons and humor shows quite a bit, but have you ever seen this happen? Probably not unless you have a desire to study the posteriors of women. Please don’t raise your hands that stuff is meant to stay buried… anyways this is the section on “making things the right size, Proportion.” If you know how to do this, carry on.

Proportion is essential to Icon makers, mostly because we don’t want our clients to look like bobble heads or shrunken heads. Although as essential as it is, you don’t need to know it because I’m going to teach you a trick on how to kill proportion troubles for good.

+ If you don’t know how large, long, short, and or comparatively sized something should be hide it. A large robe, a big hat, armor, wings anything to hide it. This is the easiest way to avoid artistic critique about proportion.

+ Play around with it. Start drawing out what you’re trying to size, if you can see it in real life on your body then go to a mirror and check it out. That’ll help plenty since most people are more at ease drawing themselves then other people. If you can’t do that then just keep playing around with the size until it looks good to you. How do you know when it looks good? If I have to tell you that I think you should ask yourself why you’re reading this guide.

+ Reference, look at manga characters with a similar character designs and builds and just check yours to them. Eventually you’ll be able to spot any proportional issues without any problems.

Those are the tricks on proportion. To learn proportion you’ll have to study your own body in a mirror. The ancient Greeks did this and if you’ve ever seen any Greek murals they have an exceptional grasp on proportion. If some simpleton from way back when can do it, I think we modern agers can do it better.

If you’re icon is too large, scale it down. You can try shrinking in paint or chibi’fying the icon. Remember when scaling it down to check to see that everything is still in proportion, no point in spot checking it when the whole thing fails on the size transition.

Stroke 4, who that?

This is the section devoted to formulating the character. Most people can skip this section as they have enough creativity to come up with a character of their own. For those with the lack of a clue about their character’s outlook try looking at yourself first.

Who are you? What do you like about yourself? What do you represent to your friends? What are you likes and dislikes? What would you change about yourself? What is your favorite animal? What is your favorite color? And lastly what symbolizes you completely?

Those questions are only a small few of the multitude of self reflection questions that one could ask about themselves before making up a character design. But why ask these pointless questions? It’s to generate features for the character you have in mind to icon. Iconning can give you anything you want, so start making a list and check it twice for what you want on your icon. To be muscular, to be cooler, to fly, to be darker and more mysterious, to have an edge, to have whatever.

Just write it all down and start thinking about features you can add to the icon to make your desires come true. That’s it for this section.

Stroke 5, the bells and whistles.

Making an icon’s basic shape takes all of sections 2 – 4. That’s the basic shape, the outline, but none of my icons are just black and white 2D sprites. This is where shading comes in.

Shading is very simple and amazing for icons if done right. The best way to learn how to shade is to just look at something. Anything at all, and just look at how the shadows on it and how they transition from light to dark and dark to light. Shading in pencil has the pencil going over an area over and over again until it gets darker enough. Icon shading is about playing around with color.

On the palette you’re given more than one shade of any color. What you do is chose the color you want and then move over a shade or two on the line of that color and pick out a shade usually it’ll be the one right next to the color you chose.

+ here’s a tip, if you’re having trouble figuring out which places to make darker or light just think that everything your shading is a cylinder. Now take a roll of toilet paper and shine a light over it but so that the light hits it from the side diagonally. Make sure you can see how the shadow on the bottom corner and up looks, that’s your answer. Make absolute certain that when iconning that you pick out where the light is coming from. Imagine off screen there’s a light shinning on your character and then imagine the toilet roll and then just shade as the shadow tells you to.

+ How much detail is important, try to never go above 3 levels of shading. This would be normal shade, darker shade and darkest shade.

+ when drawing eyes, remember that your eyes are never super white, so make sure you’re using a lighter shade of grey, usually the very bottom of the palette on byond. The skin tone of your character should be darker than the white of the eyes, this makes for a nifty effect that’ll have you saying “whoa did I really do that?” if you make it subtle enough but contrasting enough.

Enough with shading now is the point of smooth movement in icons. The moving icon is always tricky, without exception. So how do we crazy icon makers do it? We cheat a bit.

+ When doing legs moving, try to find an icon with a smooth walking animation. Copy the leg and then augment to be proportional to the icon you’re working on and stick it on. Color and walaa! Done.

Sometimes we get lucky and just magically draw up a good looking leg. I got lucky once and have been using that leg for most of my other icons.

But how do I make “…” move? Simple just shift the pixels using the select command on Byond. It’ll be real easy just move it in the direction you want and then connect and clean up the move. Then watch the animation, if it looks retarded keep working on where it does look clunky. Eventually you’ll have it moving seamlessly in a way. Try to keep motions to a max of 3 states long, anything longer and it may be too slow or too fast.

Un-natural features. Wings, tails, muzzles, elongated ears, anything that a normal human doesn’t have are un-natural features. The thing is I’d suggest drawing up un-natural features on your own. Completely on your own and discovering what about it you like and making that detail more prominent. Wings especially so because if you’ve ever seen the latest icon of Emolsifier (which probably isn’t in yet), his wings are my master piece and it’s done out of pure love of iconning and FFO. It’s my ideal wing but it’s not going to fit on another character easily or be the ideal wing for another person.


Thus why I tell you to draw up your own un-natural features so they conform to your character. If you don’t like this, then sorry because I’m not spoon feeding in this guide, there is a great deal of guesswork in making icons.

Make things move! If you’ve got wings on a character make them rustle a bit or have a tail wag slightly. A yawn from your character (dragon icons, this is something you can do that makes it look impressive), fixing of clothing, just look at console character that do things while idle and you’ll get the general idea. These give your character some spice to it; it’ll feel more alive in a strange way.

Just experiment with whatever comes to mind as cool to you.

Stroke 6 Face icons

They can only be done after you’ve finished the battle icon, if you haven’t get back to work jack. Face icons are the icons that contain the standing, dead, casting, and face states. Standing is the first icon in the battle icon; just copy the first state of that into the standing icon box with no name.

The dead state is the dead state of the icon, just copy the first state.

The casting state, yeah you get the idea.

The face state is where the money’s at. It’s where you display the face of your character, or the standing icon whichever you feel comfortable with. Face icons are usually made with a .jpg image or the character’s face, colored and all pretty and reduced to 32x32. You need not get a nice picture of your character there, it’s nice but not completely needed, just include your standing icon and that’ll be your face icon.

Stroke 8, Over the top jimmy!

… The over world state… not my forte but anyways. Ow’s the way I do it is I use the fighter OW as a base and progress from there. Adding in all the additional features, coloring it, then shading, and finally saving it. That’s all I can say about it because I haven’t come up with a way to make really pretty Ow’s…

all Ow’s need to be 2x2. This means every “Pixel” of your Ow icon needs to be 4 pixels instead in a square shape. In the 4.0 byond they have included squares in the background; they’ll be a measuring stick to whether you’re doing it right. If a 2x2 pixel is cut by a box’s edge in the icon editor then you’re not doing it right.

Stroke 9, quick it’s the fuzz!

The Icon checkers are what stand between you and your icon. After all that hard work and painstaking reading of this guide all can be thwarted with a simple concise no.

How do I avoid this? Simple, take up an accepted icon and start following anything and everything that icon has with yours. When I say anything and everything I mean it. Which icons come first, how many pixels it must be from the bottom, height of the icon itself, how far back it is, the outline, number of states, speed of the states, naming of each state.

“Debugging” is the most tedious task in Iconning. The most unenjoyable because you’re forced to go back and change a few things, and sometimes they’re things you liked about your icon.
But if you’re dead set on something you liked about it you can always petition for it. Start scanning over the rules and find a loophole. There’s always a piece of weak wording you can take advantage of, always. If you’ve ever played phoenix Wright you’ll know what it means to nitpick over wording.

But mostly if you read the rules on icons you’ll be fine, if not then just fix the issues which they’ll usually tell you. After that’s done with, is the more annoying part of iconning.

The wait, the awful time between you having finished the icon and actually having it in-game. It’s a very very very bad time in an icon’s life because it might just be forgotten by the icon checker in question or be rejected at the last moment by gaku, or worse you came up with something new and the icon you just sent in sucks in comparison.

Stroke 11, Birth defects

Icons, as wonderful as they are and as careful as we get over them it never fails to astound people how we icon makers can screw up. Icon defects, quite possibly the most long lasting ache for all iconners and their clients. since it takes near an eternity for an icon to get uploaded it also takes near an eternity to get them fixed.

as stated quite clearly by Dartz Alunin:

no matter how careful, how meticulous, how nitpicky you are with your icons you're bound to screw up. it's only human, and no amount of developed skill is going to help with those random mistakes.

if you're proficient at byond code, try to program up an icon testing enviroment which allows you to use all the states of the icon. this is done to see if it moves smoothly and doesn't jump about. It can be annoying to have to re-upload every time, but it's worth it in the end.

another thing, keep things simple and fun. when animating something for an icon make sure that whatever that animation is fits the icon state. for example and I'm never forgetting this, I thought it'd be real cool and kick butt if I drew up my victory state as my character transforming.

well... I didn't quite have too much foresight as it turns out the idea was way over the top and after looking sarm's horrid legendz links (I love them to death!) I have since regretted every instance of seeing my victory state.

so please, think things out and test them. If you don't you may regret it for a good few months.

Stroke 12, Closing remarks.

I’m about to make a very hurtful statement to most iconists and iconners but I feel this must be said.

my observation of recent iconning has been that people have been just recoloring and tweaking sprites from Final Fantasy games. This is fine and dandy for most because truthfully Final Fantasy sprites are pretty good looking. But the problem is that whenever I open a knight icon I’m greeted by a Final Fantasy tweak, armor and all.

The concept of Icons for FFO was to be unique, to stand out, to make a really kick butt image for your character that made him or her your own. If everyone’s using the same batch FF icons for tweaks then it’s not truly a unique icon…

If you truly want to get good at iconning, which I hope you do, then put in effort to learn this stuff. It won’t earn you a job but it will help a bit if you ever needed to learn how to draw.

That and making icons for people actually makes you pretty popular because you’re a sought after commodity. Not everyone has the natural aptitude to learn how to draw, if you can benefit a bit from this then great, if not then I guess this isn’t what’s up your alley.

All this has been brought to you by Emolsifier; any use of this document outside of FFO is pointless as most terms here only apply to Byond. This document is owned by Emolsifier, but under his consent this has been posted on FFO’s unique icon board to help budding Icon makers.

By the way, Iconists are Artists of Icons. Iconners are Makers of Icons, whic do you, want to be?


This post has been edited by emolsifier on Sep 23 2008, 09:18 PM

some minor changes (need to be put in FAQ as well):

References to the invisible states should be removed.

The icon state order for the B icon should be
standing*, standing* (M), attack, attack (M), victory, wounded, hurt, hurt (M), dead, cast, followed by any optional icon states in alphabetical order

The icon state order for the F icon should be
standing*, dead, cast, ready (optional), face (optional)
All F icon states should be single-direction, single-frame images.

* - name of icon state is null