I'm a firm believer in having references, and spriting really is shrinking down a larger image to make a smaller one, and this is probably one of the easiest ways to make hair that actually looks good with minimal talent. I work with Photoshop 7.0 for this. I dunno, I may do a MSPaint Tutorial later, but I really like working with VX sprites in Photoshop.
When preparing... I've taken to adding an addition 3 pixels of height to all my sprites lately just for room for crazy hair or hats and things. I also find an additional 3 pixels nice on the sides for hair like I did for Miku, but I don't always use it.Using Photoshop
This is the location of the Pencil tool on Photoshop 7.0, it shares a space with the Brush Tool. The Gradient and Paint Bucket tools also share a space, as do many other tools with similar functions.
One of the reasons I didn't use Photoshop for spriting for the longest time is that "Anti-Aliasing" is the default on Photoshop selection tools. This means it selects more than you tell it to in order to offer a more gradual transition, so it rings itself with the surrounding colors with a transparency. This is not something you want in Spriting! When Spriting and using the selection or paint bucket tools, make sure Anti-Aliasing is off (not checked)! Also Note the Tolerance, It's actually better to have this at 1 so that it will literally pick up only 1 color at a time. If you want to do an area of color as a different color though, it's nice to up the tolerance so that you can select all shades of the color at once.Front View
First off, select your bases. I personally find sprite portraits to be the easiest to work with because they already follow all of the principles of lighting and color that you'll be using on the hair anyway. Anime or comic artwork would be a close second with real life images bringing up the rear in ease of conversion.
This step can be skipped, but I find it's easier to clear unnecessary details in order to get an idea of things better. Also it's very necessary if the original image is not at the same angle as the sprite you're putting it on. Then it will require you to make a bit of a collage and organize the pieces over the base appropriately
See here I've shrunk and placed it over the sprite and the edges are all blurry? Duplicate the layers and merge them until that's solid. That can also be skipped but I find it helpful.
Next step is to form your outline and choose your palette. Normally I would do this with Brown like the original hair, but I went Blue in order to make the work show up better. When making a palette I tend to follow a bit of a rule in differentiating colors. Lighten or darken each shade by 15-30 points of brightness occasionally adjusting the contrast some and you will have a decent color range. If the image source is older and has less colors than you're using or a different range than you want, take the basic colors and lighten or darken as you see fit. When you have the colors you form the basic outline of what you want with the hair.
Once you have the outline you start filling in the colors using the original image and the shrunken example underneath as a guideline. It doesn't need to be exactly the same from shrunken pixels but it's nice having a reference to work from.
Finally... Hair moves. You actually only need one frame to have the hair move unless it's really long and streaming down the back or in a ponytail. All you really need to do is select some of the hair and shift it over a pixel and then clean up any little bits. You need to change a few pixels in the main body of the hair to denote the movement to so it seems a bit more natural.
There's the first part of the Tutorial, Front Face. I'll continue on to make the side facing tutorial later.Side View
I apologize for lack of screenshots here, Photoshop crashed as I was saving them.
For continuing to do the sideview of hair I use this method. I take my frontview and I essentially halve it, because the front view is your bangs and on either side of the head essentially you're seeing half of the front view. Part of the trick though, lies in when you have hair protruding from the face. For the view that highlights the hair, it's simple and since the hairstyle isn't even you don't see the same on the other side. It's more a direct copy of the hair from the frontview. But for the OTHER side, obviously it will be showing, so instead of just deleting that half of the hair, I copy it and place that part behind the body I'm working on and move it in closer to the face because of perspective. Then I start cleaning up, deleting any pixels on the hair protrusion that would cover the face when all the layers come together.
Then I touched up the hair shape a bit because it seemed WAY too poofy, so I tucked it in. I also tweaked it for my personal rule of thumb to keep the positioning of the hair on the sideview correspond to the frontview around the eye. Then I proceeded to sprite the back of the hair. I generally give the back of the head outline a 1 pixel birth from the actual sprite head, because hair DOESN'T lay flat against the head. Hair gives the head volume. However, since I was doing a short cut, the bottom outline is RIGHT against the back of the head. For the other side I actually copied, flipped and pasted the first side I did, lined it up on the other side, then cleaned up and filled in the blanks. But I lost the screens of this ;-;
So here you can see that I actually didn't keep the dark outline on the right facing sideview. I cleaned it up and smoothed the hair as if it was pulled back (for real hair like this, it would be using bobby pins because it's otherwise too short. And Bobby pins can actually be hard to see oftentimes :3) Also, once again with the moving hair frame. I didn't make it move much with the protruding hair this time, I could have made it slightly cover the eye, and probably should have, but I decided not to because this was less work
; For the other side I pushed the hair in closer to the face and deleted the line of hair that then covered the face outline. Once again changed just a few pixels to denote the movement of the whole hair protrusion.Back View
Man I hate this one... I think everyone hates this view. It's really hard to do, especially from scratch. Normally I'm just taking some Famitsu or Enterbrain piece of hair and using that to fill out the back but this time I did it from scratch, completely.
First things first. You have to tie in that front view again. Position it properly on the back head then demote it to a layer behind. The back view will have different lines than the front and you don't want them confusing you.
Next step is something I recommend even when doing it completely from scratch. Select out some hair types that are similar to what you want to do and use them as a guideline. By seeing the kind of result you want, it's easier to get to it.
Narrowed down what I wanted to do some more and got to work with an outline and basic fill. I didn't do it in this screenshot yet I think, but see how you can see the protruding hair even in the back view here? It's way too light since the light isn't hitting it, so darken it up by dropping all of those colors a shade on your palette.
So then I proceeded to shade like my sample piece. One of the main things to note is that the back hair of Enterbrain always have an off-center shine pattern going on. So half the head is going to be a lot brighter than the other half. I felt this was "done" at this point, but it urked me. It's kinda like there's a dent in the head because it's not filled out.
So I hammered out the dent, essentially adding a dimension of pixels equivalent to the other side of the head and extended the shine into the new piece of head.
And then of course the other views and once again hair moves, even short hair! The sample I used as reference had a difference of shading so I tried to accomplish the same thing.
I also did a lazy practice here because of the flipped front heads. I left the moving hair frame on the right when I should have kept it in line on the left. It's not a big deal, but it's the way Famitsu runs.Finishing Touch
As requested by Lunarea, here is a demonstration of adding shading to the face once the hair is done. Remember where the shadow is deepest or overlaps with other shadows it should be darker!
But anyway. That's a full head of hair, start to finish. This is my first tutorial so if you have any questions, please feel free to ask!
This post has been edited by Terra-chan: Jul 29 2010, 09:43 PM