13 ms·
16×16 Pixel Art Tutorial
- VLM 14y agoThat 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.
- eksith 14y agoThe 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 14y agoGlad 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 14y agoReddit is that way gentlemen 8===>
- hackmiester 14y agoSo 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 14y agoYes, because we're ostensibly mature adults.
- eksith 14y agoMature 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.
- prawks 14y agoIt's the first time I've seen a scissors icon where the blades of the scissors are closed.
- dhimes 14y agoReminded me of a slider (I need to get out more I guess)
- n3rdy 14y agoSaw 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. :/
- RivieraKid 14y agoIn a few years, this will be what flat design is today. We're going in circles.
- Ingon 14y agoSo 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.
- stiletto 14y agoI 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.
- Ingon 14y agoI 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.
- nodata 14y agoI wish they'd offer an avatar service.
- bpicolo 14y agoOnly 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.
- prawks 14y agoFor 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.
- Dove 14y agoIt'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.
- JDGM 14y agoThat 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".
- swanson 14y agoI'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 14y agointeresting, but would you walk away if it was $20? or $50? What is the commercial value of a nice favicon?
- swanson 14y agoFor 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 14y agoI 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.
- leddt 14y agoReminded me of this: http://24.media.tumblr.com/tumblr_lmohwflNZU1qkfxqfo1_500.jpg http://24.media.tumblr.com/tumblr_lmohwflNZU1qkfxqfo1_500.jp... Kidding aside, it's pretty interesting. I'll probably use this technique for a small game I'm doing in my spare time.
- ChuckMcM 14y agoI'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 14y agoI 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.
- crazygringo 14y ago(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 https://github.com/styleguide/css/7.0
- deleted 14y ago[deleted]
- Kiro 14y agoI 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.
- Kiro 14y agoStep 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.".
- homonculus 14y agoHere'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/ http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/
- pubby 14y agoHere 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 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)
- cpeterso 14y agoHere is someone's (2009) remix of YouTube's favicon using subpixel colors: http://typophile.com/node/60577 http://typophile.com/node/60577
- martinced 14y agoSub-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.
- timestretch 14y agoYou might like my pixel art app, FatBits for iOS: https://itunes.apple.com/us/app/fatbits/id501273236?mt=8 https://itunes.apple.com/us/app/fatbits/id501273236?mt=8
- dylok4200 14y agoPixel 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.
- llambda 14y agoI 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
- dylanrw 14y agoExcellent job. I love seeing people step out of their comfort zone. :D
- ck2 14y agoSomeone 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.