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

A place for graphics

Moderator: DarkAuron

DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

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

Post by DarkAuron »

I'm thinking about posting tips and answering questions about pixel art, if anyone's interested..
Last edited by DarkAuron on Thu 22 Dec, 2005 7:21 am, edited 4 times in total.
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
Spengo
Calc Master
Posts: 1116
Joined: Sat 15 Jan, 2005 3:56 am
Location: ooga booga land
Contact:

Post 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
bananas... o.o
Mike K
New Member
Posts: 59
Joined: Sun 16 Jan, 2005 3:25 am
Location: St. Louis
Contact:

Post by Mike K »

Personally, MSPaint, Gimp, and Mira should suffice. (and flash for animation)

-Mike
User avatar
blueskies
Calc Wizard
Posts: 553
Joined: Tue 25 Apr, 2006 2:24 pm

Post 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.
Duck
Sir Posts-A-Lot
Posts: 231
Joined: Sat 18 Dec, 2004 3:38 am

Post 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/
User avatar
tr1p1ea
Maxcoderz Staff
Posts: 4141
Joined: Thu 16 Dec, 2004 10:06 pm
Location: I cant seem to get out of this cryogenic chamber!
Contact:

Post by tr1p1ea »

This is a really good idea, everyone could use some tips on pixel art :).
"My world is Black & White. But if I blink fast enough, I see it in Grayscale."
Image
Image
User avatar
Shadow Phoenix
Calc Guru
Posts: 835
Joined: Mon 03 Jan, 2005 7:54 pm
Location: out there. seriosly.

Post by Shadow Phoenix »

teach me 2d 8x8 SPRITES! lol i need it
Life is getting better.
leofox
Calc Master
Posts: 1064
Joined: Fri 17 Dec, 2004 3:22 pm
Location: Probably playing DDR
Contact:

Post 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.
Image
Image
DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Post 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.
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
koolmansam375
Extreme Poster
Posts: 479
Joined: Fri 17 Dec, 2004 11:09 pm
Contact:

Post 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)
Image

Pongwars shall live!

blog is down atm. :-(
Mike K
New Member
Posts: 59
Joined: Sun 16 Jan, 2005 3:25 am
Location: St. Louis
Contact:

Post 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
DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Post 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:
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
User avatar
Jim e
Calc King
Posts: 2457
Joined: Sun 26 Dec, 2004 5:27 am
Location: SXIOPO = Infinite lives for both players
Contact:

Post 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.
Image
DarkAuron
Maxcoderz Staff
Posts: 1349
Joined: Sat 18 Dec, 2004 6:53 pm

Post 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.
Last edited by DarkAuron on Mon 26 Feb, 2007 11:08 pm, edited 4 times in total.
[Gridwars Score] - E: 1860037 M: 716641 H: 261194
the_unknown_one
Calc Master
Posts: 1089
Joined: Fri 17 Dec, 2004 9:53 am

lol

Post 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:
Post Reply