2d Handdrawn sprite arts

[RedKnight]

Ok lets see.

I have
Tons of Papers.... Check.
a 4.5 mm Pencil... Check.
a Scanner... Check.
Photoshop Check.
experience with drawing... Check!
[BIG GRIN]

a link to http://armjoe.hp.infoseek.co.jp/WIPmain.html
Is what I like to do, but from my point of view, Dot fighter seems like the kewlest fighting that I've seen


Btw
I'm looking for resources or tutorials on how to
make handdrawn sprites for a 2d game

so has anyone done this before?

[destron]

that's *not* the conventional way of making game sprites - the only game i've heard of with hand-drawn sprites is Pencil Whipped (http://www.avault.com/pcrl/demo_temp.asp?game=pencilwhip), which my not be what you had in mind...

[RedKnight]

I believe that's call cell shading.
or not, It look like it has a different way to render the black lines.

Maybe with Cg or some funky extensions.

Yeah, it is not what I had in mind.

But what I wanted is how you do make sprites like..

Street Fighter III or the likes.

[impossible]

that's *not* the conventional way of making game sprites - the only game i've heard of with hand-drawn sprites is Pencil Whipped (http://www.avault.com/pcrl/demo_temp.asp?game=pencilwhip), which my not be what you had in mind...
What is the conventional way then? I guess the "conventional" way in casual games now is to use prerendered 3D or vector art, but there are whole communties dedicated to doing pixel art. A common technique is to sketch the sprite on paper first and then scan it, although it not necessary to do so. There are tutorials out there (Tsugumo, spriteart.com, derekyu.com, etc.) that cover this method in detail.

Checking out pixeljoint.com would be a good place to start.

[Ratboy]

Ok lets see.

I have
Tons of Papers.... Check.
a 4.5 mm Pencil... Check.
a Scanner... Check.
Photoshop Check.
experience with drawing... Check!
[BIG GRIN]

so has anyone done this before?Sure have. Here's how you do it:

1. Put the paper, pencil, & scanner to the side.
2. Start a new image in photoshop
3. Zoom all the way in.
4. Pick a color
5. Using the Pencil tool and a 1x1 brush, put down a single pixel.

Repeat steps 4 & 5 until your sprite is done. :cool:

[RedKnight]

Sure have. Here's how you do it:

1. Put the paper, pencil, & scanner to the side.
2. Start a new image in photoshop
3. Zoom all the way in.
4. Pick a color
5. Using the Pencil tool and a 1x1 brush, put down a single pixel.

Repeat steps 4 & 5 until your sprite is done. :cool:


Yeah sure.

it's simple for you on how to that.
But with paper and pencil I can draw more details and frames to it.
and deliver a high quality 2d art work.

[destron]

so are you looking for how to do hand-drawn sprites or how to do the fighting sprites in those screenshots? well, if you want to draw them all, then try this:

first figure out what the sprite is of (fighter, background, etc) and what the animation is to be (punch, kick, magic etc) and draw a first sketch of the first frame. Keep perfecting the drawing until you have what you want.
Take that image and draw on a separate piece of paper and draw the next fram of the animation. then take another piece and draw the next one, and then so on... then scan each image individually. If it is lineart to be colored later - you might find this (http://www.biorust.com/tutorials/detail/199/en/) tutorial helpful (for photoshop). Then you can save each image as a different file, with the background (being everything that is not the sprite) with the transparent sprite color - it can be anything depending on the game your working on. if you want it to be a web animation or something you can take it into imageready, just make each successive image as a layer, then somewhere (i can't remember where, probably in somewhere in the frames box) there's an option to "make frames from layers". Click that and then you can save it as a gif or whatever.

cheers
destron :)

[oNyx]

[...]
Street Fighter III or the likes.

Uhm... for professional pixel art you need years of experience. Most of those are actually 4bit. Yes, thats right 16 colors (transparency included). Just check a bunch of neo geo beat em ups, if you dont believe me. Thats really tough time-consuming stuff.

With true color range you only need a fraction of the time, but its more like anime then and pretty far from pixel art.

>But with paper and pencil I can draw more details and frames to it.

You dont actually draw any details, because those will get lost in the process anyway. Most people use very rough sketches, then they roughly retrace it, then they fix the outline, colors, shading, more outline fixing inbetween and finally some details (if there is any room).

I suggest to google around for pixel art communities. There should be still a few around and there are also lots of tutorials, which explain the basics and terminology.

I really like pixel art, but I sorta gave up on it, because its so damn time-consuming. Knowing the basics is useful for icons tho.

[Anthony Flack]

I would definitely recommend using pencil and paper as a starting point for any large sprites. Hand-pixelling is fine for small characters, but anything Street Fighter-ish will be easier if you start off the old-fashioned way.

Which part of the process is causing difficulty? If it's the animation itself, I suggest you get a light box and one of those books that give you tips on how to draw animation frames.

[Jamie W]

How about breaking your sprites down in to component parts (head, body, arms, legs?). Draw these individually, on a seperate sheet. You may also draw variations on each component (head smiling, frowning, winking).

Once you've got all your components / variations, scan them all in, fire up PhotoShop, and have one layer per component. You can then use animation mode to move each layer around for each frame of your animation cycle.

[RedKnight]

Uhm... for professional pixel art you need years of experience. Most of those are actually 4bit. Yes, thats right 16 colors (transparency included). Just check a bunch of neo geo beat em ups, if you dont believe me. Thats really tough time-consuming stuff.




I believe that no prof game studio do that anymore.. ;)
were now in the sixth generations.

But thanks everyone.
And to Anthony
Yes it is more like animation.

[Anthony Flack]

If I was doing something with a cel-shaded look, I actually would go with 4 or 8 bit graphics if I could.

You could fit a lot of really nice, detailed animation in that way.

[Jason Chong]

If i were to do pixel art, I won't pixel it at the desired resolution. Waste of detail efforts.

I will draw everything at the highest resolution I can afford, without a care about pixelling it.

Then I will use a GOOD interpolation software to scale the huge asset downwards to the desired size, and give it the finishing touch.

If I want it at a different angle/rotation, I will rotate the huge source then scale that one down again. This way I get no loss of details. The scaling down gets you nice decent anti-aliasing effect within the inside of the sprite.

The catch is you need to have a good decent set of palettes to ensure the interpolation algorithm have enough colors to work with. If it's not an 8-bit palette then you don't even have to worry about it.

To summarize, draw your stuff in very high-res, then scale it down with a high quality interpolation software and fix the stuff for final output.

[mahlzeit]

Meh, back in the day I had to draw sprites in a 24x21 grid and calculate the byte values by hand!

Does Photoshop (or any other of today's 2D packages) have an onion skinning feature? I always found that indispensible for doing animation by hand, but the last time I used it was in Deluxe Paint. ;)

[Olivier]

Does Photoshop (or any other of today's 2D packages) have an onion skinning feature? I always found that indispensible for doing animation by hand, but the last time I used it was in Deluxe Paint. ;)

I dont' know if Photoshop does onion skinning (simply use semi-transparent layers?) but for sure Cosmigo's Promotion (http://www.cosmigo.com/promotion/) does.

[Jason Chong]

Meh, back in the day I had to draw sprites in a 24x21 grid and calculate the byte values by hand!

Does Photoshop (or any other of today's 2D packages) have an onion skinning feature? I always found that indispensible for doing animation by hand, but the last time I used it was in Deluxe Paint. ;)


I still have the dos version of Deluxe Paint. That was used a lot long ago.

Nowadays I don't use it anymore since I don't need to worry about palettes, so just let em 3D apps do the drawing work for me. I just model, texture and animate.

[Anthony Flack]

draw your stuff in very high-res

Oh yeah, that's a good point. I do all my work at high res as well, and only scale down right at the end. The quality of edge antialiasing you get from this is very nice.

[PoV]

You guys used to the "old skool" might get a kick out of Plastic Animation Paper (http://www.plasticanimationpaper.dk/). It's software that emulates the traditional process, and yes, it onion skins. It does a few things similar to Sketchbook Pro (radial stroke menus), if you dig that interface.

[Jamie W]

Oh yeah, that's a good point. I do all my work at high res as well, and only scale down right at the end. The quality of edge antialiasing you get from this is very nice.

I'd been experimenting with this; drawing everything 4* higher and 4* wider than needed, then scaling it down to get all the antialiasing. I really liked the results.

However, for now, I've gone back to creating sprites at normal size. I found making the big sprites just too time consuming. I can always come back to them once development is closer to completion.

Anyway Anthony; I think your 'make game sprites out of modelling clay' thing is inspired, and you shouldn't be allowed to use software such as photoshop or promotion to 'pixel' your game art! (best of luck with your future productions by the way).