Introduction to Pixel Work (sprites and Pixel Art)

nacritico · Posted: Tue Feb 26, 2008 4:16 pm

Well people, I'm doing this because I've worked with sprites since years ago (almost 4 years now), and althought I'm not that good, I know a lot of technical stuff and pages. Also, I now that is very difficult to found usefull information about spriting in internet (Believe me, just this year I stared to found usefull stuff).
To make long history shorts, this is a how to learn to sprite tutorial, not an spriting tutorial itself.

So well, let's get started, shall we?...
1ºGetting starting (basic stuff)
The first thing you should know, is that when you are working with pixeles, you can work on 2 stuff:

Quote:

- Sprites (usually small pictures, used for video games or animation. They have various stances in order to animate them)
example:

example animated:

-Pixel art (usually big pictures. They have only one stance, because they are not done to be animated, but rather to be "picture" (single image).Also, they use to be very datailed, this means that they have a lot of work on them).
Example: http://www.spriters-resource.com/sega/sonic/maincust/pixelshadow2.png
Example of a Professional work: http://abysswolf.deviantart.com/art/Moonlight-Parade-55299284

so now, to work on your stuff, doesn't it??...
what you should do know is choose which program will you use to work. It really isn't that vital which one you choose (I've seen people do ARTWORK in MSPAINT, and do HORRIBLE STUFF in photoshop), but yet, it can help you or harm you. My advise is to select a program and keep on using so that you get used to use -That's the real key, getting used to a program.

Quote:

Here you have a list of programs:
for windows
for mac
for others (misc

(I personally use Gale, but it's a personal desition...if you wish, use MSPaint, there is nothing bad with it)

Ok; now let's get on working(really working these time). If you are about to work, there are 3 things you can do:

Quote:

1º It's call a recolor. It dosn't really implies work at all. Is just changing the color of an sprite. This case, look at the second image (megaman with differents colors)
2º An edit. This means graving an sprite, and use as base to create a new character. Note that these sprites tend to conserve the style (I'll explain what's style below) and try to be as different from the original character as its possible (You are not editing a character to make it look like the original character, are you?). In this case, the example is the thrid image.
3º A custom, original or scratch.This means creating your character from 0 (not edit, recolor or tracing - drawing the same as an image you have next to your sprite), "being original". In my opinion, this is the kind of thing that'll help you improving your spriting skills. Rather than recoloring or editing (believe me, I edited for 3 years, and I didn't learn anything). In this case, the example is the 4th image.

thanxs to wikipedia for that Image

of course, if you want to sprite, you should first now how to do sprite figures... so here you have some very basic stuff (it might seems dumb, but be sure to read it): http://www.spriteart.com/tutorials/01_lines.html

ok, Now, let's talk about style.
2ºStyle
note: here I use the word "Sprite", but it also includes "Pixel art"
Sprites themselves have a style. A style is made up from lot of stuff, including the following:

Quote:

STYLE:
- Metric: an sprite can be both NOT-ISOMETRIC or ISOMETRIC. If the sprite is Isometric, It meas that it doesn't take care about the metric at all (it doesn't excist), it delete the perspective 3D effect. Not-Isometric means that it respects the 3D effect of persepctive effect.
Isometric Example: http://pixel.nascimpact.com/images/splash2.gif
Not-Isometric Examples: http://img.photobucket.com/albums/v510/zephie87/adofthemon.png
Isometric tutorials:

Quote:

http://www.spriteart.com/tutorials/02_iso_1to1.html
http://www.spriteart.com/tutorials/02_iso_2to1.html
http://www.pixeljoint.com/pixels/links.asp?id=2254

- Bits (Number of colors/color limit): THis is the maximun amount of color the character can have. If you are spriting for a Nes game, the max number of colors is 8, so You'll have to make do with just 8 colors.
Example of 8 bits: http://www.spriters-resource.com/capcom/megaman/8bit/1-3/display.php?file=http://www.spriters-resour ce.com/capcom/megaman/8bit/1-3/12345mega.png
Example of 16 bits:http://www.spriters-resource.com/capcom/megaman/snes/7/display.php?file=http://www.spriters-res ource.com/capcom/megaman/snes/7/megaman.gif

-Number of shades: As you might now, a sprite has colors which are refeared as "shades" (the colors that are used to show shadows and lights). Some sprites tend to have 1 or 2 shades colors, while others one has some mores. This is sometimes related to the limit of colors (if you have to use few colors, you can't waste them in shading, now can you?)

-Color Pallet/color choose: When you draw a sprite in an style, it is obligatory to have a color pallet. This are the colors you are going to use for all the sprite work. The main reason for thisis because sprites with very different "colors", tend to look bad togheter. Usually, after choosing the maximun number of shades you are going to use and which colors you are going to use, you tend to choose your colors right there. Colors gives ambientention to a sprite work .A BAD CHOICE OF COLORS CAN RUIN YOUR WORK, HAVE THAT IN MIND.
Example of a dark ambientation given by the choose of dark colors: http://www.spriters-resource.com/konami/castlevania/

- Perspective: This means from where a character is being looked at. As you can guess, it changes a look if the character is looked from below, than if it's looked from above.
Examples:

Quote:

Mario looked from above: http://www.spriters-resource.com/nintendo/mario/rpg/smrpg/display.php?file=smrpgmario.gif
Mario looked from the side: http://www.spriters-resource.com/nintendo/mario/rpg/mlssf/display.php?file=http://www.spriters-resou rce.com/nintendo/mario/rpg/mlssf/mlss_mariobattle.png

- Proportions: There is not much to explain here. Sprites styles tend to have a proportions (an anatomy if you are drawing a living being). For example, if I'm drawing something chibi I'll make him a big head, while in a normal style, I'll make his head smaller
Example of chibi: http://www.spriters-resource.com/capcom/fighting/street/display.php?file=capcom_spf2_felicia.gif
Example of "normal": http://www.spriters-resource.com/capcom/fighting/vssnk/display.php?file=svcchaos_violentken.png

- Size: <Nothing to explain here really... how big people tend to be an stuff>

- Outlines: This is how an outline of character is. For example, you can have a single black outline outside the character, or don't have black outlines at all. Althought this seems dumb, shows sprites style a lot
Example of single black outline: http://www.spriters-resource.com/capcom/megaman/snes/7/display.php?file=http://www.spriters-resource .com/capcom/megaman/snes/7/megaman.gif
Example of double black outline: http://www.spriters-resource.com/nintendo/mario/rpg/paper/pm/display.php?file=pmreco3hp.png
Example of color outline: http://www.spriters-resource.com/capcom/megaman/mmz/1/zero.png
Example of color ouline with black ouline when needed for shade effect: http://www.spriters-resource.com/capcom/fighting/vssnk/display.php?file=svcchaos_violentken.png

Here you have an example of sprites with different styles (the ones from above) and with a similar style (the ones from below). It's pretty obvious that they look better togheter if they have a similar style:

3º LineArt
Line Art (as the name might suggest) means making an object just with "lines".
In order words, make a draw without painting it (just the lines). Usually they tend to be only white and black, althought you can use more colors than black in order to show the difference beetwen parts (*). To do a good line art, you first should have read the "Line tutorial", in order to know how to get a good line.
You should practice LineArt a lot because it's the basic step of any Scratch sprite/Pixel Art.
Here you have some examples of how a very good line art should be (not done by me):

Notes:
1(*) Changing colors on the outlines when doing a Pixel work is something very usefull (or at least, that I do). The secret is to draw the lines of the different parts of the different stuff with different colors...
what does this mean?? well, if you are making a person, use one color for the lines of his arms, another one for the lines of his body, etc.
Example:

2 Line Art is different from "chronomatic drawing". A Pixel Work made with just 2 colors is not necessary a LA, because it can be colored ("look to coloring above"). Here you have an example of a drawing made with just 2 colors, and yet, it is not a Line Art
http://www.pixeljoint.com/pixelart/12350.htm

4º Coloring

Coloring is something very difficult at spriting. I would say that is one of the things that defines the quality of an sprite. You should have a good color table choosen and you should be pretty cautios in which color you put where. Also, you should have in mind that there are a lot of optics effects in coloring, So it makes things difficult. There is something very important that you should now before you color,and is the following:
Colors give texture to an object: the color is one of the mains things that makes your object look as if it where 3D. So, a way to give "shape" to an object, is coloring it.
Example:

This is way some coloring technics, usually don't work, because they don't give an object it's shape.
When you color, you would have to think where the lights fall, and how it extends on the object. Is something very diffult to do, so you'll have to practice a lot to get it.
By the way, there is something Important that you should know: TRY TO SAVE IN COLORS!: Colors usually distract people when they are looking at an object, so unless it's necessary to add another color, try not to. Try to avoid colors which are way too similar and doesn't add anything to the sprite. An advice is Try to use two, three or four colors of shade, but no more.

5º Coloring technics
There are lot of coloring technics, so here you have a list of them (tutorials) and an opinion of them:
Pillow shading/Radial shading:
Pillow shading is very easy to do, but it makes an object loose it's texture. Unless you are drawing something very shinny from the inside (such as an "esmerald") I suggest you not to use it
Linear shading: Make the shading using lines
Linear shading is pretty easy to use too, but it makes the object look horrible. Avoid these under any suitation.
*there are others, but I don't remember them right now* *I'll update this*

6º Anti-alias; Reverse-antia-alias
I'll explain these later (I'm tired of writing right know). Here you have some tutorials:
Anti-Alias:
http://www.spriteart.com/tutorials/01_AA.html

Reverse anti-alias:
http://www.spriteart.com/tutorials/01_revAA.html

OTHER TUTORIALS:
http://www.pixeljoint.com/pixels/links.asp?id=2192

salu2's

PS: I'll complete these later... I'm a bit tired of writing right now Razz

...

ps2: please stick this

ps3: if you want to comment, comment, but please don't ask questions, I don't want to see this topic flooded of questions

The Joker · Posted: Tue Feb 26, 2008 4:20 pm

Holy crap, man.... this oughta help a lot of noobs like me a lot... Nice job...

Cor4fc · Posted: Tue Feb 26, 2008 5:20 pm

Post this in the SSF2 Stage Disscusion!! Laughing

HamburgerHelper · Joined: 16 Dec 2007 Posts: 2346 2259 100

...Sticky Plz!

nacritico · Posted: Tue Feb 26, 2008 8:35 pm

I'll probably expand this (I'm planning to expand it a lot, actually), just not today Razz

...
it took me more than an hour and a half to write that, and as you can guess, I'm already tired Razz

...

salu2's

Azrael · Posted: Tue Feb 26, 2008 9:56 pm

IMO, this is the best tutuorial we have here. If i was still a noob, this'd help me alot.

but if i were you, I'd emphasize starting edits on complex sprites, and then erasing everything except the line art and building off from there. Thats what i did when i first started spriting.

nacritico · Posted: Wed Feb 27, 2008 11:28 am

Phratt wrote:

IMO, this is the best tutuorial we have here. If i was still a noob, this'd help me alot.

but if i were you, I'd emphasize starting edits on complex sprites, and then erasing everything except the line art and building off from there. Thats what i did when i first started spriting.

never tried that... sems as a good way of trying shading though Mr. Green

...

salu2's

Azrael · Posted: Wed Feb 27, 2008 4:53 pm

I request this thread for a sticky!

nacritico · Posted: Fri Feb 29, 2008 12:45 pm

I can't believe this hasn't got sticked yet Look To Side

... gosh! ...
I'm starting to think that this will pass to history or get spamed with "stick this!" before it actually gets sticked...

pimp_named_slinkback · Posted: Fri Feb 29, 2008 4:42 pm

*pimp sticky*
I agree with Phratt. BEST SPRITE TUTORIAL HERE.

CheDDar-X · Joined: 02 Aug 2007 Posts: 5443 4558 0

pimp_named_slinkback wrote:

*pimp sticky*
I agree with Phratt. BEST SPRITE TUTORIAL HERE.

imagen he locked it instead...

lol.

this is a great tut BTW, it will help meh alotz.

Azrael · Posted: Mon May 05, 2008 6:52 pm

Maybe an update from time to time, and add some more pictures for things like anti aliasing.

Drei · Joined: 08 Jun 2007 Posts: 348 537 0

I know I'll get someone mad at me for this, but you REALLY need a better image for the style section, because you need to change ALOT more than just outline and colours. Which, even that example iamge doessn't follow well.

If you want good examples, look around Spriter's Resource for such things, especially on the custom sheets.

This does seem like a good tutorial for people who have started, and want to get better.

X-plode · Posted: Wed May 07, 2008 12:31 pm

Drei wrote:

I know I'll get someone mad at me for this, but you REALLY need a better image for the style section, because you need to change ALOT more than just outline and colours. Which, even that example iamge doessn't follow well.

If you want good examples, look around Spriter's Resource for such things, especially on the custom sheets.

This does seem like a good tutorial for people who have started, and want to get better.

Like me?

nacritico · Posted: Wed May 07, 2008 12:49 pm

yeah..
anyway, I think I'll try to make this tutorial again sometime(once I'm back home). I'll try to tidy things up, and to add more tutorials...
also, I'll explain exactly what pixel art means (because some noobs send anything like an sprite), and try to give good explanations why you should try not to recolor, and why you should always try not to pillow shade...

salu2's