My sprite creation methodology.

[Penguinx]

Well, I thought I'd post this here. I haven't been active for a long while (damnable real life getting in the way and all), but I thought I'd share a way of making sprites that has REALLY changed the way I work.

This method is a lot less reliant on hunting and pecking around and, for me, tends to create more fluid results.



I start by drawing a loose sketch of the subject in Painter. This could just as easily be done on traditional media. I then proceed to overlay a grid on the sketch with the same number of squares as the final piece of pixelart should have. In this case, I have guidelines creating 32 boxes across and 32 boxes down.

Next, I fill in black squares in the boxes which I think help convey the character the best. Sometimes, some major tweaks need to be made at this stage. I find it's really handy to be able to refer back to the original sketch by turning off my faux-pixel layer.

I like this way of working because it helps me to focus on the character first and the fact that it'll be rendered as pixels second. I get a lot more fluid results this way. If you don't feel like mucking around with all that, just buy some graph paper and do a loose pencil sketch there first, blocking in the squares later. That ought to work about the same.

Next, I tend to alt-tab from Painter to Graphics Gale. I zoom way in on a 32x32 image and transfer my black marks. Really, any graphics program with a good zoom and pixel by pixel grid feature ought to work fine.

After transfering my black marks, I lay down large, flat areas of color. From here on out, it's matter of adding shadows and highlights with as few colors as possible (because I'm a bit of a purist that way). Darker, cooler, desaturated hues tend to receed and brighter, warmer, saturated hues bring things forward. Anything you can do to bring form to the little bugger helps.



Often at 100% or 200% things look remarkably different than the 1600% view I work at. There's a lot of testing that goes into seeing what'll read well at such a small size. In the above example, I flip-flopped on the color of the band-aid, finally settling on the original choice with the addition of a highlight and some shadows.

That's about it!

[pslim]

Making a sort of faux-pixel grid over an image drawn at any size is an interesting approach that probably never would have occurred to me. Thanks for posting this. 

[Penguinx]

No problem; it seemed so obvious AFTER I started using the method. I just happened upon it as a happy accident.

[Oneway]

This grid, is there a feature in photoshop or different program that does this for you or do you have to make one of your own?
I know of the ruler feature, but this doesn't seem like it.

If it is a feature, maybe you could edit your first post to explain where (and in what program) to find it.

Good technique though! Seems a lot less timeconsuming then tracing a hi-res sketch and then removing all those double border pixels.

[Mikko]

Photoshop: View->Show->Grid

And then from the preferences (Edit->Preferences->Guides, Grids & Slices) adjust gridline every 1 pixels.

[Penguinx]

Yeah, it's definitely better than reducing a high res sketch or the like. This way, you get to selectively pixel and see if you're making the right decisions as you go thanks to the reference layer.

That's correct, Mikko. One more suggestion, though. My original, high resolution sketch is at 5"x5" @ 300dpi. I divided the width in pixels by 32 to get my pixel distance between spaces in the grid for the first step. Mikko's method of adjusting the gridline every 1 pixels is for the second step when you're actually working at your sprite size (which in my case was 32x32).

[Mikko]

Yep, sorry, I seem to have skipped that.

[Penguinx]

Hey, thanks for posting the explanation. It was a lot more eloquent than I was going to put it.