Track this topic | Email this topic | Print this topic

Figured this might arouse interest here too. I thought I'd describe my technique for creating sprites, after the sprite thread a little while back. I've found myself forced to scale the sprites for Endless Saga slightly because they looked too pixelated to be appealing. I described the method I used to make it look smooth on the ES boards, and figured I'd go all out and share both my method for drawing sprites and for resizing them without losing any quality with you guys. Enjoy.



1- The face. U-shaped for male characters, V-shaped for female characters. This is a male character, so it's U-shaped. We draw the outline, then fill it in with a flesh tone.

2- Eyes. Easy to draw. Pick a dark color and draw two vertical strips 2 pixels high, 1 pixel wide. Note the placement: bottom pixel touches the intermediate jaw pixel. Add a white pixel next to the eye for the whites, then add eyebrows (just two lines over the eye; usually, the right one is three pixels long but I made it two for this one, to help with the shadows I plan on tossing in in that region.)

3- Shading. This character has no hair so I won't have to edit this, so I might as well do it right now. |_ -shaped edges usually get drawn a pixel darker than the rest of the face. You wouldn't need this many shades, but I plan on making this guy's face slightly obscured.

4- The body. This character has a robe. All's that matters now is the outline, we'll get to additonal bits later. Fill it in with the basic color you plan on using.

5- The arms. Two pixels wide, with shoulders about at eye level. This would look weird IRL, but works fine with sprites. Chop the arms with a black line to give them sleeves and add flesh-colored pixels there to make hands. Those are usually 2x2 pixels or 3 triangular pixels (as is the case here.)

6- Some details. I added shoulder pads (just two 3x1 lines on the shoulders) and a belt of sorts (a slightly curved line crossing the waist.) I've also shaded the hands using the same corners-are-darker technique than used with the face.

7- Figured the pads and belt wouldn't change, so I finalised them by adding a darker and a lighter color.

8- Started adding details to the robe. I picked a darker version of the base color and drew a few outlines to make the "belt" stand out. Also, I drew a seperation for the legs.

9- Added highlights (lighter color than the rest of the image.) The arms got a bit of it, as did the chest area (pecs!) The legs did, too, to give this guy some knees and have them fold the robe "outwards."

10- The sprite seemed too bland, so I added another color, slightly darker than the base color. I just followed through with the highlights and shadows, keeping a roundish form in the lower region and a curved shape around the top part.

11- Time to give this guy a hood. I trimmed a few pixels and made it rounder. Hoods aren't square.

12- Like with the clothing, I gave this guy's hood shadows. I mainly used them to make it look pointier and less rounded, puffing-out.

13- I wanted this guy's hood to have a bit of a pattern to it, so drew some sort of , | , pattern on it with the highlights. Since it's mostly at the bottom, that part seems to stick out a bit.

14a- Like with the robe, I added an intermediate color that follows the basic shape the light and dark pixels give the hood. The sprite is complete!

14b- ...But it's too small so we scale from 16x24 to 32x48. Since the entire gif is 48x72, you don't see the scaling, but the pixelisation's there.

15- This requires a bit of judgement. Going over every pixel, I add corner pixels to make the image rounder. Sometimes I trip a pixel here and there when it looks weird. It's mostly a matter of adding and removing pixels to get rid of the blocky pixelisation, nothing too complicated.

16- Finally, I go over every pixel and add an in-between color to make it smoother. The robe, for instance, went from 4 shades to 7.
Old Colors: A B C D
New Colors: A(X)B(Y)C(Z)D

Tadah.

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

"Judge not a man by his thoughts and words, but by
the quality and quantity of liquor in his possession
and the likelyhood of him sharing."

That's pretty cool. You've got me wanting to create a random sprite now.

And on a sidenote, did you use Paint?

This post has been edited by MathNo.2 on 16th June 2005 04:27

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

You know. I think you're a very special unit.

Wow, that process seems too long for me, great job there!

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

The Cait Sith Avatar has Returned!

Check out my DeviantArt profile! ....If you don't mind that is

Quote (MathNo.2 @ 15th June 2005 23:08)

And on a sidenote, did you use Paint?

Nope. I use a quaint little program called TileStudio Pro. Freeware, and very versatile for sprites.

The 16x24 version is drawn in there. Then I create a sprite set 32x48 and import the 16x24 sprites into it, making sure they stretch to the new size instead of just copy directly and leave the rest blank. Then, well, I just get crackin'.



The BEST feature TSP has to offer is the very, very sexy color picker. It looks pretty simple, but you can hold shift and click a second color after picking one and it'll generate a gradiant for you on its own! You can then pick any color in it. Works wonders when you need shades; all colors in the sprite's robe were picked using a single gradiant.

The way it handles transparency makes it great for sprites. You can create, for instance, a hairpiece. Then you can try it on characters by copy-pasting it over their head. Only the hair part will be pasted. Makes for fast work. (What I mean is, if you copy stuff in paint, it'll copy a rectangle. But if you click the little icon with the dotted edges, it won't copy the "background" in that rectangle. TSP does this natively, even when copying entire sprites.)

Best tool ever. Simple, compact, sleek. Perfection. Been using it for a few years now.

This post has been edited by Silverlance on 16th June 2005 06:20

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

"Judge not a man by his thoughts and words, but by
the quality and quantity of liquor in his possession
and the likelyhood of him sharing."