55 replies to this topic

[Nash]

The Art of the Pixels: Pt I
A Tutorial by Cowboy14

Note: PLEASE reply to this topic once you have read it. Its been too long for me to remember exactly whats hard about pixeling so in order to better help you I need to hear questions/input from people just starting out!

Other Useful Tutorials to read through along with mine:
Quer Skull's Pixel Tutorial

Ceddo's Pixel Tutorial



Im going to break this down into multiple parts, this being the first part of an entire tutorial. Breaking it down into three different threads will ensure you dont get too much information thrown at you all at once.

Part I: The Landscapes
Part II: The People
Part III: The Buildings/Rooms


And so it begins...


Part I: Landscapes.

Step1: Make a Canvas; In this case mine is 300x150


Step 2: Make a horizon line dividing the sky from the ground.


Step 3: Make your first layer of mountains.


Step 4: Make your second layer of mountains.


Step 5: Make your third layer of mountains.


Step 6: Make a river in the foreground to fill in the space.


Step 7: Draw some other things like trees to fill in the space.


Step 8: Its important for the placement of things to make sense.
In this case, the tree was cut down so theres a tree stump along with the rest of the tree behind it.


Step 9: Continue filling in the foreground until
your satisfied and it doesnt look empty.


Step 10: Added a dragon hatchet.


Step 11: Added a road. Its a cheap trick to fill in space.


Step 12: Added more stumps.


Step 13: Shading the mountains; start with the first row.
(the first ones you drew)


Step 14: Shade a darker part of the mountain closer to the ground.


Step 15: Now shade a lighter part on the top edges of the mountain.
This is where the sunlight would be shining on the most.


Step 16: Shade darker spots some more.


Step 17: Shade the other two rows of mountains.
They should end up looking like this.


Step 18: Time to shade the grass!
-Start with the furthest back ground. (by the mountains)
-Basically just scribble different shades of green around.


Step 19: Make darker scribbles.


Step 20: So now your grass behind the lake will look like this.


Step 21: Now scribble the water like you did with the grass.


Step 22: Darker scribbles.


Step 23: More scribbles.


Step 24: More scribbles! (more shades of blue)


Step 25: More scribbles!! (still more shades of blue)


Step 26: Now do the same scribbling technique for the grass in the foreground.


Step 27: Tree stumps are fun.
Step 28: Scribble vertically like tree bark.
Step 29: Darker scribbles


Step 30: Scribble like you did with the grass and water but on the road now!


Step 31: Make a gradient for the sky going from light to dark as you go higher up.
Using dithering shading techniques helps alot for this sort of thing (the checkered shading)


Step 30: Add little details everywhere you see fit, add a border and your name and you have a sexy new pixel sig!




And there you have it. Now this may not be the greatest way to pixel but it is in my opinion the easiest not to mention the way I learned how at first   . Feel free to post your work on this thread and ill help you with any problems you may have!


Goodluck pixeling!
Cowboy14

[Tim]

I love it. I've always loved doing Pixel Art but I've never been good with the blending.  

[Cacmypants]

That's an interesting method, I may have to borrow from it to make my game backgrounds. I was wondering though, wouldn't people need a general feel for what they're pixelling before they just 'scribble' for detail? I know I would have to be very careful if I tried.

[Nash]

I wouldnt say scribbling grass is hard. The water is trickier but still not super difficult. Id say shading only gets hard when you do people and inside rooms. As for landscapes its alot like painting, just blobs. thanks guys for commenting so quickly

[Cacmypants]

cowboy14, on 02 May 2011 - 02:56 AM, said:

I wouldnt say scribbling grass is hard. The water is trickier but still not super difficult. Id say shading only gets hard when you do people and inside rooms. As for landscapes its alot like painting, just blobs. thanks guys for commenting so quickly

Hm, you're right, it is similar to painting. I did also notice that the water in your sig is quite nice, have you ever tried to animate running water? I imagine that would be tedious.

[Nash]

I animated lava a long time ago but it looked terrible and i scrapped it. An animated waterfall would be kind of nice though might try it!

[K4ylan]

Thanks, looks simple, but the end product looks so hard

Are you just using MS Paint?

[Nash]

Yeah I like pixeling in Paint because its easier (has less bells and whistles to work around) and I can set up 28 custom colors in my little color box

As for hard its not really too difficult if you have the right instruction I was lucky enough to get mentored by Destro and Jopie when I came into it along with occasional tips from dharokslayer and Hiimben. But hopefully things like this will help encourage people to give it a shot as well as dismiss some of the rumors that pixeling is near impossible to do.

[Cacmypants]

It is very useful to have access to layers, though it isn't necessary. If I had to create sprites with only MSpaint I'm pretty sure I'd rage-quit, but that's just me, haha.

[Nash]

Oh yea making sprites like the one in your sig would be suicide in paint lol.

[Cacmypants]

Well it's mainly due to me splitting up each sprite into individual objects (head, torso, left arm, right arm, legs) so that various animations/orderings do not interrupt each other in-game (e.g the hair waving loop should not reset while walking/stopping, it also easily allows the sprite's arms to attack while running)

[K4ylan]

I'll definitely try it out, but it seems like I'll need an hour or two of free time.

[Nash]

Oh wow cac you know how to make pixel style games? Id love to make a small game with you <3 its always been a goal of mine but i only know how to pixel lol. maybe something like the old zelda game (but much much smaller obvs)


and k4ylan yeah itll take an hour or two. be sure to post your progress in a thread in the gallery and ill help you

[tripsis]

Nice tutorial   The one comment I haven't isn't about the tutorial itself, but more about the final image, if that's okay.  The way you've set up your layers of mountains is backwards.  Right now you have the closest mountains (in front) the lightest colour and the ones in back darkest.  But in reality it should be swapped.  The further away things are, the more they blend into the background.  So when you're looking at mountains in the horizon, the further away ones will appear lighter and bluer.  The closer ones have more definition and contrast.

Here's an example (look at the very very top of the image):

http://i.treehugger....ndscape_400.jpg [Image display blocked; image is linked instead.]

Anyway it's not the biggest deal in the world but I thought I'd point it out and maybe it'll help you in the future

Also, @ the above conversation.. I'm currently making a pixel game for a Game Design class project

[Cacmypants]

Well I've never made a complete game per se, but I've recently been formally educated in the sacred art of basic programming concepts, I'm just combining this knowledge with what I've learned from all my past failed attempts. I know for a fact that solo game development is near impossible unless you have boundless hours of free time and are relatively skilled in all areas like music, design, graphics, programming. The software that I use, multimedia fusion 2 (developer), though rather simplified, well accommodates a solo developer and can be quite powerful if used correctly. Things like the platforming presets are generally bogus, I work from the ground up.

Some people tend to ask why not just make 3D model games like most are today, since there are tools for that too. Meh, pixel style is appealing and generally easier to achieve acceptable production quality.

[Nash]

By small game I meant like 1 person going up like 5 floors of a g and castle, defeating a boss and the end lol. As for programing and such i cant help you there, but i can make the pixel graphics and provide some music if you give me some time over the summer to record some stuff

@Tripsis; yeah lol ive done it both ways, in more realistic pixels i like to do it the way your saying but in cartoony ones i like to flip it because it looks more fantasy-like.

[Cacmypants]

cowboy14, on 02 May 2011 - 05:01 AM, said:

By small game I meant like 1 person going up like 5 floors of a g and castle, defeating a boss and the end lol. As for programing and such i cant help you there, but i can make the pixel graphics and provide some music if you give me some time over the summer to record some stuff

Small games like that can be amazing if they're given a distinct feel/style and maybe a few twists. It's also better to remain realistic about what you can achieve without a massive development team, the bigger visions fall much harder on your psyche when they fail. Thanks for offering the help, but I generally prefer not to place burdens on people other than myself.

[My_Eggs]

Nice guide cowboy.  Do you plan on making a guide on how to draw people?  That's where I struggle usually when making pixel sigs.

[Cacmypants]

My_Eggs, on 02 May 2011 - 05:23 AM, said:

Nice guide cowboy.  Do you plan on making a guide on how to draw people?  That's where I struggle usually when making pixel sigs.

To pixel-art people you really have to start with knowing all the general sketching basics like proportions, natural postures etc; it carries over. here's a few easy proportion rules to remember off the top of my head:

Body:

- The entire body length should be at least 6 heads down
- 2 heads down is approx. where the chest should be
- 3 heads down is about where the legs start
- The legs should at least be the same length as the torso (from the stomach) + head
- Hands are generally the size of the face
- Feet are the approx. length of the forearms, go a bit shorter if needed.
- Arm length usually reaches from just above the knees with extended finger-tips, can go shorter, but it's better to have arms looking a bit too long than a bit too short.
- Bicep muscles usually end at around the same point the ribs are furthest out a bit below the chest.
- Male torsos have a solid/bean shape with broad shoulders, female torsos have an hour-glass shape that is a bit wider at the start of the legs (pay attention to this, lol, it's easy to make female character look male)
- Also, try to limit the size of breasts, they might end up amazingly unrealistic, if you really want to draw them right, you have properly observe naked models, its the only way  

Face:

- Eyes are half way down, with a single eye-width between and half eye-widths to the sides
- The top of the ears should roughly match the level of the brow
- The mouth should extend far enough so that the corners reach about the same distance as the center of each eye (can be smaller though)
- The nose is the most flexible part of the face, but it's also a feature that makes or breaks. Although, as long as the rest of the face matches, most nose shapes can work.

Sorry if you already knew all of that, heh.

[My_Eggs]

Cacmypants, on 02 May 2011 - 05:44 AM, said:

My_Eggs, on 02 May 2011 - 05:23 AM, said:

Nice guide cowboy.  Do you plan on making a guide on how to draw people?  That's where I struggle usually when making pixel sigs.

To pixel-art people you really have to start with knowing all the general sketching basics like proportions, natural postures etc; it carries over. here's a few easy proportion rules to remember off the top of my head:

Body:

- The entire body length should be at least 6 heads down
- 2 heads down is approx. where the chest should be
- 3 heads down is about where the legs start
- The legs should at least be the same length as the torso (from the stomach) + head
- Hands are generally the size of the face
- Feet are the approx. length of the forearms, go a bit shorter if needed.
- Arm length usually reaches from just above the knees with extended finger-tips, can go shorter, but it's better to have arms looking a bit too long than a bit too short.
- Bicep muscles usually end at around the same point the ribs are furthest out a bit below the chest.
- Male torsos have a solid/bean shape with broad shoulders, female torsos have an hour-glass shape that is a bit wider at the start of the legs (pay attention to this, lol, it's easy to make female character look male)
- Also, try to limit the size of breasts, they might end up amazingly unrealistic, if you really want to draw them right, you have properly observe naked models, its the only way  

Face:

- Eyes are half way down, with a single eye-width between and half eye-widths to the sides
- The top of the ears should roughly match the level of the brow
- The mouth should extend far enough so that the corners reach about the same distance as the center of each eye (can be smaller though)
- The nose is the most flexible part of the face, but it's also a feature that makes or breaks. Although, as long as the rest of the face matches, most nose shapes can work.

Sorry if you already knew all of that, heh.

Yeah, I've been taught a lot of that stuff in drawing classes and what not in school, however it's nice to see it all in one place where I can look back on it while drawing since I have forgotten quite a bit of it.  Thanks for the tips.

And by properly observe naked models, you mean I shouldn't be distracted by doing other "things" while looking at them, right?