Vanadis loves to make things and has experience working as an artist and animator in the games and advertising industries.
Pixel art is an art form based on the pixel style that was developed for early video games. The first gaming consoles had output limitations (e.g., low resolution and colour display), and these limitations lead to a new technique for creating images. Today this retro look is incredibly popular, and many artists replicate it. Despite advances in technology that render these old techniques redundant, games are still currently released using the pixel art style.
This article describes how to create your own pixel sprite, with a step-by-step guide and some useful tips and tricks.
Step One: Planning Your Image
The first step is to decide what kind of character you want to create and how stylised or realistic you want it to be. It can be a very simple cartoon, or a more complex realistic character. For the sake of example, I chose something in the middle.
Don't worry about pixels yet—they come later. Just draw your character as you normally would.
I began with a simple sketch, then worked it up from there by adding colour and cleaning up the lines in Adobe Photoshop. I began working in a reasonably large file size (around 1000 pixels high), but just work to whatever scale you find most comfortable—larger than the final size of your sprite is best.
You don't have to use Photoshop to create your pixel sprite. There are a number of free programs available with the necessary tools, such as MS Paint and Graphics Gale. If you are making your own image from scratch rather than working over an existing one, however, Photoshop is the way to go.
When making an image from scratch, I find it very helpful to work on different layers: a layer for the linework, a layer for the local colours, layers for light and shade, and extra layers for details. Use as few or as many layers as you like, but don't go overboard as they can be hard to keep track of! When it comes to the pixel stage, it's best to merge all the layers together (except for the background).
Step Two: Re-Sizing
Once your character picture is finished and you're happy with the over all look of it, it's time to pixelise it!
First, it will probably need re-sizing. Pixel art is generally very small. Sometimes a sprite may be as small as 20x20 pixels, especially those designed for hand-held devices.
Of course, the smaller it is, the simpler and more exaggerated the style has to be. Because the image I am using is relatively complex, it has to be a large sprite, so I re-sized it to 275 pixels high (or 300 pixels including the background). Much larger than this and it starts to lose the pixel sprite feeling.
Step Three: Anti-Aliasing
One of the problems with resizing is anti-aliasing. There are some options you can change to avoid this, such as 'nearest neighbour (preserve hard edges)' in the drop- down menu of the image size window, but I find this destroys the details. Besides, it's cheating! The best pixel art is done by hand—old school style.
So, the re-sized image is looking very soft and not at all like pixel art yet. The first step to pixelisation is to clean up the edges of the image and get rid of the anti-aliasing. This means any edge pixels that are less than 100% opacity have to be erased or redrawn with 100% opacity, using the pencil tool or the pencil eraser.
To aid this process, I usually change the background to a bright blue or a colour that isn't found anywhere on the image. This makes the edges easier to see (which is why it's important to keep the background separate!).
Depending on the style you're going for, you may want to add a strong outline around the sprite. I chose not to for this image, but there are several formulas for creating smooth pixel curves and outlines. Another technique often used is to add a white outline around the entire image. I believe this was originally intended to make the sprite pop from the game background, and it's a matter of stylistic preference.
Once you have cleaned up the edges, the image starts to take shape and look more pronounced with that crisp edge pixel art has. But there is still a way to go as the shading inside needs work.
Step Four: Shading
Now it's time for some pixel shading. Smooth gradients are not allowed! The image I have used has a lot of them, and a million colours to boot! Pixel art tends to look more authentic and retro the fewer colours you use, but it is also a lot tougher to shade realistically with fewer colours.
There are two main methods of overcoming this limitation: cell shading and dithering.
Cell shading uses flat colours and a mid-tone between two shades to smooth the transition between them. It's great for getting a clean stylized look, but it can soon start to use up a lot of colours.
For a more retro style there is dithering. Dithering helps to blend two colours by using a pattern that tricks the eye from a distance. If you're on a severely limited colour palette, you can use basic colour theory to 'mix' new colours this way; for instance by dithering blue and yellow to get a green hue. Dithering also adds texture and a distinct style reminiscent of the 8bit era.
For my image I chose to use mainly dithering. You can go wild with it. There are some basic formulas to follow using a checkerboard pattern that thins out at the edges, but pretty much anything goes so long as it's patterned. If you try using the airbrush for random pixels this will not work so well. Following a pattern is the best method even if it changes to follow the shape of the structure it's representing.
The Finished Sprite
And you're done!
The pirate sprite I created uses many colours which gives her a more realistic look than the really early sprites. If you prefer a more retro look, limit the colours and scale down like I did with the Spartan.
Good luck and have fun creating sprites!
Tips and Tricks
- Never try to make a pixel sprite from scratch. It's better to work from a scaled down image as a starting point.
- Use a brightly coloured background that contrasts with your sprite for cleaning up edges and getting rid of stray pixels.
- Keep in mind that the smaller the sprite is, the simpler the design must be. Tiny sprites are best in Chibi style (like the Spartan at the top of the page).
- Cell shading or dithering, or a combination works. No gradients!
- Photoshop has a save feature 'save for web and devices' where you can toggle the amount and type of colours used in your image. Cheating a bit, but a handy shortcut to start from.
- To get a scaled up version of your pixel art: zoom in to the desired size, hit print screen, and paste this into a new file. Voila, you have a blown up pixel image for that authentic retro look!
This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.
© 2011 Vanadis
Dale Anderson from The High Seas on September 15, 2020:
Well this was interesting, thanks for sharing.
Andrew from Rep Boston MA on July 13, 2014:
Great hub on how to create a sprite!
Vanadis (author) from Barcelona on May 04, 2013:
StompStompStomp- The pirate girl image is displayed at actual screen size. (Be sure to click on the image to see the sprite at 100%, Hubpages scales down some images to fit the article so the pixels may not show well). The Spartan at the top was created by 'blowing up' the original sprite to that exaggerated pixel size. To do the same for your image just follow the instructions on the last tip under 'tips and tricks'. Granted this advice is probably coming a bit late :)
Telle: Sure, knock yourself out!
Telle on May 31, 2012:
Hi! I hope it's okay for me to use this lineart to practise my colouring, I won't steal your work and put it on a website somwhere. If there would be some troubles, please contact me!
StompStompStomp on May 24, 2012:
I don't see many pixellated features on the pirate girl... Also, I need to make a chibi character with a VERY pixellated physique, like the Spartan. How do I do that?
Vanadis (author) from Barcelona on August 05, 2011:
Thank you SilenceR! It took around 2 days. Difficult to say exactly because I produced this sprite along with a lot of other work simultaneously.
SilenceR on August 03, 2011:
really nice and cool, how long did it take for you to make the pirate girl as an example in this tut? :o