16×16 Pixel Art Tutorial

Reminded me of this: <a href="http://24.media.tumblr.com/tumblr_lmohwflNZU1qkfxqfo1_500.jpg" rel="nofollow">http://24.media.tumblr.com/tumblr_lmohwflNZU1qkfxqfo1_500.jp...</a><p>Kidding aside, it's pretty interesting. I'll probably use this technique for a small game I'm doing in my spare time.

(Quick preface: this is not about the design <i>technique</i>, which is fine, but rather <i>using</i> icons like this on the web, or as favicons.)<p>I'm going to buck the trend here and just say: designing 16x16 icons for software should be dead (except as hobby/art, like for pixellated-style video games, etc.).<p>When the future is going towards retina displays, fluidly zoomable interfaces, and whatnot, this is a huge step <i>backwards</i>.<p>If you have an interface with 16x16 icons that are <i>necessary</i> to understand, then they should be dead simple -- arrows, circles, stars and whatnot. Not monstrosities like the GitHub icons [1] where they try to pack icons on top of icons in a tiny space. Icons next to text should have no more complexity than the letterforms themselves -- the letterforms have been chosen to be a legible size that doesn't strain your eyes, and icons should never go beyond that. And they should be icon <i>fonts/etc</i>, so they look good on retina/zoomed.<p>On the other hand, there are 16x16 icons that serve purely as illustrations -- application and document-type icons, for example, or list view in the OSX Finder. In this case, it's <i>pointless</i> to aim for clear distinctions, because there just isn't enough space, and it's too small anyways. A scaled-down version of the normal icon is <i>fine</i>, even if it's a little blurry or whatever. Just seeing a vaguely familiar orange and blue ball next to the text "Firefox" is fine -- nobody ever uses (or should use) 16x16 icons of this nature without a label next to them. Plus, again, with retina/web zooming, all the work to design a "special" 16x16 icon is for naught.<p>The Hacker News favicon is a great example of a <i>good</i> icon design -- easily recognizable, scalable, not too busy, no special treatment needed.<p>The frog in this example, with all the other icons at the end, is exactly the kind of thing that should <i>never</i> be used as a favicon, or anywhere on the web, really. They look fine when enlarged (like the Nintendo, with its tiny resolution blown up on a TV), but are terrible on modern screens. The favicon of the page itself, while apparently a bird, looks just as much like a school bus driving into a lake, or a piece of abstract art, when I see it in my browser tab.<p>[1] <a href="https://github.com/styleguide/css/7.0" rel="nofollow">https://github.com/styleguide/css/7.0</a>

I'd pay $5 a pop for a custom favicon - I give you an image, you pixelart it. Not the crappy png-to-ico converters, but an actual person that knows what they are doing. Maybe even $9 if you let me pick from 3 options.<p>My current approach is to scale down a png in Pixelmator and hope there aren't that many jaggies. In the end, they usually look like crap and not as sharp as the ones in this post. I would follow this tutorial, but there is a Miracle Function that involves knowing how to do shadows based on a light source - which I don't know how to do.

I normally don't find these sorts of tutorials useful. But after reading these simple instructions I thought I'd give it a shot. Here's my feeble attempt:<p><a href="http://f.cl.ly/items/003y1m2a0b2n0F1p2G3Q/lambda.png" rel="nofollow">http://f.cl.ly/items/003y1m2a0b2n0F1p2G3Q/lambda.png</a>

The scissors look like something else :/<p>Besides that, it's great! Just had a rush of nostalgia and it's a shame we lost a lot of this in Web 2.0 shiny button/banner/badge madness.

Here are my two favorite pixel art resources which are much better than the photonstorm link:<p><a href="http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299" rel="nofollow">http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299</a> (Tutorial by Cure)<p><a href="http://forum.wesnoth.org/viewtopic.php?f=13&#38;t=32273" rel="nofollow">http://forum.wesnoth.org/viewtopic.php?f=13&#38;t=32273</a> (Great article by Jetrel)

Only problem is it recommends that you "make one darker color and use it to add shadows where needed" and then adds like 6 new colors to itself.

That was pretty interesting. Aside from favicons and sprites there is a "new" hardware use for little graphics which is little pushbuttons with graphic LCDs embedded inside the button. One minor drawback is each button is around 75 dollars a piece and the price has not been dropping.

Here's a very good pixel art tutorial that I found either on HN or on reddit a while ago: <a href="http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/" rel="nofollow">http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/</a>

Step 3 needs more explanation. It's not really "For each of the base colours from the previous step, make one darker color and use it to add shadows where needed.".

I've always enjoyed and been amazed by folks who could create so much meaning from small spaces. Of course the art will eventually die off I expect. A 16 x 16 'sprite' on a 300 ppi screen is a mere 3/64ths of an inch wide. Or relative to the 92 dpi 'normal' density screens roughly 1/3rd the size you want.<p>We'll eventually replace all of the 'lo-rez' glass in the world with 'hi-rez' glass and nobody will want 'chunky' graphics.

In a few years, this will be what flat design is today. We're going in circles.

Someone needs to make an algorithm that does the opposite of hq4x and does the most optimum reduction of say a 64x64 complex image into pixel art.<p>Then you can hand tune the pixels.<p>Simply reducing ala nearest-neighbor is not good enough.

You might like my pixel art app, FatBits for iOS: <a href="https://itunes.apple.com/us/app/fatbits/id501273236?mt=8" rel="nofollow">https://itunes.apple.com/us/app/fatbits/id501273236?mt=8</a>

Pixel art like when I was a baby and now it's back in all its flat glory. Yikes. Can't say I don't like making icons with pixels. Cool to make patterns with it.

Here is someone's (2009) remix of YouTube's favicon using subpixel colors:<p><a href="http://typophile.com/node/60577" rel="nofollow">http://typophile.com/node/60577</a>

I wish they'd offer an avatar service.