Pixel Art Tutorial

http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial

by joshuacc • 13 years ago

193 38 13 years ago

makegames.tumblr.com

If you can't avoid the "pixel" part and go straight to the "art" my eyes would appreciate it. If I want nostalgia I will play games that look pixelated for technical limitations now in the past, not for willingly decaying graphics pretending it has some artistic value.

Even after just using a little bit of median filter it looks better: http://i.imgur.com/P4Dr9Kr.jpg

Arkeus• 13 years ago

Complete disagree with you here. Like any form of art, it's completely subjective. I much prefer the original to the filtered version. I can totally understand people not liking pixel art, but saying it has no artistic value seems ridiculous.

jQueryIsAwesome5• 13 years ago

That's what they are pretending; not that it has none.

And this is for games where immersion is one of the priorities; those micro-squares just make think that my monitor may be using some low resolution settings and doesn't help a little bit to the credibility.

grakk99• 13 years ago

>Like any form of art, it's completely subjective.

My sides.

ANTSANTS• 13 years ago

I emphatically disagree, you just ruined Derek's pixel art. Are you the kind of person that plays emulated games with 2xSai/HQ2X filters?

Here's some way more pixelated, color-limited, and dithered artwork. Would you blur or median filter it? Would you paint over it, vectorize it, turn the dithering into generic gradients?

http://i.imgur.com/RSZvo.png

http://i.imgur.com/DVjGn.png

http://i.imgur.com/18YHG.gif

http://i.imgur.com/e9ZGH.png

http://i.imgur.com/tj8fM.png

jQueryIsAwesome5• 13 years ago

No, I would just fire the artist and hire someone who is not found on making thinks that look like GIFs, like: http://72dpi.cn/wp-content/uploads/2011/01/Ryohei-Hase-599x6...

mistercow3• 13 years ago

>Are you the kind of person that plays emulated games with 2xSai/HQ2X filters?

I play emulated games with those filters, and the reason is simple: it makes them look more how I remember them when I played them as a kid. After all, old CRT TVs caused the sprites to get smoothed back in the day, so it's not like perfectly blocky pixels are really the "original" form. Beyond that, playing SNES games unsmoothed makes my eyes water, and HQ*X looks better than other smoothing algorithms.

In any case, judging and mocking people for how they like to enjoy their games is pretty shitty.

But I also appreciate pixel art that is designed for modern displays, and I agree that the medianed version of the Lucha Lawyer looks horrendous.

networked2• 13 years ago

In case you wonder, these screenshots come from games made for two revisions of the NEC PC-9801, a Japanese 8086 IBM PC-incompatible computer. To be fair, while I think they look good as is you've got to note that the PC-98 used a CRT monitor that would make http://i.imgur.com/18YHG.gif appear more like http://i.imgur.com/HNmUopH.jpg, hence the dithering.

The pixel art of the time, especially that in console video games, was designed with color bleeding, scan lines and other CRT TV artifacts in mind, which is why it can look "wrong" (oversaturated, overly sharp or lacking in detail) on a modern LCD screen. CRT scan lines are especially good at creating an illusion of detail since they add texture to large areas of flat color typical of NES-era graphics. For those reasons some console emulators today include so-called "NTSC filters" that simulate what a CRT TV would do to raw pixel data. See http://web.archive.org/web/20120313013017/http://www.slack.n... for what's probably the most popular implementation to date.

derefr• 13 years ago

Pixel art isn't just for games, and doesn't necessarily involve nearest-neighbor resampling up to ridiculous multipliers. Sometimes it's just the only way to make something identifiable at 16x16:

https://raw.github.com/yusukekamiyamane/fugue-icons/master/a...

_quasimodo• 13 years ago

Imposing limits (low resolution, few colors) on your work can amplify your creativity.

sgdesign2• 13 years ago

That's a good point, and in any case pixel art is not that far from pointillism or other mosaic-based artforms.

lifeformed• 13 years ago

Your filtered version is objectively bad. It's the worst of both worlds: a blurry mess with jagged edges. The original version has style; you've traded that for some misguided belief that higher-res or more-realistic is inherently better.

coldtea4• 13 years ago

>If you can't avoid the "pixel" part and go straight to the "art" my eyes would appreciate it. If I want nostalgia I will play games that look pixelated for technical limitations now in the past, not for willingly decaying graphics pretending it has some artistic value.

YOU will do that "if you want nostalgia". I, and many others, will happily play a modern pixel art based game.

And it's not even about the nostalgia. It's a stylistic choice all by itself, just as black and white photography is.

Today's pixel art is far more detailed and clean looking that any old low-res game -- to the point that it's not about mimicking low-res 80's games anymore at all.

>Even after just using a little bit of median filter it looks better: http://i.imgur.com/P4Dr9Kr.jpg*

You just turned it into a mediocre line drawing.

Reply

networked2• 13 years ago

I think this does a good job at explaining what pixel art is and isn't: http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299...

Reply

roryokane• 13 years ago

This is irrelevant to your main point, but if you’re going to make the picture look more realistic with a filter, the HQX scaling filter (http://en.wikipedia.org/wiki/Hqx) works a lot better on pixel art. Here’s the original picture scaled down and then scaled up again with HQ2x: http://i.imgur.com/w9RIK1p.png. I think that looks a lot better than your median-filtered version, though I’m not sure whether I like it more than the original.

Reply

jQueryIsAwesome5• 13 years ago

Interesting.

Reply

_ferdev_• 13 years ago

Awesome. What a titanic task to create a full set of characters (with each animation frame) for a videogame using this technique.

Reply

jere• 13 years ago

Can I just say that Derek Yu is an indie god? I remember being blown away by Diabolika and Eternal Daughter a decade ago. And Spelunky (released last year) is a ridiculously good game, especially with friends. He got his start doing Klik 'n Play games and that's where I first got interested in programming (learning quite a bit about it without doing any actual coding) and pixel art.

If you're looking for a similar article, this is one of the best ones I recall: http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/

Reply

doomlaser• 13 years ago

He also runs TIGSource, whose forums have been a breeding ground for indie game developers for years -- note the very first posting of Minecraft: http://forums.tigsource.com/index.php?topic=6273.0

Reply

jwdunne• 13 years ago

Also, a tip I received from a very skilled pixel artist[1] was to learn to draw - pixel art comes much easier if you improve your drawing skills.

As such, I recommend:

http://www.amazon.co.uk/New-Drawing-Right-Side-Brain/dp/0007...

1: http://www.pixeljoint.com/files/icons/full/elk_dragon_final....

Reply

shardling• 13 years ago

There's a pretty nice (though short) pixel texture tutorial in the minecraft forums: http://www.minecraftforum.net/topic/1351664-pixel-art-textur...

I was trying to make some pixel art for a little game I was messing with, and it really helped me understand some of the techniques.

Reply

mwill• 13 years ago

I remember seeing this years ago, off tumblr, but for some reason didn't associate it with Derek Yu until now. Embarrassingly, the original that I would have seen back then (cached[1]) was not only plastered with his name, but lived at derekyu.com.

It makes me wonder what other blazingly obvious author connections my brain has failed to make over the years.

Sidenote: I'm pleasantly surprised this is so popular on HN! I'm curious if this was mostly upvoted for plain curiosity, or practical usefulness.

[1] http://webcache.googleusercontent.com/search?q=cache:IiKlxup...

Reply

Sami_Lehtinen• 13 years ago

Ugh? Isn't there too kinds of graphics currently used? Pixel art and vector art (whish is automatically converted to pixel art). Every jpg, png and gif image is pixel art. There's no way around it, unless you start using svg's.

Yes, I'm technical nerd. But who can say my opinion wouldn't be right one. Those basic pixel art concepts are also needed with higher resolutions to make great looking stuff.

Every game not using CGA graphics, does look too realistic and confuses people and blurs line between games and reality.

Reply

sgdesign2• 13 years ago

I have a hard time understanding your point, but I think you're confusing pixel art and bitmap images.

Reply

coldtea4• 13 years ago

>Ugh? Isn't there too kinds of graphics currently used? Pixel art and vector art (whish is automatically converted to pixel art). Every jpg, png and gif image is pixel art.

No, every jpg, png and gif image is a BITMAP.

"Pixel art" is a stylistic category.

You might want to read this ( http://en.wikipedia.org/wiki/Pixel_art ) which provides some basic insight, even though it is extremely badly written.

>There's no way around it, unless you start using svg's.

Or unless you use the terms correctly, like everyone else.

>Yes, I'm technical nerd. But who can say my opinion wouldn't be right one.

Anybody that knows what bitmap, vector and pixel art means?

>Those basic pixel art concepts are also needed with higher resolutions to make great looking stuff.

No, they are not. While some concepts remain the same, other concepts are totally meaningless in higher resolution non pixel-art styled images.

Reply

Pixel Art Tutorial

Related Stories