Process I use to make sprites(animation not explained by now)

 I'll show you my process. Take this as inspiration. You can adapt the process to make it fit you. There's no need to do it exactly according to instructions.

 I think a simple drawing program that deals with pixels is enough, like Paint. I use the Game Maker built-in image editor.

 The example will be an image of my character Marta with a cigarette holder.

 First. I draw the image I want on paper to use it as a guide.

 Then I choose the size of the sprite. In this case the size is 24x32 pixels. Usually both width and height are a multiple of 8. Zoom in to work more comfortably. I have this:

 

 Now I start Drawing the image in "silhouette". That is, the image as a shadow with only one color. So you make sure the pose will read clearly. This part is fundamental. If you are not familiar with these concepts, I suggest you to go later to johnkstuff.blogspot and search for "negative spaces"(I must warn you that some people don't like some attitudes of this animator, but his blog is full of art knowledge).

 

 Make all the corrections you need, and don't stop until you get a clear pose. Have the drawing color on the left click, and the background color on the right click. So it is easier to draw, erase, draw, erase, draw, erase. I got to this:

 

 Now I add the skirt of the dress. With the background color, I put some features that do not touch any border of the figure. With such few pixels we can't add all the features of the face. So we pick the most important ones. For pretty women, eyes and lips stand out. So I skip the nose

 

 Now is when I start using more colors. Eyes are my main interest so I start with black for the eyelashes, that make the eyes more femenine. I keep working on the face. I go in order of what I feel has more importance. I feel the ear pendants need to be further down. I color the face, and take the chance to paint the feet, which use the same color. I now have this:

 

 I feel that space between the edges of the eyelashes and the hair makes it look like she has an "umbrella" haircut, with the back of her head shaven. That's not what I want, so I fill that space with more hair. Also I feel the face features are too piled up at the bottom, so I raise the eyes. Now I add the remaining colors. Here's the sprite finished:

 

 If you want, you can add an outline. This helps to make the character stand out even more from the background. I'll give you some tips to do this.

 When adding the outline, try to do so without taking out clarity from the "silhouette", so the image still reads well. By instance, note I didn't put the outline at the downside ot the ear pendants, because then it would touch one extreme of the cigarette holder, and the neck. We need these parts free to have the figure read well.

 I sometimes put the outline inside the character, and some times outside the character. But not just randomly. By instance, Look at the hip and legs. I put the outline out in one side, but in in the other side(compare the image below with the previous one). Out in both sides would make her fatter than I want. However, in the arms, which are just one pixel wide, the outline is in in both sides. Otherwise the color of the dress would dissapear. You can experiment here too. Draw and erase parts of the outline, and see what looks better. What works and what not. Here's the result:

 

 Hope this be helpful for you fellows. And remember, cigarettes are bad for health! However, she looks good with it :p

 

pballooned

 I meant the outline is out in both sides at the arm, sorry.

JannLee

Very nice tutorial.:-) If only I still had acess to my WACOM, I'd practice.

pballooned

 Thanks. There is a way to practice without a computer.


-Try to get some squared paper.


-With a pencil draw a big rectangle that contains the little squares that will represent the pixels.


-Inside the rectangle, draw freely the image or character you want, without pressing hard the pencil.


-Now with the same pencil, paint the squares that touch the line, but again not too hard.


-Probably, you will have to erase some squares, ignore or relocate them. This by instance, to have a key space between two parts of the character(the drawing line takes way less space than a square of the grid). Or just because some feature is important and needs to make use of one more square in pixel form(and thus shift a couple squares around it). Relocate these "pixels" until you like the result.


 Maybe I'll put an example sometime.

JannLee

Ah okay-I'll give that alternative a go too. Thanks.