
16×16 Pixel Art Tutorial - gaoprea
http://www.photonstorm.com/archives/2291/16x16-pixel-art-tutorial
======
leddt
Reminded me of this:
[http://24.media.tumblr.com/tumblr_lmohwflNZU1qkfxqfo1_500.jp...](http://24.media.tumblr.com/tumblr_lmohwflNZU1qkfxqfo1_500.jpg)

Kidding aside, it's pretty interesting. I'll probably use this technique for a
small game I'm doing in my spare time.

------
crazygringo
(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>

~~~
Kiro
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.

~~~
crazygringo
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>

~~~
pubby
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?

~~~
bconway
Getting a little off-topic, but my favorite two to mix up:
<http://www.outback.com/> , <http://www.consumerreports.org/>

------
swanson
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.

~~~
phpnode
interesting, but would you walk away if it was $20? or $50? What _is_ the
commercial value of a nice favicon?

~~~
swanson
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 :)

~~~
phpnode
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.

~~~
swanson
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).

------
llambda
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>

~~~
dylanrw
Excellent job. I love seeing people step out of their comfort zone. :D

------
eksith
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.

~~~
zabraxias
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.

~~~
josefresco
Reddit is that way gentlemen 8===>

~~~
hackmiester
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?

~~~
DHowett
Yes, because we're ostensibly _mature adults._

~~~
eksith
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.

------
pubby
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](http://forum.wesnoth.org/viewtopic.php?f=13&t=32273)
(Great article by Jetrel)

------
bpicolo
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.

~~~
Dove
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.

------
VLM
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.

------
homonculus
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/>

------
Kiro
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.".

------
ChuckMcM
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.

~~~
scarecrowbob
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.

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

~~~
Ingon
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.

~~~
rieter
Graphic design is not Computer Science.

~~~
Ingon
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.

~~~
dylanrw
Coming from a designer's perspective you nailed it in the last paragraph.
Anyone who disagrees only has a superficial grasp of both disciplines.

------
ck2
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.

------
timestretch
You might like my pixel art app, FatBits for iOS:
<https://itunes.apple.com/us/app/fatbits/id501273236?mt=8>

------
dylok4200
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.

------
cpeterso
Here is someone's (2009) remix of YouTube's favicon using subpixel colors:

<http://typophile.com/node/60577>

~~~
martinced
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.

------
nodata
I wish they'd offer an avatar service.

