Tutorial - Making sprites from scratch - Advanced method

[SuperAj3]

~How to Make Sprites From Scratch - An Advanced Method~

DISCLAIMER: This is only one of many ways to make sprites. This is the method I usually use. I also want to note that this tutorial uses my art style adapted to the Ace Attorney style, and so the end result may not look entirely accurate to the trilogy or future games. Feel free to experiment with your own art style depending on the image you have in mind for your sprite or project.

I've prepared some tutorials around the place on frankenspriting and advanced frankenspriting, but never one on creating a sprite from scratch.

This tutorial assumes some knowledge of drawing in general, but I'll do my best to explain everything as I go along, so that anyone can follow along.

I'll break this up into 4 parts:

1. Initial ideas
2. Rough sketches
3. Final Outlines and colours
4. Downscaling and cleanup

1. Initial Ideas

It's important to have an idea in mind when starting to ensure your sprite comes out looking the way you had envisioned. This can be as simple as preparing some sketches of your ideas or looking up reference images. For me, I used this outfit design I found in a fashion book called "Guide to Fashion Design" by Leng Peng as reference:

Spoiler : :

(A neat outfit idea)

Once you're satisfied with your design, you can start to sketch out the pose. I wanted a character who was energetic and a little tomboyish, but still stylish. I find having an initial idea of their outfit and personality help you pick a suitable pose for them. This is also important if you're making an entire set for a character.

Some things I've noticed with most AA characters is they each rely on a 'gimmick'. Some of the later games made this gimmick a prop connected to their outfit. The gimmick is especially important for the killer, who always has something that can be used in an eccentric way to highlight their breakdown or change in personality. While it's not necessary, if you're trying to create a set with a number of poses, a gimmick design at this stage will help set the scene for your poses.

Some examples of the 'gimmick' in earlier games include Dee Vasquez and her cigarette holder or Ini Miney and her hat. The later games made them more central to the character's design, like L'Belle's phones on his shoulder-pads, or Yuri Cosmos' segway.

2. Rough sketches

This is where the meat and potatoes begin. It's hard to make up poses. If you're like me and have aphantasia, having ideas can be very hard to translate into something tangible like a sketch without some assistance. I find referencing existing sprites is useful in all situations, if not for the pose, but for the dimensions of the sprite. It's important your sprites are the same shape and distance from the camera as the canon sprites you're looking to use in conjunction with your OC.

For the pose itself, I used Clip Studio Paint's 3D models and a pre-set pose for the character, which I thought best suited the personality I had in mind.

You can use anything as reference here for the pose. Imagination, photos, art from other games. It's helpful to learn poses so you can bank those ideas for later.

I start with a canvas that's 2560 pixels wide and 1920 pixels high. This is 10 times the size of a DS' screen and therefore 10x the size of the final product of your sprite. Starting large allows you to add details in more easily, but also allows for you to allow for some mistakes and rush-jobs in places, as the final downscale of the art will tend to cover up any imperfections.

I started with a rough sketch tracing over the 3D model I had posed.

Spoiler : :

This was then resized, altered and repositioned to fit the AA's sprite shape. I, for example, used Desiree's sprite as a base to judge the sprite's position and height.

Spoiler : :

Outlining the pose like this allows me to then work around the shapes and tailor them to fit the silhouette I'm going for. You have time here to start experimenting with shapes, warping the image, mirroring the canvas, until you get it right.

I then draw over this sketch with the final design in mind. Here is the example with my template behind it in red.

Spoiler : :

3. Final outline and colouring

This is where we start to see the final image come to life. I will draw over these sketch layers with the final outline. If you're using a stylus for this, I recommend a brush-size of anywhere between 5-8 pixels. thicker outlines for the details you want to stand out (e.g. the jawline or the overall outline) are used in my work usually. I drew this using a 5px brush the whole way, and you'll see in a moment why this can cause issues with the downscale.

For those who don't own a stylus and touchscreen computer like myself, drawing and scanning/photographing your image can help you too. You can use an art program to fit the sketch onto your canvas. Once you get to final outlines, I found you can click, hold shift, and click again to draw lines between the points of your clicks. Other programs allow you to create pathways to draw your lines with, if that suits you better.

Spoiler : :

(Examples of using the 'shift click' method and the path tool for alternatives to drawing outlines.)

Here is the final outline. I took care to draw this as polished as possible. I took note to correct things like the direction of the eyes, or any finer details (like adding her ears and earrings). For details like the pattern on her shirt, which I don't want outlined, I will add this in at the colouring stage. This is my preference, and depends on whether an outline is preferred or not.

Spoiler : :

I then add the base colours, taking care to fill in gaps that the bucket tool misses. I put each colour on a separate layer. This will allow me to clip the shadow layer to each colour to make sure it's all coloured in neatly.

Spoiler : :

Once the base is done, I go into the shading and touch-up stage, before downscaling the image into its sprite form and touching up some more.

For shading, I tend to pick a darker colour, but will saturate it and shift the hue a little depending on whether the colour is cool or warm. I tend to reference official sprites for where to place shadows. Depending on the Ace Attorney artist you're most trying to mimic, will depend on how to shade the sprites. Pay close attention to the artist's patterns in shading to clue you in on how to do the same. For example, Suekane-san tended to light the face front-on, whereas Nuri-san would shade the right-side (our left) of the face more substantially for poses where the head is facing front-on.

For complex pattens (like the stripes and polka dots), rather than picking colours and drawing in the shadows manually (although this is still a valid option), you can draw your overall shadow and use a blend mode to automatically do this for you.

Spoiler : :

Once done, I go over the outlines with some colour, where I know the downscale will make the outlines look ugly (basically a black outer outline leads to black outlines and some desaturated anti-aliasing, so I avoid it where I don't thnk it'll look good).

Spoiler : :

4. Downscaling and cleanup

With your finished image, merge your layers (without a background), and copy it to a new image. I don't work off the same drawing so I can avoid accidentally saving over it.

Downscale your image using the 'image size' option in your art software to 256 pixels wide by 192 pixels tall.

You'll get a result like this:

Depending on your art program, the result might look 'fuzzy'. To resolve this, I have some little tricks I use.

Step one is duplicating and merging the layers over and over to remove any transluscent pixels. This will make sure you get crisp outlines.

Step two is manually adding in the detail in areas where the downscale lost them. In this case, her jaw and eyes were my focus. I use firealpaca which doesn't have a pixel tool. Instead I set my brush to size 1.3 and turn off anti-aliasing. Otherwise, the pencil tool tends to be the right option. As long as your size is around 1px and your have anti-aliasing off, you're good.

Spoiler : :

(On the left is the image as downscaled. On the right is the clean up using a higher tolerance bucket tool to remove the fuzziness. Depending on how crisp you want your outlines, you can manually go in and add anti-aliasing after this step.)

Step three is using the bucket tool on a high tolerance (anti-aliasing off). This removes any colours. Where this contrast is too sharp, you can manually add anti-aliasing by picking a colour between the 2 colours and blending the boundaries in. I've explained anti-aliasing in a previous tutorial, and you can read it here for reference here.

Keep refining the sprite until it's as you like it. I used to try and mimick the limited colour palette of the original sprites but no longer do this. I've accepted the 'illusion' of lack of colour in its place.

If you would like to downscale your sprites, I recommend this site for colour reduction: Kako Color Reduction.
GIMP also has tools on how to downscale, which applekitty has explained in their tutorials on AAO. Go check those out here.

Once you're happy with the sprite, well done, you've finished!