The Art of Spriting

7/31/2019 The Art of Spriting

1/12

THE ART OF SPRITING

HOW TO EASILY BECOME A SPRITER

By Danilokao


2/12

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 X-

MEN 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 inthere.

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.


3/12

CHAPTER 1DO 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 inevery 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.


4/12

OMG GREEN

R: 0 G: 255 B: 0

WTF Pink

R: 255 G: 0 B: 255

CHAPTER 2DONT 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?

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


5/12

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 thatform 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 imagemenu>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 squarewith the color you want to change

and choose a new color for it.


6/12

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 stuffjust 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 Imagemenu>Adjusts>Curves (Ctrl+M)But be careful

when using this feature, it

tends to distort the

difference between the

color tones if overused!


7/12

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 theoutlinesand 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:


8/12

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 doesn t 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)


9/12

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 don t want,

using the Eraser tool(E) in pencil mode, size 1 and 100%

opacity.

I recommend you to use the smallersize 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 finaltouches 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?


10/12

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
http://en.wikipedia.org/wiki/Fibonacci_numberhttp://en.wikipedia.org/wiki/Fibonacci_numberhttp://en.wikipedia.org/wiki/Fibonacci_number


11/12

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?


12/12

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

Documents

The Art of Spriting