Page 1 of 2

Teaching the ways of Pixel Art [Lesson 1: Making a sprite]

Posted: Fri 15 Apr, 2005 3:13 am
by DarkAuron
I'm thinking about posting tips and answering questions about pixel art, if anyone's interested..

Posted: Fri 15 Apr, 2005 3:21 am
by Spengo
How bout, what's the best FREE sprite/animation drawing program. Being able to draw 3D stuff with it and export to an object would be a good plus too. :D

Posted: Fri 15 Apr, 2005 3:58 am
by Mike K
Personally, MSPaint, Gimp, and Mira should suffice. (and flash for animation)

-Mike

Posted: Fri 15 Apr, 2005 4:59 am
by blueskies
I would love to see some good tutorials, or at least a step-by-step process or pixel drawing. I seriously need some work in that department, and learning from someone as skilled as you would be a plus.

Posted: Fri 15 Apr, 2005 6:21 am
by Duck
We had some topics about this in the past.
Here's a link to the best pixel forum in existance:
http://pixelation.swoo.net/ (seems to be down at the moment)

alternative forum: http://web1.t43.greatnet.de/pixelerate/ (look at those avatars)
Image

So You Want To Be A Pixel Artist tutorial: http://pixeltutorial.cjb.net/

Posted: Fri 15 Apr, 2005 1:50 pm
by tr1p1ea
This is a really good idea, everyone could use some tips on pixel art :).

Posted: Fri 15 Apr, 2005 3:36 pm
by Shadow Phoenix
teach me 2d 8x8 SPRITES! lol i need it

Posted: Fri 15 Apr, 2005 5:18 pm
by leofox
There are no (or not much) good tutorials for sprites on limited platforms (calcs, Gameboys etc.), most of them are colored and 'big'(in comparison to calcs). It would help the programmers that can't draw that good.

Posted: Fri 15 Apr, 2005 8:22 pm
by DarkAuron
Probably the best way to learn is by personal example, so to start off, I'll ask for someone to post a sprite of theirs that, in their opinion, isn't very good and would like to have it improved. Then what I'll do is post a reply with a step-by-step change of it with an explanation, and relate to other things.
Personally I don't have an example right now.. that's why I'm asking you! :D
So You Want To Be A Pixel Artist tutorial: http://pixeltutorial.cjb.net/
I looked at that site many times a few years ago, however my main problem with it is that even though they seem to go step-by-step with coloring and such, they don't explain how they did the shading; I think I might be able to do so.

Posted: Fri 15 Apr, 2005 8:35 pm
by koolmansam375
I use the "So you wanna be a pixel artist?" tutorial. Its one fo the best out there (imo) for making grfx for the calcs (as he goes into stuff like that). My problem with it tho is it doesnt go into enough detail (as DA said) about how to do certain things like the shading and maybe making different tiles (other than grass)

Posted: Fri 15 Apr, 2005 9:05 pm
by Mike K
Pixel art is often trial-error in the process. Many a time, you will find yourself needing to shrink down a graphic, or strip out the color. Usually I like to open paint, paste the big version to the left, then shrink it down using the "scale" feature, and make it look better from there.

-Mike

Posted: Fri 15 Apr, 2005 9:11 pm
by DarkAuron
That's often what I do, and I'll probably evaluate on that later. Right now I'm about to pass out, so I'm going to take a nap :puzzled:

Posted: Fri 15 Apr, 2005 9:20 pm
by Jim e
So all you greats out there use a reference picture to draw your sprites.

Huh, well now that I think of it I draw better in pencil when I have reference to, even if it's not exactly what I want. It's hard to visualize in your head, especially when your a perfectionist and think everything you do is crap.

Posted: Sat 16 Apr, 2005 9:54 am
by DarkAuron
[Through the process of this I will be using MSPaint. You're welcome to save the image, cut the size by 1/3 (33% size), and work on it as you read the tutorial. But that's not necessary my intention on what you should do]

Well this will be my second time to type this, as the first time I went through most of it and my computer FROZE. Grr. Anyhow, I figure I'll just use my first character sprite that I ever made as an example, and work on improving it step-by-step with detailed descriptions of how I'm thinking and what's being done and WHY :P

So to start off, here's my guy at his first stage:

Image

Now if I asked you what you thought this guy was supposed to look like, what would you say? Well, if you look carefully, you might be able to tell he's wearing a cap. And he has really short arms.. a bloated torso as if he's go a pillow underneath his shirt, and his feet really stick out and up to the side. Theres also poor detail work, which makes this generally look kinda crappy. Lots of things out of proportion. His hair isn't visible, if he even has any. Basically he looks like a disfigured nerd-like guy.

Well, he was intended to look like some punk teenager, but that didn't turn out to well for this sprite. Poor thing, I bet he's sad.. maybe it's why theres no mouth. Later on I'll explain why he doesn't have a mouth.. but on to the editing!

What should be done first? Theres lots of changes that should be made, and really there isn't any specific spot to start from, but for the heck of it, I'll start off with the feet because they look too weird right now.

The problem with the feet is that they stick out. So what can we do? Shall we just chop off the feet and serve them to royal figures, or shall we suck out the fat (eh?), or just shove them closer to him? Well, hopefully the latter, and by squishing them, I mean toward where the arrows point:

Image

Well you're probably sitting there going "duhhhh.. how do I feex eet!? ish funny!" Or maybe you aren't, but what should be done is cutting out some of the pixels on the outside.

Image Image

Generally we want the feet to look somewhat like circles, or at least ovals, because from a distance up front, a character's feet look like circles. We also want to preserve some kind of outline like it was before, so that should fill in like so:

Image

Well, he feet look like bricks now instead of ovals. But rectangles can be rounded by cutting off the corners, or in this case, the corner pixels. So if you did that, you'd end up with rounded feet.

Image

His feet are looking a lot more normal now! Now as a side thing, can you notice some extra crud I tried to fancy in when I first made it?

Image

Those are NOT necessary, because when you create a sprite at first, you shouldn't worry about details yet, just some kind of shape you can mold with. At this point I'd probably remove them, to remove a distraction while working.

Image

There, a much sharper and cleaner image to deal with. Now I still want to work a tad bit more on the feet because they still seem too far away from the legs, so what I will do is move the feet using the Selection tool (or Crop, whatever you wish to call it) a pixel closer to the center.

Image

And then fill the center outline of the legs again, which was covered up.

Image

Now what? Just about everything that needs fixing is attached to the torso, which is a bit bloated. So let's try to size it down some by squishing it closer to the center like we did with the feet, using the Selection/Crop tool.

Image

Looking a bit better now, although still kinda weird. The arms seem even shorter now, so if we move them down..

Image

And fill them in..


Image

He looks better! Much more proportional now, and looks pretty normal.

That's pretty much the lesson for now, I'll either go into shading the next lesson or the lesson afterward. Until then, you may ask questions and give comments, suggestions, whatnot. I don't have a degree in teaching (I don't think anyone here does :P) so I might not be the best at laying it out, but I'm giving it a try.

I'm not sure if I should give a lesson on creating the character's shape or not, as that's totally experimental and different people have different styles.

And now, since it's 5:04am, I think I'll go sleep finally.

lol

Posted: Sat 16 Apr, 2005 10:05 am
by the_unknown_one
Man, u should show to change his legs too, cause they just look superweird... And his cap looks more like a bonnet (or however it's called in english)... Else, nice work man :wink: