16×16 Pixel Art Tutorial
photonstorm.com
photonstorm.com
Kidding aside, it's pretty interesting. I'll probably use this technique for a small game I'm doing in my spare time.
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.).
When the future is going towards retina displays, fluidly zoomable interfaces, and whatnot, this is a huge step backwards.
If you have an interface with 16x16 icons that are necessary 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 fonts/etc, so they look good on retina/zoomed.
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 pointless 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 fine, 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.
The Hacker News favicon is a great example of a good icon design -- easily recognizable, scalable, not too busy, no special treatment needed.
The frog in this example, with all the other icons at the end, is exactly the kind of thing that should never 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.
The only reason it works on HN is because the whole site is ugly, which is fine (content before looks) but few other sites can get away with it.
The HN favicon is not beautiful at all. It's not "good-looking". But when I look at 20 tabs open, you can instantly tell at a glance which ones are Hacker News -- or in a list of bookmarks. That's good design. It's working.
A bad favicon, on the other hand, is reddit's [1], for example. It tries to cram the whole reddit "head" into a 16x16 space, with a small white head against a light blue background (too little contrast, especially against a light-gray tab), with thin black lines. Glancing at it in a list of tabs or bookmarks, it doesn't stand out at all (due to bad "background-y" color choices), and isn't easily recognizable at all (too much detail, no obvious clear central element).
Try opening http://blogsofnote.blogspot.com/ , http://www.homedepot.com/ , and http://8days.nl/ at the same time. See the problem?
There were zillions of redesigns proposals. None of them satisfied me at all. They were clunky, dense and too gloomy on most cases, but hell, even with that proposals I think this site needs love. Lots of love.
But there is a parrot, you know - never mind.
These designs are just too complicated for the size that they will be viewed at IMO.
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.
Keeping it a single-digit dollar amount makes it seem like a small price, mentally. I don't know why, but that's just my gut reaction :)
Admittedly not everybody has the same level of visuospatial ability, but generally it is a matter of thinking of the angle at which light strikes the surface.
For example, virtual every GUI widget I've ever seen is drawn as if the light is coming from the top-left corner, so surfaces facing top-left are the brightest, while surfaces facing bottom-right are the darkest.
http://fiverr.com/gigs/search?utf8=%E2%9C%93&query=favic...
Case closed :)
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.
Regardless, I made no mention of what exactly the scissors did look like (though everyone else didn't waste time projecting) and the rest of the post was praise for the work and my longing for there to be more.
And most of the pople on HN post, retweet and favorite a lot worse on Twitter, but I guess hypocrisy does fit very well with the recommended behavior for mature adults. That's not to say HN should turn into Reddit, but let's not pretend we're all saints.
Thought it had more to do with a childhood experience of tracing scissors on paper.
You don't realize how important the scissors are for context until you remove them from the paper, just as someone else peeks over at what you were drawing. :/
http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299 (Tutorial by Cure)
http://forum.wesnoth.org/viewtopic.php?f=13&t=32273 (Great article by Jetrel)
For each of the colors. Granted, I agree that the rule wasn't followed in the example.
He made a darker shade of the main green for big shadows; the entire lower body is painted that color. He then made shadows for that green.
He also did highlights by the same recursive process.
The hues aren't consistent because shadows are usually bluer, and highights are usually oranger or yellower or whiter -- you have to play with it, but I think that's a reasonable rule of thumb.
He's also using highlights and shadows to suggest new outlines or replace outlines he's drawn.
And you're right, explaining all that would have been fair. I think it's a big much to expect "how to make a 16x16 sprite" tutorial to include "how to paint/draw", though.
I don't believe the author is cheating though, he just hasn't fully explained what he did in the step.
From what I can deduce, and my own experience, he more accurately means: "one [slightly] darker color [and one slightly lighter color]", "add shadows [and highlights] where needed", and "repeat with progressively darker and lighter colours at deeper shadows and higher highlights until you are happy".
We'll eventually replace all of the 'lo-rez' glass in the world with 'hi-rez' glass and nobody will want 'chunky' graphics.
And all these because there is no clear process by which we as an industry can judge technical solutions. So we are left with a form of pop culture.
I was thinking about innovation this morning actually - how do we innovate? Is it on purpose? I thought that most of the innovation actually comes in one of two ways - by picturing a bright future and bringing the world to it, and much more frequently by coincidence. You are trying to achieve something you envision and most of the times you fail, but in the process of doing this you discover something new. And even then you can actually not realise that you have innovated. Most of the times a certain amount of time needs to pass in order you and the world to realise what you have done.
Also recently I come to think that the graphic design (or any form of design) is actually far more scientific that I would think it is. For me it looked a lot of like magic in the beginning, but the more I learn about it, the more I think its pretty similar to development. On the basis level they are both about process, best practices, operating under constraints and of course logical thinking. And on top of that its just a matter of taste.
Then you can hand tune the pixels.
Simply reducing ala nearest-neighbor is not good enough.
The problem is that, to work, it needs to know the physical layout of the RGB component inside the device and even should you have a way to detect that (there are none, besides having a DB of all the displays in the world), it does NOT work anymore once you tilt the device...
Try the YouTube sub-RGB AA favico on an iPhone and tilt your screen.
Not working anymore.