Cartoon Sprites
How to draw cutesy, sickly sprites
Part 2
Get Out The Crayons
Now we can start colouring in. Add a new layer between the 'white' and 'outline' layers and call it 'body1'. We'll use this layer to hold the colour of the body so that the outline layer doesn't get damaged if we mess up.
Switch to the outline layer and pick the magic wand tool with a low tolerance (10 should do if you adjusted the contrast correctly earlier). Click inside the areas you want to colour holding down shift for multiple selections ( if you want to select more than one area at once). Here we pick alternate stripes to colour yellow.
Next select Selection>Modify>Expand and enter 3 pixels as the amount to expand. The selection should now have expanded into your outline so that we aren't troubled by any antialiased pixels in the outline that weren't selected using the magic wand.
Now switch to the 'body1' layer. Select the fill tool and a nice yellow colour and fill the selection areas. With the areas still selected (control-click on the 'body1' layer if they're not), switch to the airbrush tool with low opacity and a skightly darker colour. Draw down the edges of the body to give some shade to both sides. Repeat with a slightly darker colour and a narrower brush until you are happy with the shading. Once satisfied, you can cancel the selection. If you want to add highlights as well as shade, use a low opacity airbrush with a lighter colour. Remember to have the areas you want to colour selected before applying colour. This enables you to keep within the outlines and prevents colours overlapping. You can always reselect the areas already coloured in by ctrl-clicking on the colour layer.
To complete the body we do the same as above on a 'body2' layer but for the black stripes. Make the selections on the outline layer, expand the selection, switch to 'body2', fill with black and put in some highlights.
Do the same with the other sections using exactly the same method. Using a different layer each time will enable you keep the sections seperate so you won't risk messing up finished sections and can easily recolour any part using edit>adjust>hue on that layer.
Once all the colouring and shading is complete we can turn this into a sprite!
Creating the Sprite
Using the crop tool, crop closely around the sprite. Save this file as a master image that you can come back to if you need to create more frames of animation (or screw up big time). Resize the image to the proportions you need for your game and apply a little sharpening if required. Now we need to make the background of the sprite transparent.
If you look closely at the edges of the sprite, you will see that there are varying levels of grey pixels around the edges. This is antialising caused by the resizing process to keep the lines smooth. Unfortunately, if you leave these pixels if the final sprite you may end up with a dodgy halo effect on dark backgrounds so the lighter pixels need to be removed. The way I find that gives the most reliable results is as follows.
Firstly, determine how light the background will be. If the background is mainly one colour then fill the white layer with that colour. Flatten the image and use the magic wand with a low tolerance, no antialiasing and no feathering to select the areas we dont want to show when putting the sprite on the screen.
Fill the selected area with a unique colour -usually magenta with an RGB value of 255,0,255 as this colour is unlikely to be used anywhere else in the sprite. This colour can then be specified as the transparent colour when you load the sprite into your code.
You will notice that there are a number of light grey pixels around the edge of the sprite. This will give an antialias effect on a light background rather than a jaggy outline if we removed all the grey pixels. If the sprite is likely to pass over dark areas you will see the grey antialias halo around your sprite. To avoid this, use a darker background fill and/or a higher tolerance when selecting the background with the magic wand.
You should now have a sprite ready to use. To create some animation, reload the master image and amend the image as required. In this case I will make the arms swing and the wings flap by putting the outline of those parts on a seperate layer and rotating/resizing the parts as required for each new frame (and applying the same transformation to the colour layer for that part). Then apply the resizing and background matte exactly as before.
If the sprite requires more extreme animation that can't be acheived by moving parts around you should draw the different frames on the same sheet of paper and work on them all as one file, cropping out the other frames at the end (making sure they are all to the same scale first).
You can check the animation of the sprite by loading the individual frames onto different layers of a new file (the same size as the sprite) and swiching the visibility off on the higher layers, checking the sprites line up.
Next time it's Street Fighter manga style!
Tips
» Go around the edge with a small 1 pixel pencil tool and eliminate any stray outline pixels.
» Use control click on the layer pane to select all the pixels on that layer. Any adjustment to the layer only effects the selected pixels.