16×16 Pixel Art Tutorial(photonstorm.com)
photonstorm.com
16×16 Pixel Art Tutorial
http://www.photonstorm.com/archives/2291/16x16-pixel-art-tutorial
17 comments
(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.
[1] https://github.com/styleguide/css/7.0
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.
[1] https://github.com/styleguide/css/7.0
I disagree. The HN favicon is awful and I don't see any school bus on the Photon Storm one. I see a nicely designed parrot.
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 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.
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).
[1] http://reddit.com
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).
[1] http://reddit.com
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.
Try opening http://blogsofnote.blogspot.com/ , http://www.homedepot.com/ , and http://8days.nl/ at the same time. See the problem?
Try opening http://blogsofnote.blogspot.com/ , http://www.homedepot.com/ , and http://8days.nl/ at the same time. See the problem?
Getting a little off-topic, but my favorite two to mix up: http://www.outback.com/ , http://www.consumerreports.org/
Just because something is functionally acceptable, does not mean it is well designed.
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.
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.
HN is not ugly.
[deleted]
[deleted]
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.
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.
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.
interesting, but would you walk away if it was $20? or $50? What is the commercial value of a nice favicon?
For me, it would have to be less than the price of the domain - which is typically ~$12-15 dollars.
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 :)
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 :)
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.
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.?
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).
[deleted]
someone must offer that on http://fiverr.com/
You are correct!
http://fiverr.com/gigs/search?utf8=%E2%9C%93&query=favic...
Case closed :)
http://fiverr.com/gigs/search?utf8=%E2%9C%93&query=favic...
Case closed :)
[deleted]
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:
http://f.cl.ly/items/003y1m2a0b2n0F1p2G3Q/lambda.png
http://f.cl.ly/items/003y1m2a0b2n0F1p2G3Q/lambda.png
Excellent job. I love seeing people step out of their comfort zone. :D
The scissors look like something else :/
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.
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.
It's the first time I've seen a scissors icon where the blades of the scissors are closed.
Glad I am not the only one with a dirty mind. I like the technique described though we've all hit these issues making favicons.
Reddit is that way gentlemen 8===>
So I guess if someone comes on Hacker News and posts an image, and it kind of looks like a phallus, everyone should just keep quiet about it?
Yes, because we're ostensibly mature adults.
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.
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.
Saw the same thing.
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. :/
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. :/
Reminded me of a slider (I need to get out more I guess)
Here are my two favorite pixel art resources which are much better than the photonstorm link:
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)
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)
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.
It's a recursive process.
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.
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.
That one leaped out at me too.
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".
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".
For each of the base colours from the previous step, make one darker color and use it to add shadows where needed.
For each of the colors. Granted, I agree that the rule wasn't followed in the example.
For each of the colors. Granted, I agree that the rule wasn't followed in the example.
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: http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/
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.
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.
In a few years, this will be what flat design is today. We're going in circles.
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.
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.
Graphic design is not Computer Science.
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.
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.
Coming from a designer's perspective you nailed it in the last paragraph. Anyone who disagrees only has a superficial grasp of both disciplines.
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.
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.
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.
Then you can hand tune the pixels.
Simply reducing ala nearest-neighbor is not good enough.
Then you can hand tune the pixels.
Simply reducing ala nearest-neighbor is not good enough.
You might like my pixel art app, FatBits for iOS: https://itunes.apple.com/us/app/fatbits/id501273236?mt=8
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:
http://typophile.com/node/60577
http://typophile.com/node/60577
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.
Not working anymore.
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.
I wish they'd offer an avatar service.
Kidding aside, it's pretty interesting. I'll probably use this technique for a small game I'm doing in my spare time.