Announcement

[Terra-chan]

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

[Lunara]

Well done, Terra! This is an excellent tutorial. Definitely the next best thing to doing it all from scratch. ;3

I use MS Paint for most of my spritework, but this is definitely something I'll keep in mind. I always love finding new things to do with Photoshop.

[Rmvx mastah]

yay next set of tuts
lets see who gets the most veiws and comments
=.=its on
LOL
stole my title

This post has been edited by Rmvx mastah: Jul 28 2010, 02:25 PM

[Terra-chan]

I don't know. I guess my Tutorial may be a bit too advanced... does anyone have any questions? I'd be happy to answer.

[Peva]

This is impressive...I'm considering taking up spriting if people make clothing tutorials.

[Lunarea]

This is a very interesting technique. I've used a reference before, but I never thought of resizing the reference itself. I may have to experiment a little with this.

There's only one thing I think your tutorial would benefit from, and that's to shade the face and hairline at the end. A lot of people forget to shade the face and hairline and it's one of those little things that adds a lot in terms of volume and dimension.

[Terra-chan]

This is true... It's easy to forget because most templates (which is what I generally do ultimately) leave skin out in order to be put on any skin form. Although my next tutorial requires it as it's for "revealing clothes" I still have no idea how to notate it since clothes requires more instinct and less thought for me than hair... Maybe also because I'm bad at drawing clothes (don't have much trouble with hair)

[Cyl]

Bookmarked.

In Paint.NET, you can use the selection tool to get the hair and snap it in the sprite. It has a 'Smooth' and 'Pixelated' option, depending on what you need. I find that applicable to that step (selecting the hair, pasting it, and resizing it while the Pixelated option is selected).

Really useful tutorial for guys who aren't great in graphics, like me.

[Terra-chan]

If the pixelated option is like "Nearest Neighbour" in Photoshop I actually prefer it being blurred smooth, because pixelated actually loses a lot of detail with the smallest twitch of a pixel in size. It still requires a lot of work to clean up and you lose the cleanup detail.

[fauxonym7]

nice hair tutorial. ;-;

finally.

now the problem would be finding the reference. o:

*hugs terra*

This post has been edited by fauxonym7: Jul 29 2010, 06:59 AM

[RyouKachi]

That's a very interesting technique you have there, if you continue making some more then RM.net shall have a few more spriters. I know I've learnt a lot from this, cheers .

[Terra-chan]

It's not the only way I sprite, but I figured it was the best technique to teach new users with... I don't consider myself a good teacher ; I tried to explain things to my classmates in school and they couldn't understand my explanations...

[Celianna]

I think it would be a good idea to mention where to locate the pencil tool. Many beginners don't even realize they can sprite with Photoshop, let alone find the pencil tool

But high five for using Photoshop 7.0!

I use the shrinking method as well (among other things). I also sharpen the small hair to get all those pixels to stand out nice and well so that tracing becomes easier. Great tutorial though, I hope this helps beginners start to sprite more themselves.

@fauxonym7: try browsing around on DeviantArt, you're bound to find a ton of anime hairstyles you can use.

[Rmvx mastah]

or search chibi on google

i tried the
shrink a donk thingy and failed
ill stick to my method
i agree paint.net is goodfor cutting the hair out from the rescorce

[Terra-chan]

Updated with Lunara and Celianna's suggested additions! Thank you for that! And I added a little PS know how of my own for one of the things that made me not use photoshop for a long time.

@RMVX_mastah: Well not every method is for everyone. I'm sure that you could still take some benefit from at least having a picture reference for the effect you want on the hair

[Lunara]

Erm, Terra, I'm not the one who made a suggestion. Lunarea mentioned the shading, not me. d:

[Terra-chan]

Darn it you only have 1 letter difference between the two of you, that's why it's confusing! XD

[fauxonym7]

I think it would be a good idea to mention where to locate the pencil tool. Many beginners don't even realize they can sprite with Photoshop, let alone find the pencil tool

But high five for using Photoshop 7.0!

I use the shrinking method as well (among other things). I also sharpen the small hair to get all those pixels to stand out nice and well so that tracing becomes easier. Great tutorial though, I hope this helps beginners start to sprite more themselves.

@fauxonym7: try browsing around on DeviantArt, you're bound to find a ton of anime hairstyles you can use.

oh yeah, dA.

[MagitekElite]

You have no idea how this will help me sprite hair better! I mean, it really, really helped me! I really sucked before, but this provided some insight on the matter where I couldn't do it right.

Thanks so much for this!