Jump to content

Welcome to Rune Tips, the first ever RuneScape help site. We aim to offer skill guides, quest guides, maps, calculators, informative databases, tips, and much more to help you get the most from the Massive Online Adventure Game, RuneScape, by Jagex Ltd © 2009.

Report Ad

Welcome to Forum.Tip.It
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!
Photo

~Cowboy14's Pixel Art Tutorial~


  • Please log in to reply
55 replies to this topic

#1
Nash
[ Display Name History ]

Nash

    Scorpion Pit

  • Members
  • 674 posts
  • Gender:Not Telling
  • Location:Great Gig in the Sky
  • Joined:31 July 2007
  • RuneScape Status:None
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
Posted Image

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

Step 3: Make your first layer of mountains.
Posted Image

Step 4: Make your second layer of mountains.
Posted Image

Step 5: Make your third layer of mountains.
Posted Image

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

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

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.
Posted Image

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

Step 10: Added a dragon hatchet.
Posted Image

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

Step 12: Added more stumps.
Posted Image

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

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

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.
Posted Image

Step 16: Shade darker spots some more.
Posted Image

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

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

Step 19: Make darker scribbles.
Posted Image

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

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

Step 22: Darker scribbles.
Posted Image

Step 23: More scribbles.
Posted Image

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

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

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

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

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

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

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



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 :thumbsup: . Feel free to post your work on this thread and ill help you with any problems you may have!


Goodluck pixeling!
Cowboy14

Posted Image

Pixel Signature Made By Me.

Pixel Art Tutorial * Pixel Gallery * My Free Pixel Sigs Shop


#2
Tim
[ Display Name History ]

Tim

    Eternal Session of Sound

  • Members
  • 8,668 posts
  • Gender:Male
  • Location:Australia
  • Joined:12 November 2006
  • RuneScape Status:Semi-Retired
  • RSN:Feystone
I love it. I've always loved doing Pixel Art but I've never been good with the blending. :thumbup:

7fKAC5R.png

You should totally read my personal blog:

A Series of Various Events

Most Recent Entry - Spring's A-Coming, My Future Isn't.

A story of my life, and how it makes you feel better about yourself. Also follow it. <3

99 Farming - 11th June 2014


#3
Cacmypants
[ Display Name History ]

Cacmypants

    Scorpion Pit

  • Members
  • 744 posts
  • Gender:Male
  • Location:the universe
  • Joined:14 September 2008
  • RuneScape Status:P2P
  • RSN:5th Density
  • RSN2:Precise Nova
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.

#4
Nash
[ Display Name History ]

Nash

    Scorpion Pit

  • Members
  • 674 posts
  • Gender:Not Telling
  • Location:Great Gig in the Sky
  • Joined:31 July 2007
  • RuneScape Status:None
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 :)

Posted Image

Pixel Signature Made By Me.

Pixel Art Tutorial * Pixel Gallery * My Free Pixel Sigs Shop


#5
Cacmypants
[ Display Name History ]

Cacmypants

    Scorpion Pit

  • Members
  • 744 posts
  • Gender:Male
  • Location:the universe
  • Joined:14 September 2008
  • RuneScape Status:P2P
  • RSN:5th Density
  • RSN2:Precise Nova

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.

#6
Nash
[ Display Name History ]

Nash

    Scorpion Pit

  • Members
  • 674 posts
  • Gender:Not Telling
  • Location:Great Gig in the Sky
  • Joined:31 July 2007
  • RuneScape Status:None
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!

Posted Image

Pixel Signature Made By Me.

Pixel Art Tutorial * Pixel Gallery * My Free Pixel Sigs Shop


#7
K4ylan
[ Display Name History ]

K4ylan

    Moss Giant Whipper

  • Members
  • 2,924 posts
  • Gender:Male
  • Location:California
  • Joined:27 December 2009
  • RuneScape Status:F2P
  • RSN:Harpy Priest
  • Clan:Harpies
Thanks, looks simple, but the end product looks so hard Posted Image

Are you just using MS Paint?

#8
Nash
[ Display Name History ]

Nash

    Scorpion Pit

  • Members
  • 674 posts
  • Gender:Not Telling
  • Location:Great Gig in the Sky
  • Joined:31 July 2007
  • RuneScape Status:None
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.

Posted Image

Pixel Signature Made By Me.

Pixel Art Tutorial * Pixel Gallery * My Free Pixel Sigs Shop


#9
Cacmypants
[ Display Name History ]

Cacmypants

    Scorpion Pit

  • Members
  • 744 posts
  • Gender:Male
  • Location:the universe
  • Joined:14 September 2008
  • RuneScape Status:P2P
  • RSN:5th Density
  • RSN2:Precise Nova
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.

#10
Nash
[ Display Name History ]

Nash

    Scorpion Pit

  • Members
  • 674 posts
  • Gender:Not Telling
  • Location:Great Gig in the Sky
  • Joined:31 July 2007
  • RuneScape Status:None
Oh yea making sprites like the one in your sig would be suicide in paint lol.

Posted Image

Pixel Signature Made By Me.

Pixel Art Tutorial * Pixel Gallery * My Free Pixel Sigs Shop


#11
Cacmypants
[ Display Name History ]

Cacmypants

    Scorpion Pit

  • Members
  • 744 posts
  • Gender:Male
  • Location:the universe
  • Joined:14 September 2008
  • RuneScape Status:P2P
  • RSN:5th Density
  • RSN2:Precise Nova
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)

#12
K4ylan
[ Display Name History ]

K4ylan

    Moss Giant Whipper

  • Members
  • 2,924 posts
  • Gender:Male
  • Location:California
  • Joined:27 December 2009
  • RuneScape Status:F2P
  • RSN:Harpy Priest
  • Clan:Harpies
I'll definitely try it out, but it seems like I'll need an hour or two of free time.

#13
Nash
[ Display Name History ]

Nash

    Scorpion Pit

  • Members
  • 674 posts
  • Gender:Not Telling
  • Location:Great Gig in the Sky
  • Joined:31 July 2007
  • RuneScape Status:None
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 :)

Posted Image

Pixel Signature Made By Me.

Pixel Art Tutorial * Pixel Gallery * My Free Pixel Sigs Shop


#14
tripsis
[ Display Name History ]

tripsis

    The Fuzz

  • Administrators
  • 21,529 posts
  • Gender:Female
  • Location:England, UK
  • Joined:29 October 2005
  • RuneScape Status:P2P
  • RSN: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):

Posted Image

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 :XD:
Posted Image

Posted Image
- 99 fletching | 99 thieving | 99 construction | 99 herblore | 99 smithing | 99 woodcutting -
- 99 runecrafting - 99 prayer - 125 combat - 95 farming -

- Blog - DeviantART - Book Reviews & Blog

#15
Cacmypants
[ Display Name History ]

Cacmypants

    Scorpion Pit

  • Members
  • 744 posts
  • Gender:Male
  • Location:the universe
  • Joined:14 September 2008
  • RuneScape Status:P2P
  • RSN:5th Density
  • RSN2:Precise Nova
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.

#16
Nash
[ Display Name History ]

Nash

    Scorpion Pit

  • Members
  • 674 posts
  • Gender:Not Telling
  • Location:Great Gig in the Sky
  • Joined:31 July 2007
  • RuneScape Status:None
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.

Posted Image

Pixel Signature Made By Me.

Pixel Art Tutorial * Pixel Gallery * My Free Pixel Sigs Shop


#17
Cacmypants
[ Display Name History ]

Cacmypants

    Scorpion Pit

  • Members
  • 744 posts
  • Gender:Male
  • Location:the universe
  • Joined:14 September 2008
  • RuneScape Status:P2P
  • RSN:5th Density
  • RSN2:Precise Nova

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.

#18
My_Eggs
[ Display Name History ]

My_Eggs

    Ice Giant Melter

  • Members
  • 3,514 posts
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.
99 HP, Attack, Strength, Defence, Summoning, Ranged, Herblore, Prayer, Agility, Magic, Slayer, Fletching, Fishing, Woodcutting, Mining, and Thieving.

Jagex'd out of my untrimmed hp cape on 6/14/2011.

#19
Cacmypants
[ Display Name History ]

Cacmypants

    Scorpion Pit

  • Members
  • 744 posts
  • Gender:Male
  • Location:the universe
  • Joined:14 September 2008
  • RuneScape Status:P2P
  • RSN:5th Density
  • RSN2:Precise Nova

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 :wink:

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.

#20
My_Eggs
[ Display Name History ]

My_Eggs

    Ice Giant Melter

  • Members
  • 3,514 posts


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 :wink:

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. :thumbup:

And by properly observe naked models, you mean I shouldn't be distracted by doing other "things" while looking at them, right? :lol:
99 HP, Attack, Strength, Defence, Summoning, Ranged, Herblore, Prayer, Agility, Magic, Slayer, Fletching, Fishing, Woodcutting, Mining, and Thieving.

Jagex'd out of my untrimmed hp cape on 6/14/2011.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users