A public dumping ground for words and pictures. Contact me at ThomasTamblyn@Gmail.com

Tuesday, 21 May 2013

Icon style guide

I've made a lot of icons, and I've tried to keep them to a particular style. That's a little pretentious - my style is a crutch to hide a lack of ability. Still, it's hard to draw over 1600 little pictures without getting better at making them, and so I've suffered quality-creep. The ones I make now are often more illustrative and less symbolic. I include details that, back in the first hundred, I might have abstracted.
  Every good icon I make makes its predecessors look worse, and as I get better I'm making more better icons. 

Still, there's some consistency. From the start I developed a set of unwritten rules about how my icons should look. There's a few exceptions, but they're almost all due to oversight or moral weakness.


White on black
Everything is white shapes on a black background. If I want to do something in black, outline it in white, or put it over a white shape. When actually using the icons for something I can invert them if necessary, but for consistency when browsing the base icons, they're all white on black.

Sharp black and white only
It seemed silly to bother with colour permutations (red heart on black background, black heart on yellow background…) for the icons when that's so easily accomplished in a paint program. I can colour, paint over, use as masks on a gradient or anything else. The simplest possible base icons enables the greatest freedom when using them.
This is why I'm always a little annoyed to see them used as-is; just white shapes on black squares. They were never meant as ready-to-use icons. They're stencils.

Border
Nothing touches the edge of the frame. There's an invisible 1pt no-go zone. Again, this is just for consistency amongst the base icons and ensures I have some bleed when I cut out the icon to use elsewhere.

Fill the frame
The icons are always as large as I can get them within the frame. They'd be much less useful as a set if they were all drawn to different scales. If I need a small heart (for example) I can just scale down a large one. If I really wanted a small heart icon I'd give it some kind of framing detail.

Left to right
Consistency. If an icon has a direction, it's going left to right. Up vs down is more flexible, but when it's isn't common sense I tend towards top-to-bottom.

No lexical symbols
These are meant to be illustrative. No letters, numbers, currency symbols or overly specific symbols. If I needed a letter or a number, I could raster it from a typeface. And if I do one digit I should probably do all of them. Likewise letters. Hash marks are illustrative enough that they feel ok. There's an omega too.
 
Not too specific
I don't want twenty different flavours of axe. If I need a specific icon for a specific variety of thing, I can make it to suit. One or two axe icons will fit most needs. And the icons are supposed to be symbolicaly illustrative rather than perfectly specific anyway.
I've bent this one a lot, but I ration myself. There's a lot of different swords and botles for example, but I only do them every now and then so they don't take up too great a fraction of the total. And I try and make sure they're all sufficiently different from each other to be worthwhile. I'm not interested in doing ten different helmets with only slight differences.
I suppose this one includes other people's trademarks and logos too. No Samus helmet, no buster sword and so on. For several obvious reasons.

Not too abstract
Counterpart to the previous rule. If I need a circle I'll draw a circle. Likewise an arrow, a diamond or other simple geometric shapes. The icons are meant to be illustrative and there's a point at which a shape is too simple to illustrate anything. I've done a few miscellaneous weird shapes, which could be glyphs, thingamabobs or jewellery. The problem is that they're so easy to do I could easily churn out a hundred of them. But even if they're pretty, they're meaningless. There's not much difference between having a half dozen available and having a hundred. They're not challenging to make and usually a waste of time, so I don't let myself do many.

Definition and resolution
This is the most important one and the biggest pain in the arse. There's a minimum line width of 1pt. And that includes negative space - two separate white shapes need to have a 1 pt separation between them. This is my minimum "resolution" for detail. No bumps smaller than 1pt, no shapes smaller than that.
There's necessarily a little leeway where two shapes come together to a point, but I stick to this rule hard as I can. It puts a hard limit on the level of detail I can put in and keeps things consistent.

Line standards
Lines get squared-off ends. If the icon really needs it they might get a taper. But usually not. And no taking the piss either - If there's a taper then it should be a short taper. Sometimes there's a drawn element that is only the width of a line, and then I might round off or taper the ends but, again, usually not.

By the way 
The coloured icons in this post are just sloppy five-minute jobs to make a point.

No comments:

Post a Comment