Pixel Tutorial - Dibujo Pixels

7/31/2019 Pixel Tutorial - Dibujo Pixels

1/31

PIXEL TUTORIALBy Pixels

Pixel Tutorial IntroductionOctober 16, 2011 at 6:17 pm | Pixels | No comment

Ive been wanting to make an ultimate spriting and pixel art tutorial for a long

time now. There are hundreds of pixel tutorials out there on the internet; some ofthem are good, a few of them are great, but the vast majority of them are very,

very bad. Most of these tutorials focus on the obvious: tools, terminology, shading,etc; but rarely do they dive into the theory and core concepts that really teachsomeone how to create good sprites. Ive seen tutorials that read more like thoseold Ed Emberly step-by-step preschooler books, and they encourage mimicry but

dont actually teach. My goal with this tutorial is to teach you how to think in termsof pixels, to give you the tools needed to become great on your own. In otherwords, I want you to take something away from this that will hopefully change the

way you think about pixels.

Before we dive into this thing, I need to get some terminology stuff out of the way.Im going to be using the terms spriting and pixel art interchangeably.Technicallythey shouldnt be: pixel art is a very broad term that describes themedium as a whole, where spriting is very specifically about creating elements forgames (and Im not going to get into the argument about ripping graphics beyondthis: those kids who call themselves spriters and dont do anything other than ripand recolor other peoples work are phonies and its an insult to every legitimatepixel artist out there). To go even further, spriting doesnt cover backgrounds and

tiles, but I find that kind of technical classification nitpicky. BesidesI think thatsprite makes a pretty great verb, so Im going to be using it as a catch-all word.

This set of tutorials is aimed at people using RPG Maker (mainly XP and VX/Ace,because theres no size limit to the character sets and the scripting functionalityallows users to use any number of frames in animating), but Im positive thateverybody will be able to utilize the lessons here. I love the RPG Maker programsbecause Im a graphic artistand I cant learn a programming language no matterhow many times I tryand they provide a great premade engine for someone like

me to build something. I want to see more games that take advantage of RPGMakers great capability to use original graphics; and thats one of the major goalsof this whole thing. I want to encourage you to not be afraid to make your owngraphics for your game. Its easier than you think and well worth it. Theprepackaged RTP is a crutch that too many people lean on.

We can do better.

Thinking in ColorNovember 11, 2011 at 6:27 pm | Pixels | 1 comment

I spend a lot of time on a number of RPG Maker forums and a lot of that time isspent giving people feedback on their sprites. The most common criticism of minehas become something of a catchphrase and could even be thought of as a thesis to

this entire tutorial series: your colors need more contrast. Color choice makes orbreaks a sprite.

Colorsand the contrast between themare the basis of every sprite. Thatsexactly what pixels are: little blocks of color. Spriting isnt like sketching or coloring


2/31

in the lines; its about putting colors in the right places to create the illusion of

form. Ive seen a lot of tutorials that talk at length about lines and technique and

shading and blah blah blahbut pay very little attention to the absolute mostimportant part of pixel art: color, and everything that comes with it.

Take a look at this spriteit was posted in a critique threadon HBGames.org by a member named Norton.

Structurally, its not bad at all. Its based on a character fromMass Effectandthats immediately obviousand Ive never even played the game, so job well donethere. On the other hand, the colors are very flat because they lack significant

contrast.

This is what I did with itI changed very little of the sprite itself, but the updatedcolors make a huge difference. It popsit looks like it has real depth to it. Its thecolors that bring a sprite to life.

Color Words Worth Knowing

While there are more than enough resources online that go over the followingterms and concepts, I might as well write up my own. Note that most of the timethese words really dont factor into pixel artor rather; they do, but knowing the

exact terminology isnt really necessary. The biggest one to think about when itcomes to spriting is contrast, and Im going to be devoting a whole section to that

soon enough. But its still useful to have an understanding of these basic colorconcepts.


3/31

Color

The word color is really vague. When light is reflected off of any surface, youreyes recognize the color. From an early age, we learn that red, blue, and

yellow are colors. Today, lots of people think of colors as #FF0033, #003399,

or #FFFF00. But simply put, a color is a chunk of visual information thatencompasses all of the following definitions.

Hue

When little kids are taught their colors, theyre really being taught hues. Hues areeasy: red, blue, green, etc. A colors name is generally referring to its hue. Itspossible to think about hues as categories of colors. Take a look:

This line of colors all share the same hue: green.

These colors, on the other hand, provide a range of different hues.

Brightness/Luminosity/Value

On a technical level, these terms have slightly different meanings (so slight that itsnot really worth caring about; it has do with the mathematics of making colors, buton a practical level they have the same function). The brightness of a color is justthat: whether its bright or dark. A colors proximity to either white or blackdetermines its brightness.

Pretty much explains itself, right?

Saturation

A colors saturation is very similar to its brightness, but instead of light versus dark,saturation is strong versus weak. A color with high saturation will really pop, whilea color with low saturation will seem faded. For example, a highly-saturated bluewill shout Im blue! but the same blue with a low saturation would mope Imfeeling a bit blue today.


4/31

These three blues have the same hue and brightness, but drastically different levelsof saturation. The left-most color is so desaturated that its almost gray.

Trainer Tips!

A lot of people go overboard when it comes to saturationin either direction. While a

desaturated sepia-style color scheme can be really appealing, if it isnt used properly it cankill readability and make the entire piece look flat. On the other hand, if something is toosaturated it can literally be painful to look at. Keep a nice balance and remember thatcontrast is key.

Contrast

This ones my favorite, because when it comes to pixel art, everything is about

contrast. While the definitions above can be applied to a single color, contrast cantexist without two or more colors. Contrast is the difference between colors. Colorscan have contrast among their hue, brightness, saturation, or all of the above. Theimportant thing to remember is that colors with high contrast really stand out from

each other while colors with low contrast will blur together.

The contrast between the blue and the yellow is really high so it looks sharp, butthe lower contrast between the yellow and tan makes for a smoother transition.

In pixel art, I would say that contrast is one of the most important of these terms.So much, in fact, that the next article is all about contrast.

Read Between the PixelsNovember 12, 2011 at 7:35 pm | Pixels | 3 comments

Its time to talk a little more in-depth about my buddycontrast.

Yup, were going to have a whole section on contrast. It might seem a little boring,

but pay attention: everything else in this tutorial series is going to hinge off of theconcept that I present to you here. I say that I want to get you to think in terms ofcolor and contrastwhat does that mean?

When youre creating a sprite, you have a limited amount of colors to work with(these days, you might not have a limit on a technical level, but for the sake of

consistency you want to conserve colors where you can. this is why people createpalettes, which Ill be covering soon). You also have limited spaceextremelylimited. The entire purpose of pixel art is to create small images (typically sprites

and tiles for games with tiny resolutions). Small enough that each and every pixelthat means each and every colorwill affect the look of the piece. The goal of agreat pixel artist is to get the most out of each individual pixel. This is achieved byusing the right color on the right pixelthats easy enough to grasp.

But more importantly, every pixel needs to work for the image as a whole. When

youre working on a sprite, you want to zoom out constantly (or, if your art

program of choice allows, have a little preview window that shows what the spritelooks like at 100% or 200%). Keep the big picture in mindand a great trick to


5/31

making sure it all works together is to look at the invisible space between thepixels.

When two colors are directly next to each other, the human eye naturally builds abridge between them: it creates an invisible color that isnt seen or even processedconsciously. Thats how contrast exists in the first place; in fact I would argue that

contrast itself is an invisible color. And thats the key to this section, and the bigidea for you to take away from this section: contrast itself is an extra color.

Heres a visual: imagine that each pixel is a brick. The lines between them arevisible, but are formed by the contrast between the pixels.

Trainer Tips!

The idea of representing the colors between pixelswhen applied to animationis a pretty

advanced technique known as subpixeling. But for the time being put that our of your mind:this is about getting the most out of your colors by using contrast.

The yellow on the end has two functions: its the brightest red as well as thebrightest green. The only reason that this works is because of the contrast with thecolor that its next to. The contrast between the yellow and the mid-red is veryclose to the contrast between the yellow and the mid-green.

When the yellow is placed next to the green, the eye creates a bridge between thetwo colors that allows the yellow to function as a green itself (in other words, theyellow takes on an invisible green hue). Likewise, it becomes red when next to theother reds.

Lets take a look at how this works in practice. Here are a couple of sprites.


6/31

Arent they adorable? The same yellow is used on both of them, but on the boy it

functions as the brightest color in the skin tone. On the frog, it completes the greenas a highlight and also works as a light color for the belly.

Now to drive the point home, we need to take it further. Look what happens whenwe put that same yellow right up against the red or green without the middle tone

as a buffer.

The contrast between the yellow and the other colors is much greater than it waswhen the yellow brushed up against the middle color. The eyes dont have an easytime making a natural bridge between the colors, and as a result the colors standon their own.

The contrast between Links hair and his hat is much sharper without the lightergreen color as a buffernotice that the green is still used as a highlight on the topof his head but isnt touching the yellow.

So whats the lesson of this section? Ive got to repeat it again: the contrastbetween colors becomes a color itself. I know that I havent gotten much into

implementing the idea yet: like I said before, the purpose of this was to get youthinking and seeing your pixels as more than the bricks, but the stuff between themtoo.

While were at it, notice that the skin of his face is the same color as the middletome that we used above between blend the red and yellow. But because its used

in a big flat area, the contrast between it and the yellow is sharper than it wasbeforean idea that leads very nicely into the next section.

Using and Choosing ColorsDecember 21, 2011 at 6:46 pm | Pixels | 5 comments

Before I dive into the creation of color palettes, I want to explain how to maximize

each color, to get the most out of every color in your palette. Heres an examplecolor ramp:

Nothing about it seems particularly special. But notice that some of the colors are

arranged in very thin bands while others are in larger blocks. Ive arranged it thisway to show how some colors are used as larger colors (cluster colors, to be used


7/31

as a base shade for a surface), while others are in-betweens (buffer colors, tohelp blend the clusters together).

What happens if we change the ratios a little bit?

This ramp uses the same colors, but as a whole it looks lighter because of the way

the colors are usedthe relative amounts of each color are different, the clustersand buffers have been reversed. The result is a shift in the entire ramps saturation

and brightness. The contrast, however, stays at at the same level of pleasantreadability.

Whats the point of this example? To show that you can push your colors to workfor you, rather than be confined by them. Ive seen a lot of people trap themselves

in with their palettes because they were too afraid to push their colors.

It leads to another point of contrastone that you will constantly be using as a

good pixel artist: a color looks different depending on the colors around it, and howmuch of those colors are used.

Trainer Tips!

Why conserve colors? In the old days, hardware was a lot simpler and games had veryspecific limits about how many colors they could use. Getting the most out of each color wasperhaps the most important aspect of pixel art back then, and the idea has carried over totoday. Modern games dont have those kinds of limits, but its still good practice to keep yourpalettes as small as possible. Not only is it much easier to manage your arts colors with a

tighter palette, but it will create visual consistency that will hold everything together.

So its time to make a palette. There are a lot of ways to go about choosing yourcolors. A lot of people will try to hammer out a definitive palette before they even

start workingIm guilty of that myself. Its not the best approach, though. Thebest palettes are tweaked as they are being used. Dont feel the need to trapyourself into something.

But where to start? Usually with some basic color ramps.

A color ramp is a grouping of colors that give you a range of shades to work with,usually arranged from darkest to brightest. This is a color ramp:

Its not a particularly good one, though. Its what we call a straight rampbecause it goes straight from dark to light. In other words, the only thing thatchanges is the brightness or luminosity, but not the hue or saturation. In a goodramp, the hue will changebecause thats how light works in real life.


8/31

In this example, the darkest shade hints towards a purple or red hue, while the

lightest shade is green (on its way towards yellow). As long as the colors in themiddle are recognizable, the overall huge of the ramp will be preserved. And dontforget to always keep contrast in mind.

This is called hue-shifting.

Trainer Tips!

Typically, darker shades will have less saturation and be skewed towards blue or purple,

while lighter shades will be more saturated and skewed towards yellow. But while thats agood starting point, dont feel the need to confine yourself to those rules. Once yourecomfortable with making strong color ramps, be adventurous!

A color palette is a collection of your color ramps, and its what you would use tokeep your colors organized. There are lots to talk about with palettes, so Im goingto start by showing you an example of what not to do.

I see this a lot. And when I say a lot, I mean I see this constantly. Everywhere. It

seems to be the first thing a new pixel artist will make when trying to come up withtheir own colors.

So why is it bad? Aside from the immediate problem that the ramps are straightramps.

The big problem is that this isnt a unified palette, but a collection of individualramps. It doesnt appear to be created with the big picture in mindeach color wasbuilt individually, and as a result the palette has a disconnected feel. The reds were

created darkest to lightest, and then the yellows, and then the greens, etc etc.Theres no overlap between the colors; they dont mix together at all.

This is how I build a palette:


9/31

Sure looks different, doesnt it? When I create a color palette, Im not afraid tomake a mess. I treat it like a real painters palette (remember that pixel art ismuch closer to painting than drawing).

The idea is in the unity of the colors. Each ramp branches away from the samedarkest shade and eventually reach the same lightest shade (notice that the lightyellows in the opposite corners are in fact the same color). As a result, the entirepalette is cohesive. I suggest that you take a similar approachdont feel the need

to arrange your ramps into neat little lines just because youve seen themorganized that way before. The colors need to flow into each other, so keep itorganic. You can always rearrange them afterwards.

Before we move on to the next section, heres a scary evil alien:

The sprite on the left is made with the first palette (the bad one with the straight

ramps). The obvious problem is that the saturation is way too brightits aneyesore. More relevant, the blue and the green dont mesh together very well atallthe contrast is so high that the sprite doesnt feel cohesive. At the same time,

the contrast within the color ramps (particularly the green), is too low. The result isan awkward mess: the green areas look very flat, but the blue is so different that isstands out too much.

The guy on the right uses colors from my more organic palette, and its obviousthat the colors blend together in a natural wayif you look at his legs, you can seethat the darkest shade of blue works overtime as the darkest shade of green.

That should cover colors and palettes, at least the important stuff. In the nextsection well start putting this into use and making some sprites from scratch.


10/31

Form and LightJanuary 3, 2012 at 1:50 pm | Pixels | 5 comments

If youve been following from the beginning, now you understand the importance ofcolors, and just how crucial contrast is. Youve even developed a color palette of

your own. Its finally time to put that knowledge to use.

Were going to start off by covering the basics (more basics?): form and light. Inmy introduction, I stated that my goal with this series isnt to create a how-to

guide, but to help educate and train your mind so that you have the knowledge andskills to become a good pixel artist. The most aspect of that method of teaching isthat its important to get you thinking about your pixels in the right way. So heressomething thats important to remember: When you create something with pixel

art, you want tothinkthree-dimensionally. This is true of any kind of art,not just pixel art.

The trick to thinking three-dimensionally is in the approach. Ive seen hundreds ofpixel art tutorials and so many of them teach you a simple step-by-step process:make an outline, fill it in, then shade. In my opinion, that approach is absolutelyincorrect. Surethere are a lot of tremendous pixel artists (certainly some arebetter than me) who take the outline-first approach. But the important thing totake from this is the mindsetthe way to think about your pixels and your art.

So lets dive right into it.

Light Creates Form

The key to thinking three-dimensionally is about thinking in terms of form rather

than shapes. The world that we live in isnt made up of shapes, its made up offorms. The difficulty in creating pixel art comes from rendering those three-dimensional forms on a two-dimensional plane (the computer monitor).Fortunately, the human eye naturally looks for things in three-dimensional space,so it isnt too difficult to create the illusion of depth.

This is a shape:

And this is a form:


11/31

Simple, right? Ashapeis two-dimensional: its a line drawing on paper.

Aformis three-dimensional and hasdepth. The difference between a squareand a cube is that one is a shape and one is a form.

Thats not a particularly hard concept to grasp. The next idea is important to keep

in mind when representing forms: light. A form is only as good as the light source(or sources) that defines it.

Lets look at some slimes:

Arent they adorable?

Each slime has the same formif you take away the lighting, all three of them usethe exact same silhouette. I started these by creating the silhouette and let thelight tell me how to color them and fill them out.

You can clearly see the forms because of the lightthelight createsdepth, and depth is required for three-dimensional readability.

Trainer Tips!

Your light source is more than just directionit affects your colors, too. When you spendmore time working with colored light sources, youll be able to take advantage of colored

highlights and shadows for a really cool effect. But for the time being, your palette shouldalready be taking light into account thats why we talked about hue-shifting in the previoussection when we chose our colors.

When youre just starting out, I suggest that you use an arrow to indicate lightsource like in my example above. After you make a few sprites, keeping lightsource in mind should become second nature. Thats the purpose of this section of

the tutorial: constantly thinking about every sprite you create in terms of its formsand light source will help you create sprites with more depth.

Sculpting with Form


12/31

Whats important to think about is how it will affect your art. Lets look at it in a

more practical example. I managed to dig up an old sprite that I made (around2007).

Im almost embarrassed putting this on the internet today. Why? Its really flatwhen I made this I paid little to no attention to thinking about the character interms of three-dimensional forms (and because the colors have pretty poor contrastand no hue-shifting, among other problems). When I made this sprite, I started

with an outline of what I thought was a standard RPG character, and then filled it

in. The problem was that I wasnt thinking about how an actual human would berendered in three dimensions: instead of thinking about the individual forms thatmake up a human, I was thinking about coloring in my outline.

The next sprite is more recentI made it in early 2011.

Huge difference, right? Ignoring the colors and the hair, the biggest fundamentaldifference in these sprites is the attention to form. What changed between 2007and 2011? I realized the importance of spriting forms-first.

When I created the newer sprite, I didnt start with an outline: I started with asilhouette and some highlights, and worked at sculpting and refining. On top ofthat, I thought more about the human body and modeled the sprite on an actualpersons anatomy, rather than basing it on a general idea of RPG sprite.

What is the big idea of this tutorial? Unlike most other pixel tutorials out there, I

urge you:Do not start with an outline but start with asilhouette.

Starting with an outline will change the way you think about your sprite: it willnaturally put you in a coloring book mentality, which will inevitably make theentire sprite look flat. If you think about the multiple forms in three-dimensionalspaceand how they would be rendered when they are lit up by your light sourceeverything will come together in a natural way that conveys depth.

Trainer Tips!


13/31

A lot of great pixel artists start with the outline firstIm not saying that its the wrong way

to make a sprite. There is no wrong way. But the great artists who take that route haveexperience thinking in terms of forms and light to begin withthe process that Im teachingyou will help you visualize those forms as you create them. Once you get the hang of doingthings this way, you should feel free to experiment with other methods.

This is why pixel art is more like painting or sculpting: youre working with aMATERIALpixels. Pixel art isnt about your strokes: its about building.

Sculpting with Form

So lets put it together and make something new. Open up your art program of

choice and follow alongyou dont have to create the exact same object, but Idlike for you to take a stab at making something similar. Make an object with arelatively simple form, choose a light source and go to town bringing it to life.

In my example I made a barrel object for an RPG. In most RPGs, the light source

will be pretty easy: a straight top-down that allows for easy mirroring. Start withyour basic silhouette and sculpt your form until you have something that looks likethe object, and then add the details to give it some personality.

Leave a comment and show me what youve got so far.

In the next section well use what weve learned to start putting together an RPGcharacter.

Creating an RPG BaseJanuary 6, 2012 at 12:33 pm | Pixels | 7 comments

In theprevious section, I spent a lot of time going over the importance ofform and light sources. I tried to convey the importance of creating forms from

shining light onto silhouettesan approach to spriting that emphasizes depth inthree-dimensional space. Today, were going to make use of that technique andcreate a sprite base.


14/31

Because most people reading this are probably developing an RPG, this sprite is

going to be made for a game with that kind of traditional top-down perspective(though not quite top-down exactlyflawless perspective can be sacrificed inexchange for heightened readability, as long as the proper perspective is correctly

suggested). If you want to make a sprite for a different kind of gamelike aplatformer for example, you could use the same technique but from a straighter

perspective or maybe with a different light angle.

Starting is easy: I always start by suggesting forms with silhouettes.

In this example, were keeping the elements of the sprite separated. In practice I

dont usually do this, but in my minds eye the process is there. When youre firststarting out, it might be easier to visualize your forms by splicing them like this,and then bringing them together after youve begun to give them some three-dimensionality. Otherwise it might be difficult to mentally keep your pieces separatewhen theyre meshed together into a silhouette blob.

Trainer Tips!

Where are his arms? Personally, I add the arms after Im happy with the torso and legsit

helps me create better-looking proportions. Theres no reason you cant be working on thearms at this step, thoughjust paint the cylindrical forms like you would with the legs.

The sprite begins to look like a person in the next step when we apply somelighting.


15/31

A second color joins the first, but it isnt particularly detailed. It does succeed ingiving some depth to the imagethe head looks like a head and the torso looks likea torso. The legs arent quite perfect, but its clear that they have a segmented

cylindrical form. Now that its starting to flesh out a bit, we can safely pull thepieces together for the next step.

Now its beginning to look like a real sprite.

Another color is added: number 3 is our darkest shade and while it will function asour outline color, were using it now to further emphasize the darkest shadows andcurves. Dont go overboard with itthink about your light source.

A fourth color is added too, but I havent applied it to the body yetIve only usedit here to give the head some more definition.


16/31

At this point were satisfied with the basic forms and the initial construction. With

the next step, our goal is to refine, and it brings the sprite to a much more human,nearly complete, level:

Not only have we finally created the arms, but we begin stretching our colors torefine the sprite and start filling in some important details. Color 4 spreads out

across the body, becoming a useful highlight, which allows for 1 and 2 (the originalcolors that we started with) to become useful as our primary midtones. At the sametime, the addition of color 5a buffer between colors 3 and 1becomes important

for shadows, which further emphasize form by expanding on the depth of thesprite. With these additional colors, we refine the cylindrical forms of the torso andthe limbs. Weve also given more definition to the headincluding ears, whichmake it look more human and help create personality.

Trainer Tips!

Youll notice that the highlight on the top of his head has changedwhy? Its a hairline now.You dont have to take this approach if you dont like it; you might find it more helpful tokeep to a pure-skin base and make the top of the head brighter from the direct spotlight. I

find it useful to create a hairline like this because most of the completed sprites will end uphaving hair, after all. But its a personal preference. Do whatever you feel comfortable with.

Our sprite is shaping up nicely and looks nearly complete. All it takes is some morerefining:


17/31

The final color is added: color 6 isnt used very much, but it provides somehighlights that make for a finishing touch. The heads form is further refined withthe use of the new highlight color, and now that the arms are attached the handsand shoulders are given proper definition.

Trainer Tips!

This particular sprite has an even widththe horizontal width of the sprite uses an evennumber of pixels. In other words, it doesnt have a single line of pixels that go down themiddleits missing a distinct line of symmetry. It might be easier for you to create a sprite

with an odd number of pixels. Having a single line that goes down the center of your spritewill generally make things much easier, especially when it comes time to start puttingclothes on him. Again, do whatever you think is right for you.

The sprite base is more or less complete at this point. You can keep plugging awayat it until youre satisfied, but be careful: its entirely possible to obsess over detailsfor hours. As I look at it now, I can see little things here and there that can still be

fixed, and I might go back to make little changes. But realistically, Im okay withcalling it finished.

There are two important things left to do with it: animate him, and start makingsome characters (with clothes!) based on him. Well save those for another time.

Good luck, and let me see what youve come up with. Leave a comment or shoot

me an email.


18/31

The RPG Bases Four DirectionsJuly 9, 2012 at 8:37 pm | Pixels | No comment

In one of myprevious spriting tutorials, we created the south-

facing view for an RPG base. Before we can jump into animating that basewith a walk cycle, weve got to spin him around! In most RPGs, your characters willbe able to walk in four directions (some RPGs use eight-directional movement, butwere not going to get into diagonals right nowmaybe in another tutorial).

You should remember this guy:

We want to create two other versions of this sprite: north and east/west. Becausewe are just working on creating the base for the character, we can cut some

corners and make a single side-view sprite. I strongly suggest that when it comesto creating your actual character sprites (especially for important characters, like

your heroes), youavoidthe flipping shortcut. But the purpose of the base is tocreate a guide on which to build your characters, so in this case, its okay to createa single side-view and flip it.

The first thing that I want to do is create some guidelines. Its important that nomatter what direction the sprite is facing, his proportions match up.

In this example, I use different colors to keep the guidelines straight. The red onesfall outside the sprite, and give me the top and bottom borders so that the overall

height is consistent. The orange lines signify the shoulders and the ankles, and theyellow lines meet with the chin and the crotch.

Trainer Tips!


19/31

You can use less guidelines or more; as long as you have a way to keep your proportions

consistent across all the views. For example, you could put a guideline at the bottom of thechest; or the top of the forehead. However, note that I intentionally chose notto put aguideline at the hands or elbowsthose guides might be useful for creating the north-facingsprite, but when it comes to the side-view I will omit the arms and draw them in afterbuilding the torso.

Once weve gotten our guidelines laid down, creating the other directions is a

simple matter of re-drawing the sprite. We can go back to thesteps explained

in this tutorial. It can begin to feel a little tedious when you are redrawing thesame character multiple timesbut such is the nature of pixel art (trust me, this isnothing compared to the tedium of animation).

Which view you want to create first is up to youthe side-view or the north-facingview. Personally, I always begin by creating the north-facing sprite (after the south-facing sprite, of course). I find that its easy to keep the proportions the same. In

fact, heres a hint: the silhouette for your north-facing sprite can be the same (orvery close) to the original silhouette of the south-facing sprite. Its a useful trick to

making sure that the proportions are accurate: to get started on the north-facingview, just copy the south-facing view and fill it in. After that, its just a matter ofsculpting and refining, like we did before.

The side view is more difficult, but the process is the same.

The biggest difference is in the creation of the silhouette: unlike the north-facing

view, we have to create the side views from scratch. The most challenging aspectof this step is to find a width that works well with the style. If the side-views are

too thin, the sprite will look awkward then it turns. If they are too thick; then thecharacter will look strange. Its important to find a nice middle ground where thecharacter will look natural when he turns to the side.


20/31


21/31

Before we dive into animating or clothing ourRPG Base from theprevioustutorial, were going to take a break and make something that people seem tohave a tough time witha grass tile.

Im going to cover a very important topic in this section that will be important to

know when going forward, so if youre itchin to do more with your naked RPGsprite, bear with me. Itll be worth it.

The focus of todays article is going to be on tiling and pixel clusters.

What is a Cluster?

A pixel cluster is a group of pixels of a single color that work together to representa shape or a plane. Youve been using them all along, but now that were starting todive into work thats more focused on detail, its time to start paying specialattention to them.

Do you remember this guy, fromthe section about contrast?

You can clearly see that he is made up not of individual pixelsbut groups ofpixels. The most immediate example is his hair: a single yellow cluster of pixels isenough to represent the shape. If a single pixel within that cluster is changed, theentire shape of the hair changes. All of the pixels within the cluster work together

as a group. The difference between pixel art and traditional art is that a single pixelcan drastically change an imagethis is because of pixel clusters.

A good pixel cluster portrays a surface on your three-dimensional forma plane. Byplacing clusters of different shapes and colors next to each other, you assembleyour form by suggesting the relative positioning of the planes. Maximizing the

relationships between pixels to create clusters (and the contrast between theclusters) is how you give your image depth.

Heres a simple leaf segmentthe idea is to show that the image is made ofclusters. The first cluster is hardly recognizable as an object at all: its just a blob ofgreen. But when we add a second cluster to it, depth is createdthe eye recognizesthe two clusters as separate planes that are connected. The difference in colors

conveys light; and the light creates depth. In the third image, the leaf is stillformed of two main clusters, but additional buffer colors are added to ease the

transition.


22/31

With our understanding of pixel clusters, we can dive into making use of clusters tobuild our grass tile.

Authors note: This section about clusters might fit better in thetutorial on Form and Light. Remind me to consider shuffling

things around when the full series is finished.

Creating the Grass Tile

This example is for an RPG perspective, but the same ideas can be applied easilyenough to a side-view perspectivein fact a grass tile for a platformer would beeasier because it only needs to tile horizontally rather than on all four sides. Theideas will be the same.

I start with a blank squarein this case our tile is going to be 32 pixels by 32 pixels(3232) and fill it with a single base shade of green.

Trainer Tips!

In classic SNES games, tiles were 1616, and that isnt a bad starting point. I use 3232

because thats the size of the tiles that RPG Maker VX Ace uses. The size of your tiles willvary depending on the engine you are using for your game (or if you are coding it yourself).A lot of modern games dont require specific tile sizes at all, and you have a lot of freedomwith making objects and tiles at whatever dimensions you want.

On top of the base green Ill create some really basic clusters to look like littleclumps of grass. I usually start with the edges first. Why? To make tiling a loteasier. Tiling (as a verb) is an important (and tedious) part of making tiles for game

graphics. Its vital that your graphic can loop with itself. Since this is a grass tile foran RPG, we want it to loop both horizontally and vertically: it should be able torepeat seamlessly.

There are lots of ways to make sure that your tile tiles wellIve seen tutorials that

teach you how to cut up and rearrange your tile so that all the sides line upperfectly, and that method is just fine. Personally I think that its a bunch of extrawork. The easiest (and most efficient) way for me is to draw around the edges first.

For example, if I draw half of a grass cluster, Ill just draw the other half on theother side of the tile.

Take a look:

Make sure that your clusters line up nicely: remember that something that goes offthe edge on one side will loop around to the other side, and something that goes off

the top will loop around to the bottom.


23/31

And then Ill add a couple more. I used a different color here to make it easier forme to visualize how the clusters will connect.

If youre not used to visualizing the loop in your head, remember that you canalways copy and paste your tile to see how it looks when repeated.

After I have some satisfying edge clusters, its easy to fill up the middle. Hereswhat the tile looks like after I lay down the basic clusters to begin with:

It tiles nicelyits hard to tell where each tile begins and ends. There issome repetition, but at this stage that isnt too big of a deal as long as you donthave any glaring lines.

Since weve established that it tiles okay, we can eliminate the different colors for

the clumps. Go ahead and start with some basic shadingremember to keep in

mind light and form.


24/31

Its starting to shape up: each clump of grass has depth to it. If you see any

serious problems with the tiling, now is the time to fix it. It should look like grass atthis point; you know what your grass tile will look like when its finished. At thispoint, the hard part is over. What comes next is just more shading and polish.

Trainer Tips!

You might have noticed that the colors are changing as the tile progresses. As I work withcolors, I will continually modify the palette to suit my needsand you shouldnt be afraid todo the same thing. Dont feel constrained to the color palette that youve created for

yourself. Most pixel art programs will allow you to easily change your colors in a clean waythat will update the entire document.

Also, I usually use a separate palette for the background tiles with less contrast than thepalette I use for the characters. A lot of the major base colors will be shared between thetwo palettes, but its important that the characters and objects pop out from thebackgrounds. When youre creating art for a game, readability is always the most importantpriority.

Take each clump of grass individually and shade them to give them depthremember your light source and think about form. Dont worry about creating

individual blades of grass: that will create a noisy effect that will only distract theplayer. You want to suggest the larger form. Emphasize the bunches:


25/31

Its looking pretty soliddefinitely a grass tile. The only thing left to do is fill in

those ugly gaps between our little clumps. Its pretty easy, really: you only need touse one color and create some clusters to suggest more leafy blades between thelarge ones. It creates a texture that gives some more depth and breaks up themonotony of the valleys.

The effect softens the entire tile and helps blend the grass nicely. Note how smooththe entire tile seems nowthe hardness of the initial stages is gone, but theres

just enough contrast that the grass texture is immediately readable. Its importantthat the final colors of your grass tile are soft enough so that they do not distractthe eyes from the character or object sprites. For all the work that we put into thegrass tile, we dont want the player to notice it. If we do our job right, the playerwill feel the grass without having to look at it.

And when were happy with those final softening touches, we can call it finished.

Hopefully you are comfortable making a grass tileId love to see what you have sofar; leave a comment or hit me up on twitter. Dont be afraid to experiment! Now

that you can make a grass tile, try your hand at other textures too. The process isthe same, even if the shapes will be different:


26/31

Next time we can get back to our sprite.

Building on a Sprite BaseJanuary 23, 2012 at 2:32 pm | Pixels | No comment

Okay! Its time to dive into creating a character sprite. Like my previous tutorials,

this is going to be focusing on a sprite for an RPG style, but the same ideas applyfor any kind of style or perspective. Its not about following the steps that I lay outhere, its about seeing the process and understanding the thought that goes into it.

Were going to start by picking up where we left off. You remember this guy,right?

I feel like making a heroic character for a modern-set RPG, and this base is going tobe the starting point for the sprite.

Trainer Tips!

Its not always the right idea to start from a basein fact I would actually suggest that its

not a good habit to get into. Confining yourself to the limits of a premade template can stiflecreativity and prevent your sprites from having individual personalities. It is typically mosthelpful in an RPG where you need to mass-produce NPCs in a consistent style.

If youre working on a different genre, like a platformer, then I would suggest not workingfrom a base at all and creating each character individually.


27/31

Dont think that you have to stay perfectly to the form of the base. Its not a

statue, treat it like clay: you can stretch it and move it as you needdo what isbest for the character you have in mind. If all your characters have the exact samebody shape, they will become dull pretty quickly. I would suggest that the more

willing you are to exaggerate your base for each character, the more personalityyour sprites will have. It only takes a few minutes to come up with variations and

the results are worth it.

But for the purposes of the character that I want to make today, were going tostick with the regular proportions.

The first step is easy, especially if you have your characters design in mind (or areworking with a reference or concept art). Like we did when we first made the base,we want to block out chunks of silhouette to create a base for the forms:

Hes got a shirt, jeans and shoes, and hes going to have some slick spiked hair.See how the bottom of the shirt curvesthats because of the RPG perspective, andits something youll want to keep in mind.

Note that I blocked in right over the details on the base. When a lot of people startto create a character on top of a sprite base, theyll simply recolor the skin. I

strongly suggest that you dont do thatthe result is that clothing is awkwardlyskintight and it doesnt cling to the body in a natural way. As always, you want towork with the three-dimensional form in mind, and the best way to do that is toapproach your pixels as if they were a sculpture or painting. Remember that you

arenotsimply editing the base, you are using it as a guide to creating a character.

As you can imagine, the next thing we do is start with our preliminary shading.Define those forms!


28/31

Starting to look pretty classy. I gave him a splash of green on his shoulders so hisshirt has some more personality, and the hair has some clearer definition to thespikes. So far, so good. Lets keep at it and do some more refining:

Pretty solid, hes nearly finished. But theres a huge problem: I said that I wanted

to make a hero. This guy doesnt look anything like a hero, but more like a nobodyNPC.

While the sprite is passable right now, it doesnt have the extra oomph to give itcharacter. To really take him to the next level, we need to add some more touchesand details that will make him stand out. It doesnt really take much:

Ive added an extra color and changed the shading on his shoulders to have a more

vivid pop, and his shirt has a green trim at the bottom. And his jeans have moredetail now, among other smaller changes. Now hes looking a lot betterhe feelsmore like a recognizable character. Its possible to take it even furtherdepending

on your plans for the character and the setting of your game, you could go anydirection when it comes to accessories and outfits. Personally, I like to keep things


29/31

simple and bright for readability purposes (and because it makes animation a hellof a lot faster).

Speaking of animationnext time well cover the basics. Look forward to it.

Basics of AnimationFebruary 5, 2012 at 1:10 pm | Animation, Pixels | 7 comments

Animation is ahugetopic, and Im not going to pretend to cover everything. Thistutorial is only going to cover a few of the most basic ideas that will be importantgoing forward in pixel artif youre interested in animation (and even if youre not),

you should search around for more detailed articles (or books) about animation.

Watch any old school cartoon (Mickey Mouse, Looney Tunes) and youllsee the following techniques used all over the place. Animating for pixel art isdifferent from traditional animation because you wont be animating entire scenes

at a timemost of the time youll be working with individual sprites: characters andobjects. But the useful tools and principles are the same. The following techniques

are used to give an objectweight.

As weight guides motion, simulating weight is how good animation becomesbelievable.

Squash and Stretch

Lets start by taking a look at a bouncing ball thatdoesntsquash or stretch:

Kinda boring, isnt it? The animation is functionalbut nothing more than that. Theball (in this case its really just a circle) is only moving up and down along a path; it

hardly seems to bebouncingat all. This kind of animation is flatno attention is

paid to the objects weight. The actual object doesnt change at all within theanimation; it only moves.

In the next example, Ive let the ball change within the animation in a way thatsimulates weight:


30/31

A lot better, huh? The ball actually looks like its bouncing (or jumping!) this time

around. It has depth. And it has characterthe eye has an easier and more naturaltime following the animation.

The shape of the object changes as it moves (though the overall mass or volume

stays mostly consistent). While the object moves vertically, itstretchestomatch the movement. And when it stops or slows down, itsquashestoemphasize the slowdown.

This is the basic application of squash and stretch.

Here are the frames of the above animation all laid out:

You can really see the arc of the ballthe most dramatic part of the animation isthe way the object deforms when it bounces off the ground. The individual frameslook strange; but the end result is a fluid motion. Dont be afraid to exaggerateyour objects proportions within an animation: as long as everything lines up in theend result, the individual frames can get very distorted. And often it leads to good-looking results!

I love squash and stretchthe more the better. Check out this monster animationthat I made for a platformer project:

The stretch when the enemy moves up looks really tense because the way thebody gets thinner at the same time that it gets longer. And when the tension is at

a peakthe enemy

snapsshut. The force of the snap seems strong because of

the single frame of distorted squash when it hits the ground.

Think about how you can apply squash and stretch to your own animation. If you

find that it is lacking in power and needs that extraoomph, most likely you canfind something to distort. Remember that you can get away with exaggerating inanimationand often the more the better.

Anticipation and Followthrough

When I used to play tennis, I was taught that hitting the ball wasnt the most

important part of the swing. The important part was anticipation andfollowthroughand hitting the ball just happened between them. If you anticipatedthe ball and drew back the racket, and then followed through with your swing, the


31/31

ball would go exactly where you want it to. Dont think about the actual moment ofconnection; think about the arc of the swing.

In other wordsthe focus of your animation should be on what comes before andafter the moment itself. The eye will naturally understand the motion and make theimportant connections, and it will also look more powerful.

Action is defined by what precedes and follows the action.

Check out this cannon, from the same project as the monster above:

Its pretty squashy and stretchy in places, but the reason Im using this cannon isto demonstrate another principle that should be at the core of anyanimation: anticipation and followthrough.

The cannon pulls back in preparation of firing. And thenin a single frame, it is instretched into the air and settling back into its starting position. The extended

animation is in the beginning and end of the action itselfwe dont necessarily needto see the exact moment that the cannon fires: the entire sequence will give theimpression with much stronger impact.

Like I said beforethere is a lot to animation that I dont plan to cover in thistutorial series, but these are some principles that are absolutely vital to understandif you want to go forward in animating pixel art. Now that you have a basic

understanding of these ideas, we can start putting them to use.

See ya next time, when well start putting these ideas into practice and make asimple animation for a character sprite.

Documents

Pixel Tutorial - Dibujo Pixels