THE ART OF SPRITING

HOW TO EASILY BECOME A SPRITER

By Danilokao

PROLOGUE
Im sorry, dude I lied to you before, there isnt an easy task to become a spriter, not a good one, at least. First, there is a lot of rules you got to understand and then, assuming you still got your head on the right place, you can try the variety of techniques that are here and now, waiting to be well used. I met this world of mugen a long, long time ago, when I bought a games magazine that had a cd full of flash games, but searching deeper in the directories of that cd, I found a folder called XMEN well, I was already a big fan of the X-men and got really excited about what could that be, so I clicked it and, inside of it, there was a few folders and an .exe file called MUGEN.

-Well, this must be a Japanese version of xmen gamegonna try, anyway For my surprise, it was a cool fighting game that has an incredible full set of (trust me) FOUR fighting mutants, yeah, nothing less than four! After a few minutes, it was my favorite game EVER! I played it everyday for hours, the whole month, and it seemed like life couldnt get any better But, as the curious kid Ive ever been, after wondering about what that folder could contain, I opened that one called data, where I found a readme file, and I realized what it was all about. If you didnt yet, read it you gonna find some valuable stuff in there.

There are a lot of software you can use to follow this tips, so Ill not tell how to do this in each one of it, right? Personally, I use: Adobe Photoshop Adobe llustrator (yeah, you would be surprised) MS Paint

In that order.

CHAPTER 1 DO YOUR OWN STUFF!

Well, there is a lot of complaining about wip stealing in the mugenverse, and thats really a bad thing and blah, blah, blah anyway, mugen makers are jealous, you gonna be too But Im going to tell you why stealing is never a good option: How are you supposed to be a good surgeon if you never make a surgery? How do expect to be a great pizza chef you just deliver them? As you can see, spriting is just like any other skill you can have, but to make you a really spriter, you first have to exercise it, with nothing more than hard work. So, for this chapter, my tip for you is to ALWAYS take a good look in every sprite you see in internet, try to learn for it, use it as reference and remember, you cant post anything that isnt yours, but there are no rules against having it in your pc, to use as studying material.

CHAPTER 2 DONT START FROM ZERO!

I know, is a quite uncommon advice But it is really good, I tell you, at the beginning, there is no point in try the hardest, so lets start from a raw base: This is a sprite from MVC Jin Somethinganyway. From raw, I didnt meant naked, but this one will do. Ladies and Gentlemanmet the

REPAINT
Repainting consist to change the colors of the picture in any level, and there isnt a really hard stuff depending of which software youre using. But before changing the colors like creazy, you wanna make it a color pallete first, check it out: There is not any big secret on making this, you just have to make a circle with each color you have in the sprite (or any other form you like, I like circles becausewell, just do the pallete, ok?) As you may have noticed, Jin uses a white color in his underwear, but doesnt appear in our pallete (from now on, lets just call it pal, ok?). To correct this, we need to set a BG color, there are 2 colors that we use more often: We use this colors in order to avoid to use a BG color that is already been used in the Sprite and assure the maximum contrast sprite/BG to make it easy to see, got it? WTF Pink R: 255 G: 0 B: 255 OMG GREEN R: 0 G: 255 B: 0

Now that you made the pal, is time to repaint! Lets seewhy dont we make a hulk?

Now, there are a few different ways to do this, and Ill show just two of them, because if you master just one of them you wont need any other one, really. The first that Ill show you uses a thing called Indexed Color, that is nothing but a different way to register the pixels of an image (if you got this far, Im assuming you know whats a pixel, but if you dont, pixels are that square dots that form the image). The Indexed Color method works by setting the colors giving them an address, kinda like MS Excel: Imagine that the big square is your image, so we have an address for each color bit, right? But the trick is that, when you choose the indexed color option, the computer generates a second file, called Color Table. The color table is just like this smaller image, it has a representation of each single color from the image. The result is a linkage between the addresses of the color table and the addresses of the image, whatever be the color on it, that means if I change the red on my color table to black, by example, all the pixels that have that red color will turn to black. All the things said, thats how we do it using the Index Color Method: With any image opened in photoshop, click in the image menu>mode>indexed color. A screen will appear showing some options and showing you how many colors there will be on your color table, just hit OK. Now is time to see the real color table, click in the Image menu>mode>Color Table. When you see the color table, all you need to do is to click in the square with the color you want to change and choose a new color for it.

And there is, of course, the second method, that is in my opinion the easiest and the fastest, but it has a small limitation in comparison with the first method: The Hue. Using Photoshop, get the wand tool (W) and make sure that the box with the numeric value is set to zero (Tolerance) and both the check boxes are unchecked (Smooth and Adjacent Options).

This setting s will make the magic wand act like a color selection tool, when you click at some point of your image, it will search for any other pixels with that same exact color and will select them too. If you want to select more than 1 color, just hold the Shift button, and go clicking all the color you want. Remember this guy? He is Access from DCvM comics saga, I did it some agocool, isnt? Anyway, take a look, see the white dashed lines rounding the red parts? Thats how you know theyre selected. Once selected, unleash the power of Ctrl+U or go to image>Adjusts>Hue/Saturation and change the stuff just as you want. Slide the three bars until you get satisfied with the result. After a few tries and changing the blue part too, I think it got really, huh Acid?

To avoid messing up all the image, you can instead of using the Hue/Saturation command just after selecting, you can use first a Ctrl+J, that will make a copy of the selection in a new layer, so you dont need to worry when youre changing something. Another Photoshop command you can use is the Curves adjust, it allows you to increase the contrast of your sprite in a proportional rate. To try this one, you need to go to Image menu>Adjusts>Curves (Ctrl+M)But be careful when using this feature, it tends to distort the difference between the color tones if overused!

Wellit wasnt how I expected, it looks like an old picture its fuzzy and I can barely see the lines of it... what is wrong? Its missing the contrast! The human skin has not much shading, because it is naturally brightless =Pand when you try a different color on it, you will realize the problem. Now here is some work from spriters that I really appreciate, on my opinion, theyre real masters of shading, check it out: This is Trinity, by .Batzarro., take a look at the red parts on the chest and skirt and you gonna understand what Im saying: He makes the dark colors even darker and light a bit the lighter tones too.

Now take a look at this one from Armaggedon, see how natural does Atrocitus black suit look, and he just uses the real black color to draw the outlinesand even Carnage, did you see that there are at least 3 tones of grey on the black part?

And we finish looking to one that I did, see that even being both red, the one that uses less contrast and less color (the left one), seems more realistic, more natural it always has to do with which impression you want to make. Keep that in mind! What do you think? Looks better, right? What if I want it with a hero suit instead of being nude green? Well, this technique Im about to show you is the great base of two of the MASTER TECHNIQUES OF THE ART OF SPRITING (a really cool name, isnt?). Master Techs are that ones that, when you master it, youll be able to make anything you wish, just like the Green Lanterns =D Ill come back to them later, promise. Again, there are a few different ways to accomplish that, and once again I am not going to show all of them, just the pop ones :D. Lets start this time talking about the way I do, for this, we gonna need to learn something about layersAnd Cannonball will help us with that:

LAYERS
Imagine that this image is a real picture, it would be a flat piece of paper containing all the information that your eyes need to trust that he is real, right? But, you know, when this real photo was taken, all the stuff that are in the image was there and you could move then, or even remove something Thats the deal when youre working with layers, you can edit the objects separately, keeping all the rest safe from any unwanted change. So, what if I say that the Cannonball picture, as you can see above doesnt exist? And hes just a bunch of layers put together, to make your eyes believe theyre there as one? No, Im not creazy (not that much), this is the proof of what Im saying, all the layersIn a .psd file, they are organized all over each other, just like if I draw each one of them in a different piece of flat glass, and then put all together

In fact, its a really simple concept, now lets move on

COPY AND PASTE

Now well go back to that green naked dude, I think it is time to get him some clothes, what do you think? To do so, we first need to select all the skin, what its really easy now that we have the color palette on the image. All you need to do is, with the Wand tool(W), click in all the colors in the pallete while holding the Shift button. Selection done, take a look at the image to see if the dashed lines are running around all the things you want. Then hit Ctrl+J to duplicate that layer, then recolor it using any method you like (if you dont know how, take a look back at the REPAINT part)

Now that you had repainted, it should be looking kinda like this one, that has just the new colors, but remember that you made a copy, and now we gonna reveal it. All we need to do is to erase all the parts you dont want, using the Eraser tool(E) in pencil mode, size 1 and 100% opacity. I recommend you to use the smaller size because doing so, with a good zoom rate, you can have total control of what you are going to do. As you erase the unwanted parts on the upper layer, the details of the other one appears, and it start looking cooler already :D. When cutting the layer, try to follow the lines of the picture, it will make the changes to look better and more credible. So I finished the erasing/cutting on the layer and the green guy is now looking like a Skrull, but I wanted some stuff to be red, what do I do? To make any other color on it, we just need to redo the steps until here: 1-Make another copy of the skin layer (select the layer that has the skin and hit Ctrl+J). 2-Change the colors of it(Using any method you like). 3-Cut the parts you dont want off.

You can do this as many times as you want, just keep in mind that the order of the layers WILL affect the final result, so be organized ;D.

Now we have a fully hero-dressed green naked boy, just missing some final touches and it will look great, but to proceed to the next step, first I got to fix up my palette, because I kinda screwed it up in the process, and the pal is there to be useful, right?

HAND DRAW
Ok, we are ready, lets start. If you look closely, you will see that hes still wearing that underwear, and isnt what we would want to wear in a fight, right? So were gonna take it oI mean, well change it. I wouldnt call the HandDrawing an easy technique, it requires a lot of sensibility to the force, good sense and, of course, hard work, represented by three concepts: 1. Proportion, the sensibility to the force: Sorry to say that, but you will NEVER be even an average spriter if you dont show some respect to the Math! Proportion was discovered to be used, and if you accept that its all in the numbers, your life will be very much easier, my young padawan. Fibonacci proportion is a really good start, check this link: http://en.wikipedia.org/wiki/Fibonacci_number Assuming that you took at least a look on it, Ill go onSo, as you did read on wiki, Fibonacci numbers goes kinda like this: There is another kind of proportion, that well call Double proportion, that grows by multiplying the previous number by 2. This make a sequence that grows faster, using less steps to reach a common number. Proportion is what bring the balance to everything you can make, so use it, for goodness sake! 2. Honesty, the best sense ever: Cmon people, isnt that hard to be honest, if you dont like some sprite you did, why dont you hold it a little longer, take your time to make something you will really like, remember it gonna have your name on it. If youre stuck in some part, dont be ashamed to ask for some advice. I use myself as example for that, since when I didnt know a single thing from now, I had so many good teachers that I could not name all of them, even the ones that doesnt know that I was learning from them. =D

3. Practicing, the hard work worth it: I know you might be thinking: Ok, now youre gonna tell me that I need to practice to raise my skills and all that boring stuff First, if you dont think you need to practice, please close this book right now and go play sonic, kid. I mean it. Well, it seems like youre still over here, so I can tell you: You DO need to practice to raise your skills and all that boring stuffhehe But thats the thing for everything in the world, even by playing a relaxing game, like Bomberman, you may grow your samurainess to the OMG level and be awesome or be just another annoying bad player, just like my brother. Again, its your choice.

Now, we were going to fix that ugly underwear, using the things we learn until now:

Way better, right?

If you did actually read everything until now, congratulations! You was being tested and you passed it! I had to test your patience to see if youre able to be a spriter, now that you had learned some stuff and were fine, lets learn all the cool stuff! Sometimes, some picture is almost perfect for what you need, but that almost screw all your work. It can be the arms that dont fit, or her hair isnt just like that, or even its missing a good pair of wings that I DO already have in another pictureits a shame you cant mix them up, right?

Well, you CAN do it, thanks to the

FRANKENSPRITING!
That will be explained on the next tutorial:

THE ART OF SPRITING II

THE MASTER TECHS

See you there!

Danilokao