Warning: VERY IMAGE-HEAVY!
VENETIA'S IN-DEPTH HK HAIR TUTORIAL
Greetings, this is Ven, your friendly local mod. I've gotten more than a few requests for this, so here it is. I made a very basic hairpiece for an HK, and took screenshots of every step.
If you're reading this, you're probably a little of a novice to pixel art. That's okay. I'm going through every step, and am providing palettes. This will be symmetrical hair--meaning it's the same on the left as it is the right. If you're a novice, that's what I recommend, because it involves the least amount of perspective/editing. However, you're going to need to know atleast the very basics, including how to use your image editing program. I will not help you there.
Note that some diagrams have been shrunk to be more web-friendly, so it may look just a little off.
Let's Begin!
_______________________________________________________________________
http://www.pixelcocktail.com/hosted_ite ... Step52.png[/img]
There it is! Your completed hair in brown!
The next steps are optional, for recoloring. These next parts are PSP9-specific. There may be similar commands in Photoshop or the GIMP, etc, but I don't know what they are, exactly, so you'll need to figure it out. I'm sure the processes are nearly the same, though.
NEW 1-16-08: There is now a GraphicsGale tutorial on palette-swapping here, courtesy of Nphyx. It also requires less steps than the PSP9 version. Please scroll to the very bottom of this post to view that information.
Thank you for reading my tutorial. I hope it helped you in your pixelling endeavors. Be on the lookout for an HK Construction Project soon, utilizing this and more tutorials!
Additional Material:
VENETIA'S IN-DEPTH HK HAIR TUTORIAL
Greetings, this is Ven, your friendly local mod. I've gotten more than a few requests for this, so here it is. I made a very basic hairpiece for an HK, and took screenshots of every step.
If you're reading this, you're probably a little of a novice to pixel art. That's okay. I'm going through every step, and am providing palettes. This will be symmetrical hair--meaning it's the same on the left as it is the right. If you're a novice, that's what I recommend, because it involves the least amount of perspective/editing. However, you're going to need to know atleast the very basics, including how to use your image editing program. I will not help you there.
Note that some diagrams have been shrunk to be more web-friendly, so it may look just a little off.
WHAT YOU'LL NEED:
+ A somewhat advanced image-editing program. I use Paint Shop Pro 9 here. You can also use Photoshop, or the Gimp, or Paint.NET, or whatever. You can try to use MS Paint but it will take much longer and require more workarounds. Your program should have the capability to create layers, and to lower/raise the color limits, zoom to more than 1000%, and preferably, be able to edit palettes automatically.
+ About an hour to devote--getting up in the middle may cause you to lose your place, and if you take less than an hour, you're not doing it right. There are 53 steps, so get ready!
+ This palette: http://www.pixelcocktail.com/hosted_ite ... lettes.png[/img]
(They're hair colors: Brown, Auburn, Red, Blonde, Black, Grey. It's small enough to put anywhere in the template without bumping into something. You're going to be at about 1200% zoom the whole time, so the size will not be an issue.)
+ This skin (CREDIT SHOWKAIZER): http://www.pixelcocktail.com/hosted_ite ... Female.png
+ A somewhat advanced image-editing program. I use Paint Shop Pro 9 here. You can also use Photoshop, or the Gimp, or Paint.NET, or whatever. You can try to use MS Paint but it will take much longer and require more workarounds. Your program should have the capability to create layers, and to lower/raise the color limits, zoom to more than 1000%, and preferably, be able to edit palettes automatically.
+ About an hour to devote--getting up in the middle may cause you to lose your place, and if you take less than an hour, you're not doing it right. There are 53 steps, so get ready!
+ This palette: http://www.pixelcocktail.com/hosted_ite ... lettes.png[/img]
(They're hair colors: Brown, Auburn, Red, Blonde, Black, Grey. It's small enough to put anywhere in the template without bumping into something. You're going to be at about 1200% zoom the whole time, so the size will not be an issue.)
+ This skin (CREDIT SHOWKAIZER): http://www.pixelcocktail.com/hosted_ite ... Female.png
Let's Begin!
_______________________________________________________________________
STEP 1.
http://www.pixelcocktail.com/hosted_ite ... Step01.png[/img]
Zoom in as close as you'd like on the very first frame of the template I provided above. Create a new layer, call it anything you like.
Paste in the Palette, provided above - I just pasted the Brown, since that's all we really need now.
Take the darkest color in the palette, and outline a hair-shape.
I decided to go with an Aerith-type, 2-hair-chunk bangs thing, that most people seem to like the most (not that I do). You can do whatever you like. Go from a reference if you're unsure. The RTP has a lot of different hairstyles you can "copy".
STEP 2.
http://www.pixelcocktail.com/hosted_ite ... Step02.png[/img]
Use the eyedropper to capture the middle-tone. Use the Paint Bucket to fill in your outline.
STEP 3.
http://www.pixelcocktail.com/hosted_ite ... Step03.png[/img]
Clean up your first outline using a Push brush set at 100% hardness and 1pix in size. We want to use the same 6 colors for everything, so NEVER set your hardness low, or feather, or antialias.
In this step, I also took the second-darkest color and outlined some hair strands.
STEP 4.
http://www.pixelcocktail.com/hosted_ite ... Step04.png[/img]
Clean up the outlines a little, and select the middle fill color using the Magic Wand (or whatever your program has).
STEP 5.
http://www.pixelcocktail.com/hosted_ite ... Step05.png[/img]
Within that selection, grab the tone that's 1-lighter than your midtone, and color in a "halo".
STEP 6.
http://www.pixelcocktail.com/hosted_ite ... Step06.png[/img]
Deselect, and then color over the outline a little to give it less harsh of an apprearance.
STEP 7.
http://www.pixelcocktail.com/hosted_ite ... Step07.png[/img]
I didn't like how close to the head the hair was clinging, so I bumped it up a pixel.
STEP 8.
http://www.pixelcocktail.com/hosted_ite ... Step08.png[/img]
I was fairly happy with it, but since I wanted to do the Aerith bangs, I outlined them and added some shading.
STEP 9.
http://www.pixelcocktail.com/hosted_ite ... Step09.png[/img]
Copy and paste that, mirroring/flipping it. If this was not symmetrical, you would have outlined the whole head of hair from the start.
STEP 10.
http://www.pixelcocktail.com/hosted_ite ... Step10.png[/img]
Edit the other side of the scalp, so it follows the light direction. In most cases, the "light source" should be in the upper left corner.
STEP 11.
http://www.pixelcocktail.com/hosted_ite ... Step11.png[/img]
Now that the "foreground" hair is done, add some hair in the back. This is obviously skippable if you're working with very short hair.
STEP 12.
http://www.pixelcocktail.com/hosted_ite ... Step12.png[/img]
WITHOUT CHANGING LAYERS, select the colors from the skin and shade just under the hair. Don't shade what doesn't changes. Here you'll see I shaded under her widow's peak/bangs, and added eyebrows. I think sprites look silly without eyebrows, but that's probably personal preference.
STEP 13.
http://www.pixelcocktail.com/hosted_ite ... Step13.png[/img]
Clean up the shading. This is an on-going process. If you're doing an NPC, don't work too long on it, since you may overdo it, but main character(s) should receive a lot of fine-tuning. This is an NPC, so I'm just kinda cleaning as I go.
Front First Frame Complete!
http://www.pixelcocktail.com/hosted_ite ... Step01.png[/img]
Zoom in as close as you'd like on the very first frame of the template I provided above. Create a new layer, call it anything you like.
Paste in the Palette, provided above - I just pasted the Brown, since that's all we really need now.
Take the darkest color in the palette, and outline a hair-shape.
I decided to go with an Aerith-type, 2-hair-chunk bangs thing, that most people seem to like the most (not that I do). You can do whatever you like. Go from a reference if you're unsure. The RTP has a lot of different hairstyles you can "copy".
STEP 2.
http://www.pixelcocktail.com/hosted_ite ... Step02.png[/img]
Use the eyedropper to capture the middle-tone. Use the Paint Bucket to fill in your outline.
STEP 3.
http://www.pixelcocktail.com/hosted_ite ... Step03.png[/img]
Clean up your first outline using a Push brush set at 100% hardness and 1pix in size. We want to use the same 6 colors for everything, so NEVER set your hardness low, or feather, or antialias.
In this step, I also took the second-darkest color and outlined some hair strands.
STEP 4.
http://www.pixelcocktail.com/hosted_ite ... Step04.png[/img]
Clean up the outlines a little, and select the middle fill color using the Magic Wand (or whatever your program has).
STEP 5.
http://www.pixelcocktail.com/hosted_ite ... Step05.png[/img]
Within that selection, grab the tone that's 1-lighter than your midtone, and color in a "halo".
STEP 6.
http://www.pixelcocktail.com/hosted_ite ... Step06.png[/img]
Deselect, and then color over the outline a little to give it less harsh of an apprearance.
STEP 7.
http://www.pixelcocktail.com/hosted_ite ... Step07.png[/img]
I didn't like how close to the head the hair was clinging, so I bumped it up a pixel.
STEP 8.
http://www.pixelcocktail.com/hosted_ite ... Step08.png[/img]
I was fairly happy with it, but since I wanted to do the Aerith bangs, I outlined them and added some shading.
STEP 9.
http://www.pixelcocktail.com/hosted_ite ... Step09.png[/img]
Copy and paste that, mirroring/flipping it. If this was not symmetrical, you would have outlined the whole head of hair from the start.
STEP 10.
http://www.pixelcocktail.com/hosted_ite ... Step10.png[/img]
Edit the other side of the scalp, so it follows the light direction. In most cases, the "light source" should be in the upper left corner.
STEP 11.
http://www.pixelcocktail.com/hosted_ite ... Step11.png[/img]
Now that the "foreground" hair is done, add some hair in the back. This is obviously skippable if you're working with very short hair.
STEP 12.
http://www.pixelcocktail.com/hosted_ite ... Step12.png[/img]
WITHOUT CHANGING LAYERS, select the colors from the skin and shade just under the hair. Don't shade what doesn't changes. Here you'll see I shaded under her widow's peak/bangs, and added eyebrows. I think sprites look silly without eyebrows, but that's probably personal preference.
STEP 13.
http://www.pixelcocktail.com/hosted_ite ... Step13.png[/img]
Clean up the shading. This is an on-going process. If you're doing an NPC, don't work too long on it, since you may overdo it, but main character(s) should receive a lot of fine-tuning. This is an NPC, so I'm just kinda cleaning as I go.
Front First Frame Complete!
STEP 14.
http://www.pixelcocktail.com/hosted_ite ... Step14.png[/img]
Select the first-frame hair, and paste it down next to the left-facing first-frame sprite. This is to give yourself a size-reference. It doesn't have to be perfect, but it should be close.
STEP 15.
http://www.pixelcocktail.com/hosted_ite ... Step15.png[/img]
Outline the hair, using the darkest color. Since HK's are supposed to be seen at a 3/4 perspective looking down, you're going to want to see a little of the hairline and opposite side of the scalp.
STEP 16.
http://www.pixelcocktail.com/hosted_ite ... Step16.png[/img]
See how the hair matches up to the front view's placement? Budge your outline around to make it work. Then fill with your midtone.
STEP 17.
http://www.pixelcocktail.com/hosted_ite ... Step17.png[/img]
Select the midtone, and draw in "halos" of highlight and shadow colors. The highlights will indicate where the hair bells outward, and the shadows indicate where the hair "tucks" inward. Creating more than one halo denotes "waves" in the hair. Here she has 2 halo sets because I wanted it to curl a little at the bottom.
STEP 18.
http://www.pixelcocktail.com/hosted_ite ... Step18.png[/img]
Fine-tune the shading, making regards for individual strands, but don't over-detail it unless your mastery of shading is very down-pat. Remember that these won't be seen in-game at 1200%, so zoom out to 100% often so you can see the hair clearly. It shouldn't look like a helmet, but it shouldn't look like spaghetti, either.
STEP 19.
http://www.pixelcocktail.com/hosted_ite ... Step19.png[/img]
Fine-tune the shading further. Like I said before, much of your time will be spent fine-tuning.
STEP 20.
http://www.pixelcocktail.com/hosted_ite ... Step20.png[/img]
More fine-tuning. Don't forget your lighter tones! It's easy to miss them sometimes, but you have to remember to use all the same colors you use everywhere so it looks congruous.
When that's done, shade in the skin (without changing layers or altering colors!), and draw in an eyebrow. Don't forget that the head slopes in under the brow, so you'll need shading under there, too.
STEP 21.
http://www.pixelcocktail.com/hosted_ite ... Step21.png[/img]
Lookin' good! Now copy it, paste it, flip/mirror it, and place it over the right-facing sprite. Remember that if the hair is asymmetrical, you will have to redraw the hair from scratch on the right-facing view, using the outline from Step 15.
Side-view First Frames Complete!
http://www.pixelcocktail.com/hosted_ite ... Step14.png[/img]
Select the first-frame hair, and paste it down next to the left-facing first-frame sprite. This is to give yourself a size-reference. It doesn't have to be perfect, but it should be close.
STEP 15.
http://www.pixelcocktail.com/hosted_ite ... Step15.png[/img]
Outline the hair, using the darkest color. Since HK's are supposed to be seen at a 3/4 perspective looking down, you're going to want to see a little of the hairline and opposite side of the scalp.
STEP 16.
http://www.pixelcocktail.com/hosted_ite ... Step16.png[/img]
See how the hair matches up to the front view's placement? Budge your outline around to make it work. Then fill with your midtone.
STEP 17.
http://www.pixelcocktail.com/hosted_ite ... Step17.png[/img]
Select the midtone, and draw in "halos" of highlight and shadow colors. The highlights will indicate where the hair bells outward, and the shadows indicate where the hair "tucks" inward. Creating more than one halo denotes "waves" in the hair. Here she has 2 halo sets because I wanted it to curl a little at the bottom.
STEP 18.
http://www.pixelcocktail.com/hosted_ite ... Step18.png[/img]
Fine-tune the shading, making regards for individual strands, but don't over-detail it unless your mastery of shading is very down-pat. Remember that these won't be seen in-game at 1200%, so zoom out to 100% often so you can see the hair clearly. It shouldn't look like a helmet, but it shouldn't look like spaghetti, either.
STEP 19.
http://www.pixelcocktail.com/hosted_ite ... Step19.png[/img]
Fine-tune the shading further. Like I said before, much of your time will be spent fine-tuning.
STEP 20.
http://www.pixelcocktail.com/hosted_ite ... Step20.png[/img]
More fine-tuning. Don't forget your lighter tones! It's easy to miss them sometimes, but you have to remember to use all the same colors you use everywhere so it looks congruous.
When that's done, shade in the skin (without changing layers or altering colors!), and draw in an eyebrow. Don't forget that the head slopes in under the brow, so you'll need shading under there, too.
STEP 21.
http://www.pixelcocktail.com/hosted_ite ... Step21.png[/img]
Lookin' good! Now copy it, paste it, flip/mirror it, and place it over the right-facing sprite. Remember that if the hair is asymmetrical, you will have to redraw the hair from scratch on the right-facing view, using the outline from Step 15.
Side-view First Frames Complete!
STEP 22.
http://www.pixelcocktail.com/hosted_ite ... Step22.png[/img]
Select the first frame, front view, and paste it over the back view sprite, making sure to line it up the same way with the edge of the scalp. Yes, I know this looks silly.
STEP 23.
http://www.pixelcocktail.com/hosted_ite ... Step23.png[/img]
Using your Lasso Selection tool, select everything but the outline & parting line of the hair. Delete it. This gives you the basic shape without any work! Then, select it all and flip/mirror it (remember that turning around also turns around the hair)!
STEP 24.
http://www.pixelcocktail.com/hosted_ite ... Step24.png[/img]
Take the darkest color in the palette, and outline the bottom of the hair. Take the parting line of the scalp and move it down some, so that the semi-top-down look carries over.
STEP 25.
http://www.pixelcocktail.com/hosted_ite ... Step25.png[/img]
Fill with the midtone. Select the midtone. Draw in highlight/shadow halos. Use the side view as a reference.
STEP 26.
http://www.pixelcocktail.com/hosted_ite ... Step26.png[/img]
Using the second-darkest color, draw in individual strands. Note that all hair should originate from the parting-line of the scalp, and follow the contours of the head/neck! See how I have two points here where the hair "bells" out? Note that it gets "wider" around the highlights and "narrower" around the shadows?
STEP 27.
http://www.pixelcocktail.com/hosted_ite ... Step27.png[/img]
I didn't like how big the shadow halo was, so I drew in some midtone. That's better.
STEP 28.
http://www.pixelcocktail.com/hosted_ite ... Step28.png[/img]
Take your midtone color and Magic Wand select the second-darkest color. Draw in midtone over the highlights so it looks less defined. You should notice it looking "smoother" and "rounder", now.
STEP 29.
http://www.pixelcocktail.com/hosted_ite ... Step29.png[/img]
Add shading. You should be pretty used to this by now, hm? Don't forget to follow the contours of the hair strands, and don't be afraid to make the outline different colors! The outline should always be about one shade darker than the fill color next to it. Fine-tune it.
STEP 30.
http://www.pixelcocktail.com/hosted_ite ... Step30.png[/img]
Hooray! We have a front view, side views, and a back view! Now comes the easy stuff.
Back view first frame complete!
http://www.pixelcocktail.com/hosted_ite ... Step22.png[/img]
Select the first frame, front view, and paste it over the back view sprite, making sure to line it up the same way with the edge of the scalp. Yes, I know this looks silly.
STEP 23.
http://www.pixelcocktail.com/hosted_ite ... Step23.png[/img]
Using your Lasso Selection tool, select everything but the outline & parting line of the hair. Delete it. This gives you the basic shape without any work! Then, select it all and flip/mirror it (remember that turning around also turns around the hair)!
STEP 24.
http://www.pixelcocktail.com/hosted_ite ... Step24.png[/img]
Take the darkest color in the palette, and outline the bottom of the hair. Take the parting line of the scalp and move it down some, so that the semi-top-down look carries over.
STEP 25.
http://www.pixelcocktail.com/hosted_ite ... Step25.png[/img]
Fill with the midtone. Select the midtone. Draw in highlight/shadow halos. Use the side view as a reference.
STEP 26.
http://www.pixelcocktail.com/hosted_ite ... Step26.png[/img]
Using the second-darkest color, draw in individual strands. Note that all hair should originate from the parting-line of the scalp, and follow the contours of the head/neck! See how I have two points here where the hair "bells" out? Note that it gets "wider" around the highlights and "narrower" around the shadows?
STEP 27.
http://www.pixelcocktail.com/hosted_ite ... Step27.png[/img]
I didn't like how big the shadow halo was, so I drew in some midtone. That's better.
STEP 28.
http://www.pixelcocktail.com/hosted_ite ... Step28.png[/img]
Take your midtone color and Magic Wand select the second-darkest color. Draw in midtone over the highlights so it looks less defined. You should notice it looking "smoother" and "rounder", now.
STEP 29.
http://www.pixelcocktail.com/hosted_ite ... Step29.png[/img]
Add shading. You should be pretty used to this by now, hm? Don't forget to follow the contours of the hair strands, and don't be afraid to make the outline different colors! The outline should always be about one shade darker than the fill color next to it. Fine-tune it.
STEP 30.
http://www.pixelcocktail.com/hosted_ite ... Step30.png[/img]
Hooray! We have a front view, side views, and a back view! Now comes the easy stuff.
Back view first frame complete!
STEP 31.
http://www.pixelcocktail.com/hosted_ite ... Step31.png[/img]
Since this is a very simple piece of hair, the third frame should just be a simple copy & paste over. I don't think the template is lined up perfectly, so you'll need to be careful about the placement. Watching where the eyebrow goes is the best indicator (except for the back view, of course). Test it in RMXP to make sure you did it right, if you're totally unsure.
Set up Third Frames Complete!
http://www.pixelcocktail.com/hosted_ite ... Step31.png[/img]
Since this is a very simple piece of hair, the third frame should just be a simple copy & paste over. I don't think the template is lined up perfectly, so you'll need to be careful about the placement. Watching where the eyebrow goes is the best indicator (except for the back view, of course). Test it in RMXP to make sure you did it right, if you're totally unsure.
Set up Third Frames Complete!
STEP 32.
http://www.pixelcocktail.com/hosted_ite ... Step32.png[/img]
Select the front-view, first frame. Paste it over the second frame, lining it up by the eyebrows.
See the arrows? The pink arrow is pointing to the Swing Arm. If the arm is swinging to the right, the hair needs to go left, and vice-versa.
The green arrow indicates the path the hair needs to "take".
STEP 33.
http://www.pixelcocktail.com/hosted_ite ... Step33.png[/img]
Using the Lasso Selection tool and the pencil, draw in the hair as it moves to the left (your left). If your sprite has bangs, the bangs will probably move up a pixel or so, since the hair "bounces" with the falling motion of the body in stride.
STEP 34.
http://www.pixelcocktail.com/hosted_ite ... Step34.png[/img]
Fill this in and shade. Fix things that don't look right.
STEP 35.
http://www.pixelcocktail.com/hosted_ite ... Step35.png[/img]
Notice the circle? That area remained unchanged by the sprite's movement. It's important that some of it remains unchanged so that the motion looks congruent and fluid. Hair doesn't move wildly when you're simply walking.
STEP 36.
http://www.pixelcocktail.com/hosted_ite ... Step36.png[/img]
Now since this is symmetrical, you can just copy and paste the second frame over into the fourth, and flip it. Note that you have to repeat steps 33 & 34 for the fourth frame if you're using asymmetrical hair. See why I recommend symmetry for novices now?
STEP 37.
http://www.pixelcocktail.com/hosted_ite ... Step37.png[/img]
This is a step largely overlooked by people. Notice how the scalp in the first frame isn't totally identical in shading on both sides of the head? This needs to be carried over. Lasso the top of the scalp from the first frame and carry it over. You may need to make a new layer to tweak it before merging the frames.
Front View, Second & Fourth Frames Complete!
http://www.pixelcocktail.com/hosted_ite ... Step32.png[/img]
Select the front-view, first frame. Paste it over the second frame, lining it up by the eyebrows.
See the arrows? The pink arrow is pointing to the Swing Arm. If the arm is swinging to the right, the hair needs to go left, and vice-versa.
The green arrow indicates the path the hair needs to "take".
STEP 33.
http://www.pixelcocktail.com/hosted_ite ... Step33.png[/img]
Using the Lasso Selection tool and the pencil, draw in the hair as it moves to the left (your left). If your sprite has bangs, the bangs will probably move up a pixel or so, since the hair "bounces" with the falling motion of the body in stride.
STEP 34.
http://www.pixelcocktail.com/hosted_ite ... Step34.png[/img]
Fill this in and shade. Fix things that don't look right.
STEP 35.
http://www.pixelcocktail.com/hosted_ite ... Step35.png[/img]
Notice the circle? That area remained unchanged by the sprite's movement. It's important that some of it remains unchanged so that the motion looks congruent and fluid. Hair doesn't move wildly when you're simply walking.
STEP 36.
http://www.pixelcocktail.com/hosted_ite ... Step36.png[/img]
Now since this is symmetrical, you can just copy and paste the second frame over into the fourth, and flip it. Note that you have to repeat steps 33 & 34 for the fourth frame if you're using asymmetrical hair. See why I recommend symmetry for novices now?
STEP 37.
http://www.pixelcocktail.com/hosted_ite ... Step37.png[/img]
This is a step largely overlooked by people. Notice how the scalp in the first frame isn't totally identical in shading on both sides of the head? This needs to be carried over. Lasso the top of the scalp from the first frame and carry it over. You may need to make a new layer to tweak it before merging the frames.
Front View, Second & Fourth Frames Complete!
STEP 38.
http://www.pixelcocktail.com/hosted_ite ... Step38.png[/img]
Select the first frame of the left view and copy/paste it over into the second frame. Notice the motion arrows here?
The blue arrow indicates the motion the sprite is taking. As the sprite falls in its gait, the hair should "bounce" upward a pixel or so. Not all of the hair, just the bottom portion.
Additionally, the hair should "swing" behind the sprite, since the Swing Arm is in the foreground (pink arrow).
STEP 39.
http://www.pixelcocktail.com/hosted_ite ... Step39.png[/img]
Use the Lasso tool and select the bottom portion of the hair. Use corners/waves as a starting point, so strands of hair don't get "bunchy". Move it inward.
STEP 40.
http://www.pixelcocktail.com/hosted_ite ... Step40.png[/img]
Clean up the hair some once you moved it. You don't want to see any kinks created by your movement. Tweak it to your liking.
STEP 41.
http://www.pixelcocktail.com/hosted_ite ... Step41.png[/img]
Now, copy and paste the first frame into the fourth frame. Don't copy/paste the second! The movement is totally different!
Notice the purple arrow? It indicates that the hair'll be moving into the foreground this time since the Swing Arm is in the background.
STEP 42.
http://www.pixelcocktail.com/hosted_ite ... Step42.png[/img]
Following that motion, draw the hair in and down a little using the same selection method as before. You don't want to make kinks in the strands.
When that's done, use some highlight colors on the piece of hair in the foreground. It's hitting more light now, so you should reflect that. Just don't get crazy with it or it won't look congruent.
STEP 43.
http://www.pixelcocktail.com/hosted_ite ... Step43.png[/img]
Copy & paste the second and fourth frames into the 2nd & 4th of the right-facing view, according to the diagram. Align it using the eyebrows. If this is a main character, you'll need to shade according to the light source, but you don't have to get too crazy with NPC hair unless you want to kill yourself.
Also note, this doesn't work with asymmetrical hair! You have to repeat steps 38-42 for the right-facing view if the hair has an asymmetrical part.
Side View, Second & Fourth Frames, Complete!
http://www.pixelcocktail.com/hosted_ite ... Step38.png[/img]
Select the first frame of the left view and copy/paste it over into the second frame. Notice the motion arrows here?
The blue arrow indicates the motion the sprite is taking. As the sprite falls in its gait, the hair should "bounce" upward a pixel or so. Not all of the hair, just the bottom portion.
Additionally, the hair should "swing" behind the sprite, since the Swing Arm is in the foreground (pink arrow).
STEP 39.
http://www.pixelcocktail.com/hosted_ite ... Step39.png[/img]
Use the Lasso tool and select the bottom portion of the hair. Use corners/waves as a starting point, so strands of hair don't get "bunchy". Move it inward.
STEP 40.
http://www.pixelcocktail.com/hosted_ite ... Step40.png[/img]
Clean up the hair some once you moved it. You don't want to see any kinks created by your movement. Tweak it to your liking.
STEP 41.
http://www.pixelcocktail.com/hosted_ite ... Step41.png[/img]
Now, copy and paste the first frame into the fourth frame. Don't copy/paste the second! The movement is totally different!
Notice the purple arrow? It indicates that the hair'll be moving into the foreground this time since the Swing Arm is in the background.
STEP 42.
http://www.pixelcocktail.com/hosted_ite ... Step42.png[/img]
Following that motion, draw the hair in and down a little using the same selection method as before. You don't want to make kinks in the strands.
When that's done, use some highlight colors on the piece of hair in the foreground. It's hitting more light now, so you should reflect that. Just don't get crazy with it or it won't look congruent.
STEP 43.
http://www.pixelcocktail.com/hosted_ite ... Step43.png[/img]
Copy & paste the second and fourth frames into the 2nd & 4th of the right-facing view, according to the diagram. Align it using the eyebrows. If this is a main character, you'll need to shade according to the light source, but you don't have to get too crazy with NPC hair unless you want to kill yourself.
Also note, this doesn't work with asymmetrical hair! You have to repeat steps 38-42 for the right-facing view if the hair has an asymmetrical part.
Side View, Second & Fourth Frames, Complete!
STEP 44.
http://www.pixelcocktail.com/hosted_ite ... Step44.png[/img]
Copy and paste the first frame onto the second frame, taking care to line it up right. Notice the blue arrow? It indicates the movement direction of the hair.
STEP 45.
http://www.pixelcocktail.com/hosted_ite ... Step45.png[/img]
Budge the bottom of the hair some, moving some clumps/strands over a little so they look like they're moving with the hair. Don't move the hair on the scalp.
STEP 46.
http://www.pixelcocktail.com/hosted_ite ... Step50.png[/img]
Copy and paste the first frame onto the fourth frame, taking care to line it up right. Notice the blue arrow? It indicates the movement direction of the hair.
STEP 47.
http://www.pixelcocktail.com/hosted_ite ... Step51.png[/img]
Budge the bottom of the hair some, moving some clumps/strands over a little so they look like they're moving with the hair. Don't move the hair on the scalp.
Back View, Second & Fourth Frames Complete!
http://www.pixelcocktail.com/hosted_ite ... Step44.png[/img]
Copy and paste the first frame onto the second frame, taking care to line it up right. Notice the blue arrow? It indicates the movement direction of the hair.
STEP 45.
http://www.pixelcocktail.com/hosted_ite ... Step45.png[/img]
Budge the bottom of the hair some, moving some clumps/strands over a little so they look like they're moving with the hair. Don't move the hair on the scalp.
STEP 46.
http://www.pixelcocktail.com/hosted_ite ... Step50.png[/img]
Copy and paste the first frame onto the fourth frame, taking care to line it up right. Notice the blue arrow? It indicates the movement direction of the hair.
STEP 47.
http://www.pixelcocktail.com/hosted_ite ... Step51.png[/img]
Budge the bottom of the hair some, moving some clumps/strands over a little so they look like they're moving with the hair. Don't move the hair on the scalp.
Back View, Second & Fourth Frames Complete!
http://www.pixelcocktail.com/hosted_ite ... Step52.png[/img]
There it is! Your completed hair in brown!
The next steps are optional, for recoloring. These next parts are PSP9-specific. There may be similar commands in Photoshop or the GIMP, etc, but I don't know what they are, exactly, so you'll need to figure it out. I'm sure the processes are nearly the same, though.
NEW 1-16-08: There is now a GraphicsGale tutorial on palette-swapping here, courtesy of Nphyx. It also requires less steps than the PSP9 version. Please scroll to the very bottom of this post to view that information.
STEP 48.
http://www.pixelcocktail.com/hosted_ite ... Step53.png[/img]
Above the body-template, create a new layer. Fill it with some color you're not using. Here I used some kind of greyish green.
STEP 49.
http://www.pixelcocktail.com/hosted_ite ... Step54.png[/img]
You should have less than 15 colors in your palette, total. Ideally, it'll be 6 colors for the hair, 4 for the skin, and 1 for the background, making 11--but setting it at 15 ensures that none of your colors will be altered/replaced.
So Reduce the Color Depth by going to Image > Decrease Color Depth > X Colors. Set it to the settings pictured above.
STEP 50.
http://www.pixelcocktail.com/hosted_ite ... Step55.png[/img]
If you did it right, in the Color Picker, you'll see the palette above (thereabouts).
If you save it now, the filesize will be greatly reduced over that of a transparent-backed PNG. You can now use this hair on any template, to make franken-HK's!
For further franken-HK fun, continue the tutorial.
STEP 51.
http://www.pixelcocktail.com/hosted_ite ... Step56.png[/img]
Open your Palettes.png (from the top of the post), in a different window. Line up your windows so you can see both the template and the palettes.
Hit [Shift] + [P], or go to Image > Palette > Edit Palette.
STEP 52.
http://www.pixelcocktail.com/hosted_ite ... Step57.png[/img]
In this tutorial, I'm changing the hair to red from brown. Select the darkest color, then in the Color Chooser prompt, select the darkest shade of red from the Palettes.png. Then do the second darkest, and so on. If you like, you can also change the skin colors if you make a separate palette for them.
STEP 53.
http://www.pixelcocktail.com/hosted_ite ... Step58.png[/img]
When you're done, it should look like this!
Reducing File Size & Recoloring Complete!
http://www.pixelcocktail.com/hosted_ite ... Step53.png[/img]
Above the body-template, create a new layer. Fill it with some color you're not using. Here I used some kind of greyish green.
STEP 49.
http://www.pixelcocktail.com/hosted_ite ... Step54.png[/img]
You should have less than 15 colors in your palette, total. Ideally, it'll be 6 colors for the hair, 4 for the skin, and 1 for the background, making 11--but setting it at 15 ensures that none of your colors will be altered/replaced.
So Reduce the Color Depth by going to Image > Decrease Color Depth > X Colors. Set it to the settings pictured above.
STEP 50.
http://www.pixelcocktail.com/hosted_ite ... Step55.png[/img]
If you did it right, in the Color Picker, you'll see the palette above (thereabouts).
If you save it now, the filesize will be greatly reduced over that of a transparent-backed PNG. You can now use this hair on any template, to make franken-HK's!
For further franken-HK fun, continue the tutorial.
STEP 51.
http://www.pixelcocktail.com/hosted_ite ... Step56.png[/img]
Open your Palettes.png (from the top of the post), in a different window. Line up your windows so you can see both the template and the palettes.
Hit [Shift] + [P], or go to Image > Palette > Edit Palette.
STEP 52.
http://www.pixelcocktail.com/hosted_ite ... Step57.png[/img]
In this tutorial, I'm changing the hair to red from brown. Select the darkest color, then in the Color Chooser prompt, select the darkest shade of red from the Palettes.png. Then do the second darkest, and so on. If you like, you can also change the skin colors if you make a separate palette for them.
STEP 53.
http://www.pixelcocktail.com/hosted_ite ... Step58.png[/img]
When you're done, it should look like this!
Reducing File Size & Recoloring Complete!
As a special gift for doing this tutorial, here is the hair I did here, recolored with all the hair colors in Palettes.png. You can use them to paste onto female HK templates, making Franken-HK's of your own!
http://www.pixelcocktail.com/hosted_ite ... -Brown.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Black.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Blonde.png[/img]
http://www.pixelcocktail.com/hosted_ite ... 1-Grey.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Red.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Auburn.png[/img]
You can use them however you like! Enjoy!
http://www.pixelcocktail.com/hosted_ite ... -Brown.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Black.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Blonde.png[/img]
http://www.pixelcocktail.com/hosted_ite ... 1-Grey.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Red.png[/img]http://www.pixelcocktail.com/hosted_items/images/Tutorial/Hair-01-Auburn.png[/img]
You can use them however you like! Enjoy!
Thank you for reading my tutorial. I hope it helped you in your pixelling endeavors. Be on the lookout for an HK Construction Project soon, utilizing this and more tutorials!
Additional Material:
If you'd like to swap the palettes but don't have PSP9, there is an alternative: GraphicsGale.
http://www.humanbalance.net/gale/us/
It's a free download (not a trial!) if you're not looking to make GIFs or cursors with it! (Making GIFs/cursors requires payment, but PNG editing is free).
Here is how to do a palette swap in that program:
http://img.photobucket.com/albums/v326/ ... orial1.jpg[/img]
First, we load up the palette file in Gale.
http://img.photobucket.com/albums/v326/ ... orial2.jpg[/img]
Graphics Gale builds palettes left to right, top to bottom, so I rotated it for a cleaner looking palette. I have changed the color depth to 8bpp (8 bits per pixel) in 'All Frames' -> 'Color Depth...'.
This is a critical step; in higher color modes you cannot perform palette swapping. You can see that they are in the same sequence in the palette tool this way, whereas the other direction they'd be a jumble.
I am selecting Save Palette... on the menu in the palette tool area, and I've saved this as tutorial.pal.
http://img.photobucket.com/albums/v326/ ... orial3.jpg[/img]
I have switched over to the hair tutorial file and converted it to 8bpp as well. The palette from that file unfortunately is not as nicely ordered as the other one. You can see in this screenshot Load Palette menu, the two palette boxes. On the left is the tutorial.pal palette, on the right is the palette from the working image.
I have selected all the colors from tutorial.pal and placed them on the bottom of the new image's palette.
Be careful not to paste the new colors over colors you are already using in the image or they will be replaced.
http://img.photobucket.com/albums/v326/ ... orial4.jpg[/img]
Here you can see I have swapped the red hair color palettes from the bottom, with the brown hair colors from the original color set on the top of the palette tool simply by dragging and dropping each red color with the brown color of the corresponding value (e.g. the same lightness/darkness).
I can now save it as redhair.png or whatever I like, and repeat the swap for each color in all of about 20 seconds per color set.
http://www.humanbalance.net/gale/us/
It's a free download (not a trial!) if you're not looking to make GIFs or cursors with it! (Making GIFs/cursors requires payment, but PNG editing is free).
Here is how to do a palette swap in that program:
http://img.photobucket.com/albums/v326/ ... orial1.jpg[/img]
First, we load up the palette file in Gale.
http://img.photobucket.com/albums/v326/ ... orial2.jpg[/img]
Graphics Gale builds palettes left to right, top to bottom, so I rotated it for a cleaner looking palette. I have changed the color depth to 8bpp (8 bits per pixel) in 'All Frames' -> 'Color Depth...'.
This is a critical step; in higher color modes you cannot perform palette swapping. You can see that they are in the same sequence in the palette tool this way, whereas the other direction they'd be a jumble.
I am selecting Save Palette... on the menu in the palette tool area, and I've saved this as tutorial.pal.
http://img.photobucket.com/albums/v326/ ... orial3.jpg[/img]
I have switched over to the hair tutorial file and converted it to 8bpp as well. The palette from that file unfortunately is not as nicely ordered as the other one. You can see in this screenshot Load Palette menu, the two palette boxes. On the left is the tutorial.pal palette, on the right is the palette from the working image.
I have selected all the colors from tutorial.pal and placed them on the bottom of the new image's palette.
Be careful not to paste the new colors over colors you are already using in the image or they will be replaced.
http://img.photobucket.com/albums/v326/ ... orial4.jpg[/img]
Here you can see I have swapped the red hair color palettes from the bottom, with the brown hair colors from the original color set on the top of the palette tool simply by dragging and dropping each red color with the brown color of the corresponding value (e.g. the same lightness/darkness).
I can now save it as redhair.png or whatever I like, and repeat the swap for each color in all of about 20 seconds per color set.
