iPhone App Directory
RPG Maker VX
 
Gallery Members Search Calendar Help


Welcome Guest ( Log In | Register )

Collapse

>Announcement

The 2nd Quarter Contest has arrived! Go check it out in the Community Announcements now!

> Note for Tutorial Threads

New threads (tutorials) here will go into a moderation queue. You will not see your thread appear when you create it. A moderator will decide if it will be approved or denied.

 
Reply to this topicStart new topic
> [-Graphics-] Spriting Hair 101
Terra-chan
post Jul 28 2010, 12:45 AM
Post #1


~Crazy Lazy Workaholic~
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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 happy.gif; 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


--------------------
Go to the top of the page
 
+Quote Post
   
Lunara
post Jul 28 2010, 01:50 PM
Post #2


Moon Lady
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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.


--------------------



Go to the top of the page
 
+Quote Post
   
Rmvx mastah
post Jul 28 2010, 02:22 PM
Post #3


The awsome ruler of rmvx
Group Icon


Type: Designer
Alignment: Chaotic Neutral




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

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


--------------------
QUOTE (Sketcy-Sketch @ Dec 15 2010, 05:54 PM) *
Bumpity bump bump bumpity bump bump, look at Frosty go!

QUOTE (RMVXMastah)
“A prisoner of war is a man who tries to kill you and fails, and then asks you not to kill him.”
.:Winston Churchill:.

QUOTE (Kingshen, in Playing with ACRONYMS)
M.O.D.E.R.A.T.O.R.-
Many Overpowered Dictators Ejaculating Rapidly At The Orange Rebels
(aka using their mod powers to b4n some nub)



Spoiler:


Spoiler:




vistit my forum if you would likea job for my game
http://monkey123481.10.forumer.com/index.php
just sign up

Cna yuo raed tihs? Luyk dwon to fnid mroe!

Spoiler:
Cna yuo raed tihs? Olny 55% of plepoe can.
I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg. The phaonmneal pweor of the hmuan mnid, aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it dseno't mtaetr in waht oerdr the ltteres in a wrod are, the olny iproamtnt tihng is taht the frsit and lsat ltteer be in the rghit pclae. The rset can be a taotl mses and you can sitll raed it whotuit a pboerlm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Azanmig huh? yaeh and I awlyas tghuhot slpeling was ipmorantt!
fi yuo cna raed tihs, palce it in yuor siantugre.




Go to the top of the page
 
+Quote Post
   
Terra-chan
post Jul 29 2010, 12:02 AM
Post #4


~Crazy Lazy Workaholic~
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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.


--------------------
Go to the top of the page
 
+Quote Post
   
Peva
post Jul 29 2010, 12:11 AM
Post #5


Also racism
Group Icon


Type: Designer
Alignment: Neutral Good




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


--------------------
Go to the top of the page
 
+Quote Post
   
Lunarea
post Jul 29 2010, 12:13 AM
Post #6



Group Icon


Type: Artist
Alignment: True Neutral




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.
Go to the top of the page
 
+Quote Post
   
Terra-chan
post Jul 29 2010, 12:43 AM
Post #7


~Crazy Lazy Workaholic~
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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)


--------------------
Go to the top of the page
 
+Quote Post
   
Cyl
post Jul 29 2010, 02:04 AM
Post #8


inactive.
Group Icon


Type: Coder
Alignment: Neutral Good




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. smile.gif


--------------------
One word:
Paradichlorobenzene

(Currently inactive)
Go to the top of the page
 
+Quote Post
   
Terra-chan
post Jul 29 2010, 02:48 AM
Post #9


~Crazy Lazy Workaholic~
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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.


--------------------
Go to the top of the page
 
+Quote Post
   
fauxonym7
post Jul 29 2010, 06:57 AM
Post #10


lol he eats poopoo and plays bad pc games true story
Group Icon


Type: Undisclosed
Alignment: Chaotic Neutral




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


--------------------
woo.
Go to the top of the page
 
+Quote Post
   
RyouKachi
post Jul 29 2010, 07:33 AM
Post #11



Group Icon


Type: Designer
Alignment: Chaotic Evil




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 happy.gif .


--------------------
Five things I would tell other RMers:
-Frankenspriting is really easy, anyone can have a go for great results.
-What matters is not the script but how you use it
-NEVER underestimate the power of events.
-When using RTP remember Vibrato and recolours.
-Use the wondereous substance know as paper (plan, note and sketch your work)

My most epic IRC moment ever:
Spoiler:
* RyouKachi iniates a staring contest
<+CaptainJet> you're gonna lose
<RyouKachi> I WON'T LOOOOSE!
<+CaptainJet> you already did
<RyouKachi> Oh shit
<RyouKachi> Damn you JEEEEET!
<+CaptainJet> ;)
<RyouKachi> I'm too psyched to give up I shall see through time itself and stare UNTIL I WIN!
<+CaptainJet> well...
<+CaptainJet> you lost
<+CaptainJet> i see it already
<+CaptainJet> in the future
<RyouKachi> The future is not set in stone, I can change it!
<+CaptainJet> no you can't
<+CaptainJet> i also knew you'd say that
<+CaptainJet> and i know what you'll say next
<RyouKachi> Predictions cannot bind me I am RyouKachi.
<RyouKachi> I am my own man.
<RyouKachi> The future is shaped by ME!
<+CaptainJet> nope
<+CaptainJet> sorry to break it to ya bud
<+CaptainJet> i set the future
<RyouKachi> Then...
<RyouKachi> YOU ARE IN MY WAY!
<+CaptainJet> i am your way
<+CaptainJet> :|
<RyouKachi> INFINITE SOURCE OF EPIC I CALL APON YOU
<+CaptainJet> upon*
<RyouKachi> I DEFINE SPELLING
<+CaptainJet> no, i do
<+CaptainJet> since i set the future of the person who created english spelling
<RyouKachi> GURREN LAGANN
<+CaptainJet> :|
<RyouKachi> Kick reason to the curb and break through the impossible!
<RyouKachi> Who the hell do you think I am!
<RyouKachi> GIGA
<RyouKachi> DRILL
<RyouKachi> BREAKER!!!!!
<+CaptainJet> :|
* RyouKachi is now known as RYOUKACHI
<+CaptainJet> :"|
<RYOUKACHI> Capital letters cannot define the epic
<+CaptainJet> yeah, that's why i don't capitalize my name
<RYOUKACHI> Rule of Cool: If it's cool then it's possible.
<+CaptainJet> no...
<RYOUKACHI> I am a human a living thermo-dynamic miracle, I can do anything.

* Dissonance (~Dissonanc@93139DB9.3DF1602D.38BB7985.IP) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* &Touchfuzzy (~IceChat7@CABEB43A.693AA8F5.657E0562.IP) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* Shiro (Mibbit@synIRC-C777CA08.chi01.dsl-w.verizon.net) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* gonezoles (~bre@synIRC-2750A7DD.hr.hr.cox.net) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* &X (generic@botserv.synirc.net) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* Snacks (Snacks@synIRC-77B9841.hsd1.ma.comcast.net) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* DeviBOT (~DeviBOT@D8C7C2CE.95BA9E12.3E68EF55.IP) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* boon (~boon@synIRC-71559BEA.range86-158.btcentralplus.com) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* @Mithran (Mithran@synIRC-19B73521.static.rvsd.ca.charter.com) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* +Jaeroll (~chatzilla@synIRC-9FE553DE.dyn.embarqhsd.net) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* +CaptainJet (~chatzilla@synIRC-FAC5E26A.pools.spcsdns.net) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* cyangmou (~cyangmou@synIRC-115AE74B.adsl.highway.telekom.at) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)
* +InconspiciousBox (~chatzilla@synIRC-916B2F5E.dhcp.bluecom.no) Quit (naamio.fi.eu.synirc.net thoth.hub.eu.synirc.net)

<RYOUKACHI> Wow
<RYOUKACHI> I can do anything


I support:
Spoiler:















And lastly I made a blog, check it out here:
Ryou's Work Reports
(Blog last updated on 09/10/2010)
Go to the top of the page
 
+Quote Post
   
Terra-chan
post Jul 29 2010, 08:43 AM
Post #12


~Crazy Lazy Workaholic~
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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 happy.gif; I tried to explain things to my classmates in school and they couldn't understand my explanations...


--------------------
Go to the top of the page
 
+Quote Post
   
Celianna
post Jul 29 2010, 01:04 PM
Post #13



Group Icon


Type: Artist
Alignment: Chaotic Evil




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 tongue.gif

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.
Go to the top of the page
 
+Quote Post
   
Rmvx mastah
post Jul 29 2010, 02:38 PM
Post #14


The awsome ruler of rmvx
Group Icon


Type: Designer
Alignment: Chaotic Neutral




or search chibi on google
tongue.gif
i tried the
shrink a donk thingy and failed tongue.gif
ill stick to my method
i agree paint.net is goodfor cutting the hair out from the rescorce


--------------------
QUOTE (Sketcy-Sketch @ Dec 15 2010, 05:54 PM) *
Bumpity bump bump bumpity bump bump, look at Frosty go!

QUOTE (RMVXMastah)
“A prisoner of war is a man who tries to kill you and fails, and then asks you not to kill him.”
.:Winston Churchill:.

QUOTE (Kingshen, in Playing with ACRONYMS)
M.O.D.E.R.A.T.O.R.-
Many Overpowered Dictators Ejaculating Rapidly At The Orange Rebels
(aka using their mod powers to b4n some nub)



Spoiler:


Spoiler:




vistit my forum if you would likea job for my game
http://monkey123481.10.forumer.com/index.php
just sign up

Cna yuo raed tihs? Luyk dwon to fnid mroe!

Spoiler:
Cna yuo raed tihs? Olny 55% of plepoe can.
I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg. The phaonmneal pweor of the hmuan mnid, aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it dseno't mtaetr in waht oerdr the ltteres in a wrod are, the olny iproamtnt tihng is taht the frsit and lsat ltteer be in the rghit pclae. The rset can be a taotl mses and you can sitll raed it whotuit a pboerlm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Azanmig huh? yaeh and I awlyas tghuhot slpeling was ipmorantt!
fi yuo cna raed tihs, palce it in yuor siantugre.




Go to the top of the page
 
+Quote Post
   
Terra-chan
post Jul 29 2010, 07:21 PM
Post #15


~Crazy Lazy Workaholic~
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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 happy.gif


--------------------
Go to the top of the page
 
+Quote Post
   
Lunara
post Jul 29 2010, 09:11 PM
Post #16


Moon Lady
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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


--------------------



Go to the top of the page
 
+Quote Post
   
Terra-chan
post Jul 29 2010, 09:43 PM
Post #17


~Crazy Lazy Workaholic~
Group Icon


Type: Spriter
Alignment: Chaotic Neutral




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


--------------------
Go to the top of the page
 
+Quote Post
   
fauxonym7
post Jul 30 2010, 12:01 PM
Post #18


lol he eats poopoo and plays bad pc games true story
Group Icon


Type: Undisclosed
Alignment: Chaotic Neutral




QUOTE (Celianna @ Jul 29 2010, 09:04 PM) *
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 tongue.gif

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.


--------------------
woo.
Go to the top of the page
 
+Quote Post
   
MagitekElite
post Aug 2 2010, 02:03 AM
Post #19


A Child of the North
Group Icon


Type: Writer
Alignment: True Neutral




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! smile.gif


--------------------

Projects I'm working & Projects I support:
Spoiler:

Final Fantasy VI: Esper Realm (since 2003)
Black Moon (Prophecy) [since 2004]
Secret Project (still under thought and construction) [New!]

Support:


Lit's Sprite Emporium!





Go to the top of the page
 
+Quote Post
   

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Lo-Fi Version Time is now: 19th April 2014 - 08:32 AM

RPGMakerVX.net is an Privacy Policy, Legal.