(Quick preface: this is not about the design technique, which is fine, but rather using icons like this on the web, or as favicons.)
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.
I think you might be confusing beauty with design.
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).
In my experience the Hacker News icon is one that gets confused with icons on my tab bar. Colored squares are only easily recognizable if they have a unique color, which obviously won't happen with the billions of sites out there.
HN favicon has no design. It is not beautiful and it lacks even the 32x32 version. The whole site still uses FONT elements in its code. What do you expect?
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.
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.
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.
> knowing how to do shadows based on a light source
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.
I wonder how fast a good designer could bang out a favicon (given a source image)? My gut estimate is 30-60 minutes at a bare minimum. If so, they'd probably want to charge more than a few dollars. But that could be a fun side project for a designer. Set up a site and let people queue up requests, then when you get some time, just open up your backlog of favicon requests and churn them out for 10 bucks a pop.
I think it depends how many sites you own, if you only own one then you'll probably be prepared to part with a lot more than someone who manages a load of different sites. Anyone tackling this market should probably set up 2 sites offering the same service branded and priced accordingly.
Sure, my use-case is that I have a few toy side-project apps. Serious enough that I'll drop $15 for a .com domain and could part with $5 for a nice favicon, but not enough that I really care enough to spend $50 (since they don't make revenue).
It's a funny thought experiment. Some people want to only spend a few bucks. But whats the price not for the pixeling, but the time it took to learn color theory, illustration, composition, what makes a bad icon, etc.?
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:
Mature adults don't pretend the world is a bouncy castle.
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. :/
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".
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.
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.
We'll eventually replace all of the 'lo-rez' glass in the world with 'hi-rez' glass and nobody will want 'chunky' graphics.
I dunno... there's plenty of mosaic and stained glass art that would seem to point to a world in which hi-fidelity representational art isn't the total end of art.
So in the end CS is actually more about fashion then fashion. We can draw the parallels it is not pretty - the C?O are the designers (the more successful the more high profile). The developers working in these high profile companies are the models, walking around with their new (or old) shiny clothes - e.g. some random technology or process, saying together with C?Os how great and enabling it is. And similar to the fashion this goes in big circles between few years. What have left for us - trying to filter all this noise, make sense of our clothes (jobs), trying to do our jobs (which in some cases means wearing the rags) and wait for the next wave of "inovation".
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.
Sure, but that was my mistake - I meant CS more general, product/project development way. And looking from this point the two are pretty much involved. Also in this context the development maybe starts to look a lot like a design.
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.
I like the analogy, actually. There's nothing wrong with a field of work that allows so much creativity. Both involve people working creatively and interactively, which are good ingredients for cultures to flourish. If one were to somehow remove what made our field like fashion, I wonder if there'd be any passion left.
I don't dismiss the creativity and innovation, on the contrary. I just dismiss blindly following the what other people are doing just because they are famous and/or vocal.
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.
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.
Sub-pixel AA (RGB decimation) is great. Was first used on some Apple computer in 1984 or something (it was based on two, not three, color components IIRC).
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.
Kidding aside, it's pretty interesting. I'll probably use this technique for a small game I'm doing in my spare time.