Topic: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
|
|
HamsterManNeolithic     total posts: 6750 since: Oct 2005
|
 Jul 21, 07 at 10:37AM
HamsterMan's Spriting tutorial V2 - Currently unfinished
|
I made this thread so people can continue posting pictures of their sprites and/or questions they may have. I will edit this post when I've finished all that I want to add (Currently got the trousers and shirts tutorial done on the new template I use).
The old thread can be found here
As I've said, I'll edit this once the old one is done. I plan on including the following things though:
Spriting shirts Spriting trousers Spriting shoes Spriting gloves Add-ons Animation Expressions
Add-ons will include things like bunny ears, hats, swords and maybe extra things like long-belts (Hard to describe).
Animation will cover movement of loose-fitting items of clothing and long hair.
Expressions will cover facial expressions, such as frowning, crying, sighing and perhaps other stuff like laughing and winking.
Edit: If you want to suggest something else as well, do so now whilst I'm in the right frame of mind for it 
STILL ADDING/WRITING THE TUTORIAL ALONG WITH UPLOADING IMAGES.
Contents
- Introduction
- Basic spriting knowledge
- Useful programs
- Templates
- Spriting shirts
- Spriting trousers
- Spriting hair
- Spriting shoes
- Spriting gloves
- Add-ons
- Animation
- Expressions
Introduction
This is HamsterMan's spriting tutorial (Mk II). I've decided to completely replace the old one with this one, as I feel my style of spriting and my techniques have changed quite a bit. In this tutorial, I plan on teaching the basics of spriting, as well as providing some more help for those who're slightly more advanced (Such as including animation and expressions in this tutorial). Hopefully, this tutorial proves just as helpful as the previous one did, and that some of you enjoy the spriting process as much as I have.
Basic spriting knowledge
Before you start, you should have a full understanding on some of the basic principles of spriting, shading, colour values and how all of these are used to add texture, tone and an overall "Realistic" feel to your sprites.
Most photo-editing software (I use GraphicsGale in this tutorial) allow you to change the colour being used by using a "Values" system. This uses the three primary colours: Red, Green and Blue. You'll often hear these refered to as the 'RGB scale'. These values vary between 0-255. 0 meaning none of the colour is added and 255 means a lot of the colour is added.
If you add different amounts of these primary colours, you can come up with different shades or variations of new colours. For instance, having R=255, B=255 and G=0, you'll make a purple colour. Having R=0, B=255 and G=255, you'll make a yellow colour. Just experiment with these for a while so you know what you're making (I'll be adding a few tips on how to make colours later on in the tutorial).
Useful programs
I this tutorial, I'll be using a program called GraphicsGale. You can use any photo-editing software which you feel comfortable with - even something such as Microsoft Paint will do.
- GraphicsGale
Templates
In this tutorial, I'll be using the Tyke2 template, as it fits nicely with the RTP - although that doesn't mean you can't practise on any other template (Although I do recommend using something of a similar size, and nothing too small like the Tyke1 template or the Breeze template).
Spriting shirts
Finally, the part you've all been looking for! The start of the actual spriting!
I'll start off with shirts.
- First of all, think about what colour exactly you'd like your shirt to be. I'm going to use a nice and simple blue for my character, although you can use whatever you want.
Firstly, find a nice shade of the colour you're using. I've found a sky-ish blue which has the RGB values of: R=0, G=140 and B=220. Draw this line next to your sprite and not on it. This is just so that you can set up a 'shade preview', so you can see what it'll be like.
- Then, add 10 to each value, so that the colour gets slightly lighter. Add this colour next to your line. Repeat this process once more, resulting in you having 3 lines as seen in the picture below.
Then, do the same again, only this time decreasing it by 10. Do this twice.
Finally, reduce the darkest shade's values by 50 on each colour (If possible) to give you a really dark shade. This will be your outline.

- Next, take your darkest colour and shade around the outside of where your shirt will be. If there's any major details on the shirt (Such as the pockets, in my example), mark those out too.

- Next, I want you to take the colour which you started with and fill in everything inside the outline you just did. No, I haven't gone mad. This will help you visualise where the shading needs to be put.

- Now, take your second darkest colour and add a little shading down the bottom of the shirt and a little around the arms. Remember you can keep zooming in and out to see how it looks at any point during the tutorial. Add a little shading to the arms aswell, but only in the 'corners', where you see the pixels move outwards.

- Take the third darkest shade and elaborate on the previous shading you did. This gives more emphasis on the areas you just shaded, and in this case, makes the arms look more rounded.

- Finally, take your two lightest colours and add them where you deem neccessary. It won't make much difference on a smaller template, although on a larger one (Such as the HK series), it can make a lot of difference.

And this is your finished product:
Spriting Trousers
- Spriting trousers follows the same principles as the shirts. You start off by taking your colour tones and follow the same steps as you did in the previous tutorial.
The only thing you should notice now, is that on trousers you will have to make "Folds" to make them look baggier.
To do this, all you have to do is take your lightest colour where you want the fold to be. Above and below it, place the next shade down to make it look like the fold is "protruding" from the character's legs.
Hair
- Start by making the outline of the hair in the darkest shade of the colour you're using.

- Fill in the entire block of hair with the next shade up.

- Make a 'zig-zag' with the next shade up, and fill in the rest of the hair, leaving the top 'zig-zag'.

- With the next shade up, create another 'zig-zag' again, don't forget to leave the lest on your created.

- With the next shade up, fill in the bottom parts of the hair, but don't make it a straight line, it doesn't look natural.

- The finished product:

The reason you use so many different shades, is because it makes it look more natural when it's finished. When your hair grows, it changes colour slightly, and when it does, it does so in a 'zig-zag' sort of fashion. Hence the zig-zags.
Spriting shoes
As of yet in my spriting tutorials, I've never told you how to sprite shoes. This is a pretty confusing thing for me to explain, because shoes are one of the things in spriting which require you to do as little work as possible, but if done incorrectly can cause your sprite to look like a complete mess. However, I'll try and explain it as best as I can.
- First things first: Shoes are generally pretty detailed in real life. This does not have to be the case in spriting. You have such a small area to work on, so shading isn't really an option. Just try and concentrate on getting the shape right (It's best just to follow the outline of the foot) and the colour scheme matching. As you can see on my example, I've gone for a modern-style of shoe.
If you look at it closely, you can see I've only used 3, perhaps 4 shades overall on the trainer. At the same time, I've split up two shades (The two blues) with two shades of white. This gives the image of there being a 'tongue' of the shoe present, and makes it look more realistic; whilst using as little detail as possible.

- Second thing you must remember (And it's pretty much just reiterating what I said before), detail isn't everything. Try and keep it basic. As you can see now, something as basic as this:

Can be very effective when applied to the right sprite:
Spriting gloves
Now, this one is also a tough one to write up; simply because I didn't know how to make it 'interesting' enough for you actually want to pay attention to it. So, as I was pondering at my desk, listening to Billy Jean, I thought I'd make a Michael Jackson sprite (With his silver glove) as an example.
- The first thing you need to remember when making gloves for your sprite, is that a gloves covers the hand perfectly. It takes the same shape, form, image, whatever you want to call it. Thus, in a literal sense a glove can be as simple as a 'recoloured hand'. For instance, take a look at the glove I've done for Mini Michael:

As you can see, they are both very similar in shading/tone and pixel placement. The only thing different is the colour of which they are. Another thing to know about this part of the tutorial is that, just like the shoes, less is more. The less detail you put on the gloves, the better they're going to look when you zoom out and view your sprite as a whole.
The finished product:
Coming up next.....: Add-ons!
This message was edited by HamsterMan on Sep 02 2007.
-------------------
|
quote quick quote edit quick edit del report
|
|
Members, log in or register to remove these ads.
|
Rune RipperHooked on Neo   since: Dec 2006
|
 Jul 21, 07 at 10:39AM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
Congrats on thread number 2 Hammy, I'm glad to hear you're updating the Tutorial. 
-------------------
|
quote quick quote edit quick edit del report
|
jaydenfox
|
 Jul 21, 07 at 02:42PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
dang! I was hoping I could make the first post! oh well... should I be using that template? I'm using the one from your other thread... will it work the same way, and which is better? oh yeah! also, I was wondering if you could answer an unanswered question from the last thread; how do you make your own template?
-------------------
 If you wish to know why I'm immortal, PM me! I shall bestow upon you the secrets of life!
|
quote quick quote edit quick edit del report
|
HamsterManNeolithic     total posts: 6750 since: Oct 2005
|
 Jul 21, 07 at 02:44PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
Spriting is spriting. It works on whatever template you use. I'd say this template is better, because of the size, although you can get a lot more detail on the HK templates.
-------------------
|
quote quick quote edit quick edit del report
|
Naor313Give me your tacoforum junky     total posts: 77 since: Jun 2007
|
 Jul 21, 07 at 02:53PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
------------------- http://www.freewebs.com/nadan-net/index.htm
Download mmorpg and play http://rapidshare.com/files/44418097/Client_1.4.3.zip.html
|
quote quick quote edit quick edit del report
|
jaydenfox
|
 Jul 21, 07 at 03:02PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
that's one thing I think everybody can agree on. hammy man has the best tutorial for spriting ever made (IMO)!! you're going to upload you hat, glove, and shoe tut, right? and maybe make an armor tut? I know you said you'd make that time and time again in you're other tut, but you never got around to it (dont I know... It took me ages to do my first one, and it was only my latest one that I figured out how you make them show up ON the forum, not as a link... gotta save it as JPG). Also, Hamsterman, do you know if I can use the sprites I make in RMXP? I think you can, and it's just a matter of saving and uploading as .png, but are they the right size (the ones from your other tut)?
-------------------
 If you wish to know why I'm immortal, PM me! I shall bestow upon you the secrets of life!
|
quote quick quote edit quick edit del report
|
jaydenfox
|
 Jul 21, 07 at 04:13PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
yo! i'm asking a favor of you, hamsterman, on behalf of my friend who's helping me out with spriting. can you post up a tut on how to make skirts? he's trying to sprite something to hard for me (he just started, yet he's better than me(He's always had a knack for this stuff)), and He cant figure out how to make skirts well.
-------------------
 If you wish to know why I'm immortal, PM me! I shall bestow upon you the secrets of life!
|
quote quick quote edit quick edit del report
|
jaydenfox
|
 Jul 21, 07 at 07:11PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
ummm, I dont meen to sound picky or buggy, but can you also put up a tut for capes? capes make everyone look cool!
-------------------
 If you wish to know why I'm immortal, PM me! I shall bestow upon you the secrets of life!
|
quote quick quote edit quick edit del report
|
DosuDisasterNeo-newbie   total posts: 5 since: Jul 2007
|
 Jul 21, 07 at 08:22PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
 Here's my first one. I'm jayden's bud, so I learned skirts.
|
quote quick quote edit quick edit del report
|
BunnyburnI teabagged your drumsetforum raider     total posts: 2586 since: Jun 2007
|
 Jul 21, 07 at 11:32PM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
I took a crack at the same sprite DosuDisaster did. It's my first one, and I used your tutorial.

-------------------
The phrase to cut these lips...
...I love you.
|
quote quick quote edit quick edit del report
|
HamsterManNeolithic     total posts: 6750 since: Oct 2005
|
 Jul 22, 07 at 02:19AM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
Not enough shading on your attempt, Bunny. You have to remember not to use really dark colours because using different tones has next to no effect on the appearance of the shading.
Jayden, the problem with armour is that you have to think about texture aswell as form and shading. I'll try and make some basic things, but most people want to be as extravagant as they can with their "Bad guy's" armour.
Yes, I'm also including shoes, gloves and hats on this one. I'll also make a cape tutorial because I think that it could be pretty helpful, although skirts aren't exactly the hardest thing in the world to complete But I do see where people could have problems, so I'll make one anyway. I plan on having hat, shoes and gloves up by the end of today.
Edit: To answer your question, Jayden, the templates from the previous tutorial will work in RMXP, but they're too big for the RTP tilesets. That is why in this tutorial, I've decided to use a much smaller template, which also fits in the with RTP. But, due to some requests, I'm going to make another tutorial (Along with this one) which exmplains how you can sprite on the Breeze Template and the RTP template.
-------------------
|
quote quick quote edit quick edit del report
|
jaydenfox
|
 Jul 22, 07 at 03:55AM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
Hammy: that's great. if there's an easy way to sprite on the actual rtp template, then I'd love that!
BB: if you look at my thread, "can somebody find/make sprites/battlers for this?", the picture there is what we're basing it off of. for us, the hair is way off, but we're still amatures. it's his first sprite, and I haven't done an intimidating amount either. if people are wondering about the little black thing on her cheek, then that's a tattoo that you can't see all of because it only on her left cheek.
edit\\ BB, IS my picture what you based her off of? because that's awful good, cept for shading. edit\\ BB again, just saw your post on my thread. you DID use my picture. maybe me and dosu could fix it up a bit?
This message was edited by jaydenfox on Jul 22 2007.
-------------------
 If you wish to know why I'm immortal, PM me! I shall bestow upon you the secrets of life!
|
quote quick quote edit quick edit del report
|
SaeonTheir Name liveth forever mores-e-e-k-e-r   since: Jul 2005
|
 Jul 22, 07 at 05:31AM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
Congratz Hamster on yet another well done tutorial ^^ i've always liked people works with the second Tyke template.
Although it's not the Tyke template it's a similar size (maybe slightly too big for the RTP but i never liked the RTP anyway) Your tutorial helped alot 

Well i never said Spriting waz my strong point i tried to do a Robe on this guy as i've never seen it done before and well you know ^^
@Jaydenfox : Thats a gd first attempt however like hamster says it needs much more shading and the colours don't compliment each other at all, try a lighter purple or even Red. Otherwise nice try 7/10
------------------- "Look how the Sun Shines on the Green Fields of France; theres no Gas, Wire or Guns firing now but here in this Graveyard its still no-mans-land.." -Their Courage remains in the Fields that they fell.
|
quote quick quote edit quick edit del report
|
DosuDisasterNeo-newbie   total posts: 5 since: Jul 2007
|
 Jul 22, 07 at 07:04AM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
Ummm, I think your thinking of me. I'm the one who made the one sprite.
------------------- So, you would like it if I stopped stabbing out your eyes? Because I really wish it could be that simple.
|
quote quick quote edit quick edit del report
|
SaeonTheir Name liveth forever mores-e-e-k-e-r   since: Jul 2005
|
 Jul 22, 07 at 07:14AM
re: HamsterMan's Spriting tutorial V2 - Currently unfinished
|
I am indeed but i'm stupid like that ^^ i'm going mad through age and didn't notice it.
Hmm your is gd however probz 8/10 , the only thing i would say is that it seems very buzy and the dark colours prevent certain bits standing out.
P.S. Does anyone know how to do Helmits i'm having extorcionate amounts of trouble adding one to my sprite.
------------------- "Look how the Sun Shines on the Green Fields of France; theres no Gas, Wire or Guns firing now but here in this Graveyard its still no-mans-land.." -Their Courage remains in the Fields that they fell.
|
quote quick quote edit quick edit del report
|
| [All dates in (PST) time] | Threads List « Next Newest Next Oldest » |