Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Hydrolic's Shading Method

Danny

Sponsor

My Shading Method

I've wanted to do this for a while, so I'm just going to do it now. This will generally be a straight forward tutorial, as its only my first. Each time I will try to do soemthing different. This tutorial will take you through spriting on the first frame the the 'Geredreth Advance' by Despain, and how I sprite on it, in my own, loose method. So are you ready? Lets begin.

Now the sprite I will make for this will be fairly simple, so I have enough room to demonstrate how I shade. My shading method was personally developed, by looking at other peoples sprites, to be honest mainly despains on his Gerdreth Full.

Step One:
Get a pallette, when I'im spritng on the gerdreth advance I use the pre-made pallette for the template. Then when you have your pallette open up 'Paint'. Here's how I lay it all out:
Click!

Step Two:
Now we start deisgning what our character's clothes will look like, for this it shall be a T-Shirt. First things first, is to design the frame. If you're unsure about doing this use the outline of the template as a guide. Try to mess around until you get something you like, then when your happy, fill the outlined area with the middle tone of your chosen pallette like so:
Click!
Don't worry too mcuh about how the deisgn of your shirt looks, aslong as your happy with it, thats all that matters, because the shading is what will really make it look good.

Reapeat step 2 for the trousers and shoes, as well any other pieces of clothing you wish to add such as, gloves, armbands, and anything you can think of really that you believe, your sprite can benifit from.
Just try to be creative, try out different shapes on your sprite and make them look liek something, mess around with it until you have a deisgn you're happy with, heres what I have now:
Clicky!
As you can see I edited the shirt a little at the bottom and added a line in the middle(which I can create a zip, or buttoned line with.), added shooes and an arm sleeve.

Up to this stage I hope you've had fun just playing around with the deisgn of your character, because the design stage can be the most improtant, its a time to get to know your character, beofre the real work comes.

Step Three:
Trousers
Now it is time to begin shading, as we should have our final design. I will begin by shading the trousers.
Now what I do is take my next darkest colour after the outline colour and shade close to the lines, to create creases. I find this hard to explain so I'll show what I mean in this picture:
Clickly!
You'll see I made the area white, if you didn't do that please do so now.
Repeat this part of the step, but with the next darkest colour, and try to go around the creases you just made as best as you can. I aplogize if I don't explain this well I'll try to show it as best as I can with the pictures:
Clicky!

Now fill all that white space with the next darkest colour, simple. If your happy with this, which you might be, you can leave it this way, but what I suggest you do is this. Take your last colour, and create simple and small highlights with it, like so:
Clicky!

Shoes
The shoes are fairly simple to shade. Use the dark colour, place a few pixels at each edge, then fill in gaps with a line, of the next colour. Like so:
Clicky!
Then with your next colour on the pallette, fill in the blank area, then use two pixels of the next colour to give a small shine to the shoes:
Clciky!

Shirt
The thing I always start with when it comes the body is the arms! I shade them in a similar method to the legs, I take the darkest colour shade in the inside, and work my way out with the lighter colours. I won't go into anymore detail than that, as the picture should explain it better than me:
Clicky!

Now we start on the body, take your dark colour, again, and create an outline around the edges with it, you don't have to stick to exactly how I've done this, but it is a method:
Clicky!
Then add small highlights, like this, with your next colour:
Clicky!
Then the rest of the white gap can be filled with your next colour:
Clicky!

Now to make a zip line on the shirt, simply do this:
Clicky!

I hope your pleased with your outcome. This is all that the tutorial will include, I hope you have benifited from it, and I apologize for any part where I havn't explained soemthing very well, if I havn't, or you have a suggestion let me know. Remember this technique can be used on all over frames of your sprite. Thanks for reading and I hope you like my tutorial, and will look forward to further additions from myself.

Coming Soon(Hopefully):
Front View Hair And Shading It
'If I plan anymore tutorials I shall write them here'

Thanks To:
Despain

The Final Product:
http://img411.imageshack.us/img411/5651/donean4.png[/img]
 
Thanks, I really think that helped. And go MS Paint spriters! We need like an MSpaint userbar or badge or something.
 
Yeah, what Kiniko said.

Also, to anyone reading this.
I highly recommend this tutorial as it's the one I use and I think it's easy and gives great results!
 
I'll be posting some results. I've become affectionate towards the Geredreth because of your work. Keep it up!

Aww @ Spelling Error in Shoes Section. "Clciky" lol.

Seeing as how no one else has posted, I'll put my results here.

I'm still a bit rusty when it comes to pixelling but hey:
http://img176.imageshack.us/img176/7905/ricardoll7.png[/img]
Yes, honey, I CAN get you the hook up with Tyrone. Yes, honey I know it's just a meeting. Oh rediculous! Scandalous!
 

Danny

Sponsor

@J: Coming sir! Hair doesn't follow so much as a regualr pattern, I'll see how it goes.

@Paradox: Thanks man, your improving yourself. I like the top, the trousers need some work though, its seems a bit jumbles, mainly cause of lines you have going down them.
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top