How I Create Character Graphics

 For today's post, I'm going to go through the process I use when creating character graphics (and other graphics, though the process was developed originally for character graphics).  I make no claims as to how good or ideal the process is for doing this sort of thing, but I find it works for me and produces results that I am generally happy with.  There are no doubt some places where it could be optimized a bit if I were to invest in some better tools, but for now it works well enough.

I usually, though don't always, start with doing some quick character sketches in my sketch book.  Usually something like:

 

I tend to draw six characters in a batch because the next step is to draw the characters onto a sheet of graph paper which has room for six characters, like so:

Sometimes I skip the sketch book stage and go straight to sketching on graph paper.  Either way, I sketch each character facing each of the four directions as shown above.  I use graph paper because it lets me make sure that characters are proportioned and sized more-or-less consistently.

After the pencil sketches are done, I ink the drawings and erase the underlying pencils to get a cleaner scan when I scan the page in:

After scanning in the page, I use Photoshop to grab each character frame and apply some filters and shrink it down to the size of the actual character sprite.

A single character frame.  At the resolution that I scan the full page in, each frame ends up being approximately 640x640 pixels.

As you can see, I forgot to ink some of the detail lines on the jacket hem on the right side of the image (character's left) - it doesn't really matter since those sort of details sometimes get lost when shrinking down to the final size and will get fixed up in pixel editing if necessary.

The first Photoshop filter I apply is a duo tone filter.  It generally does a pretty good job of getting rid of all of the background noise - the graph paper lines and pencil lines that I missed - leaving only the main inked lines on a white background.

After duo toning, I convert to an RGB image and apply a threshold operation to get rid of anti-aliasing, leaving me with a sharp black and white image.  After duo toning I can pretty much just accept the default threshold point.

As the final step I scale the image down to 64x64 pixels which is the target character size (though most end up fitting in a 32x64 pixel area).

I do this for each character frame and copy the results into my pixel editing program.  I don't really like Photoshop for doing pixel-level editing so I use a freeware program galled Graphics Gale.  The frames for each character are copied into a single image which gives something like:

The results of shrinking the character sprites down to their final size leaves the image rather messy so I then essentially trace over the shrunk down image with a black outline and erase any non-outline pixels. This is usually not too hard - it's mostly a matter of tracing over the darkest lines - though depending on the character there may be some amount of reinterpretation of the lines and some tweaking to make the results look good at this resolution.  It's mostly a matter of finding what looks good to my eye, though practice helps too.  The results look something like:

But of course, characters still need to be coloured!  I start by applying a "faux" colouring - assigning a single colour to the background and a single colour to the foreground.  This helps ensure I didn't miss any errant pixels while I was cleaning up the image and also makes it convenient to assign "real" colours:

At this point I should mention that even for mostly symmetrical characters like this one, I still draw both a left and right facing sprite.  I then pick whichever of the two I think turned out best and simply mirror it for the other direction.  For some reason, I seem to usually pick the left facing one though sometimes I combine elements of both if, say, I like the legs better on one but the hair better on the other.  Even non-symmetrical characters are often still largely symmetrical - usually the asymmetries are in the hair or some accent on the clothing - so I usually follow a similar process and make sure key elements line up in both the left and right facing frames.

With the colours assigned, the final step is to convert the sprite to a paletted version.  The game uses what is in effect a colour-by-number system to allow for colour swapping.  I add the character's colours as a line in my palette file and then when assembling the final sprite sheet, each colour is replaced by the index of that colour in the palette.  Similar features between characters are assigned to the same section of a palette (hair is always the same set of palette indices, for example) so that swapping between palettes generally does something sensible, even if the colour choices for one character don't always translate well to another; enough do that there ends up being a decent variety of colour schemes for each character and the goal is to eventually have a few different palettes designed specifically for each character though that hasn't been fully realized yet.

(Aside:  the colour swap system is only used for generic NPCs - player characters and unique NPCs use their own unique colourings.)

A final sprite sheet for a character will look something like:

This shows all of the character's walking animations which are not discussed here (maybe in another post) as well as the character portrait though the portrait ends up in a separate sprite sheet from the character sprites.

So that is the basic process for creating character and other graphics (animation is another story).  While I still don't have plans for regular updates to this blog, I may aim for one post per month, though that is still contingent on having something worth discussing.

In any case, until next time.