This article is intended to be (yet another) helpful guide for aspiring pixel artists. I should warn you – it’s long. It covers choice of software, the specific tools to use, and some basic colour theory and pixelling techniques. I personally believe that anyone can create decent pixelart if they put the time and effort in. Natural artistic talent helps mainly with drawing the initial lineart (even artistic people need to practice though). Shading can be calculated almost scientifically – if you think about it logically there should be little problem. Afterall, a computer can render photorealistic scenes using just maths (they're not renowned for their natural artistic flair).
Software
In terms of hardware and software requirements, pixel art is probably the least demanding form of computer art there is. Just looking at the standard of pixel art in SNES-era video games should be enough to convince you that you don't need a state-of-the-art pc or the latest version of Photoshop. Even so, the right choice of software can make pixelling quicker and easier.
I’ve included PSP5 in my comparison as it had been released freely by JASC both on magazine coverdiscs and on their webpage, prior to their being bought out. I think it is reasonable therefore, to consider it freeware – it is, I believe the most recent version which is legally available for free (I’m not going to condone software piracy here). It can be downloaded here: http://www.oldapps.com/download.php?oldappsid=Paint_Shop_Pro_50.exe
Despite what the splash screen says, it will not expire after 30 (or 60) days. In my opinion, it is the best free tool for making pixelart.
If you're going to do a lot of digital photo manipulation as well as pixel art, then Paintshop Pro and Photoshop are certainly by far the best options – any reasonably new version of either will have all of the features listed above.
Tools
Most graphics apps contain numerous features which are of little or no use to the pixel artist. The tools which you will use (and should look for when choosing an app), are listed below.
Zoom
You should always be zoomed in while actually editing - I recommend at least 400% (or 4x), though it depends on screen resolution and image size to a certain extent. However, you should also regularly check how the image looks at its actual size - many graphics apps include a separate preview window (called a thumbnail in paint) which is ideal for this.
TIP: in Paintshop Pro, the mousewheel can be used to zoom in/out without selecting the zoom tool. In paint, the mousewheel pans the image.
Paint Brush
For pixel art, it is important that the brush you use has the maximum opacity and hardness, and that antialising is disabled. This allows you to work with a limited palette, as it won't create any blurred edges (and therefore no unwanted extra shades). You should also use a brush size of 1 pixel, to allow for the greatest level of detail.
Colour Picker
The colour picker tool allows you to set your brush to the exact same colour as one you have used previously. This is especially useful to pixel artists, who like to keep to a set palette.
TIP: in Paintshop Pro, you can pick a colour without changing to the colour picker tool, by holding ctrl.
Colour Replacer
The colour replacer tool is especially useful to pixel artists, who generally use a limited palette, and can therefore change the colour scheme of entire piece of work very easily. Tolerance is a measure of how precisely a colour has to match in order to be replaced, and is usually best set to 0.
TIP: double clicking replaces colours over the entire image or selection.
Selection Tool
The selection tool is useful for copying and moving pieces of an image around. You can choose from various geometric shapes or draw one freehand.
TIP: in Paintshop Pro, you can add areas to a selection by holding shift, or remove them by holding ctrl. This applies to selections made using the magic wand tool aswell. Deleting a selection will fill the area with the background colour.
Magic Wand
The magic wand is an exceptionally useful tool for selecting complex shaped areas quickly (by matching the colour of pixels). Tolerance is a measure of how precisely a pixel's colour has to match in order for it to be selected, and is usually best set to 0.
TIP: to separate a sprite from the background, you can use the magic wand to select the background, and then use selection -> inverse to have the sprite selected instead.
Flood Fill
Flood filling is useful for quickly filling in an outline drawing. Tolerance is a measure of how precisely a colour has to match in order to be covered over, and is usually best set to 0.
TIP: you can avoid filling unwanted areas by first selecting only the area you do want to fill, using the selection tool or magic wand.
Airbrush
The airbrush tool can be used for diffuse dithering, but only of large areas of canvas. It is important that both maximum opacity and hardness are used, for the same reason they are with the brush tool. Generally speaking, it's far better to use the brush tool for dithering, as it allows for greater precision.
Hue Map
Hue map, found in Paintshop Pro (v.7 and newer) is actually a filter and not a tool as such. I mention it however, because it's very useful for quickly recolouring specific parts of an image. It is similar to using the colour replacer, but it only affects a specific hue (and not saturation or lightness).
File Formats
JPEG (.jpg / .jpeg)
JPEG's are the best format for saving photographs, but should never be used to save pixel art. They use lossy compression which will introduce various unwanted artifacts, and generally ruin the image.
Native File Formats (eg. Paintshop Pro's .psp format)
Most graphics apps use their own proprietary format in addition to the standard types listed below. These can save additional information about transparency, layers, selections, and undo levels. Native formats are generally the best format to save your unfinished work in, for precisely that reason. Although they often use a form of lossless compression (and therefore produce small file sizes), you should not distribute your images in native formats, as people using different software will not be able to view them.
Bitmap (.bmp)
Bitmaps are uncompressed files, which save the image itself, but not other information such as transparency and layers. Because they are uncompressed, they are larger than most other image files (though this doesn't matter much with pixel art, as the image dimensions are so small anyway).
Portable Network Graphics (.png)
PNGs are the best format to use when distributing still images. They are much smaller (in terms of filesize) than bitmaps, but can still preserve 24bit colour and transparency (though not layers).
Compuserve Graphics Interchange (.gif)
Gif's are more or less your only option for saving animations. They can include transparency, but are restricted to 256 colours. For still images, use png's instead.
Lineart
When tracing a scanned image, use a colour that will stand out against the original (so you can see where you've been), and use a separate layer if possible (mainly to make colouring easier later).
With larger pixel art, it's usually best to draw a rough sketch first, before zooming in and reducing all lines to a single pixel thickness. When working on very small sprites or tracing a scanned image, it's usually easier to zoom in and place pixels precisely from the start.
It is important to make lineart as clean and smooth as possible. Straight lines should have a constant gradient, and curves should have a constant change in gradient. Perfect pixel lines are those with a perfectly constant gradient along their entire length, but are not the only lines you should use.
Colours
Colours can be defined in a variety of ways. The most widely used models are listed below, and relate to the way in which a colour is reproduced or perceived.
RGB (red green blue)
Computer monitors reproduce colour by varying the red, green, and blue components of each pixel (from 0 to 255). This is similar to the way in which a conventional artist mixes paints. However, paint works by absorbing specific wavelengths of lights, whilst a monitor emits them, so there are some differences – mixing a lot of red, green, and blue paint will not give white for instance.
HSL (hue, saturation, lightness)
Human eyes perceive colour in terms of its hue, saturation, and lightness levels. The HSL model used in computing, uses a value from 0 to 255 for each of these.
Hue - the position in a colour wheel (or rainbow).
Saturation - the vividness of a colour - or how little grey there is in it.
Lightness - the intensity or luminosity of a colour.
A colour wheel like the one below, can be used to pick a colour.
* The vertical position of a colour, indicates lightness.
* The horizontal position of a colour, indicates saturation.
* The position of a colour around the outer ring, indicates hue.
This model is very useful when choosing the additional shades of a base colour.
For example, one of the first things any artist learns, is to make distant objects lighter and less contrasting. So, if you want to make an object seem far away, it is a good idea to create shades with a higher lightness and lower saturation than the base colour.
Another example; the human eye is less able to perceive colour in dim light (cone cells are colour sensitive, but only in bright light, whilst for night vision, rod cells are used, which are not colour sensitive). So, to make a night-time version of a scene, you can adjust your palette by simply decreasing the lightness and saturation of each colour. You should however, also increase the blue component, as the cone cells which are sensitive to blue light, are able to work in lower light levels than other cone cells.
CMYK (cyan, magenta, yellow, black)
Most colour printers (though not all), use a combination of cyan, magenta, yellow, and black inks to reproduce colour. This model is of no real use to pixel artists, but is included here for completeness.
Palettes
Until relatively recently, videogame artists were forced to use a restricted palette due to the limitations of the hardware running the game. Firstly, the number of colours which could be displayed was limited. The first games for example, were all monochrome (though some arcade games actually used tinted transparencies laid over the screen to give different colours). Secondly, early machines had very little memory (most of which was used for the programming), and using fewer colours meant graphics took up less disk space. It also took less memory (RAM) to display them.
Nowadays, the average PC has gigabytes of memory and can display hi-res 32bit graphics with ease, so why use a restricted palette?
* Because You Can – many people appreciate the elegant simplicity or the challenge of working with a restricted palette.
* It’s Retro – a restricted palette gives graphics a retro feel.
* It Saves Space – storing graphics may no longer be a problem, but a large file size can put people off downloading a game.
* It Saves You Time – using simple palette effects such as “palette rotation” can save you heaps of time. You could, for example, change a scene from day to night or from sunny to raining, just by changing the palette – without creating any extra graphics.
* It Will Run Faster – games may run smoother and faster in 256 colour mode.
Basic Shading
Shading is used to make an image appear three dimensional. Without shading, objects will look flat and cartoon-ish (which may even be what you want).
The key to realistic shading is to use a consistent light source. Surfaces facing the light source should obviously appear lighter than those facing away (though even the surfaces facing the light source should be dark if another object casts a shadow over them). It may help to think of complex objects as being composed of several more basic geometric shapes.
The choice of light source can have quite an impact on the final image. A light source above and to one side is most often used, and looks quite natural (lighting is usually from high up, but rarely from directly above). An up-lit sprite on the other hand, looks very dramatic, so don't be afraid to experiment.
What you should avoid, is a light source between the object and viewer. This is what you'll get if you use a radial gradient - it's called pillow shading, and looks unnatural. Above all, make the light source consistent.
Advanced Shading
So far, we've covered basic shading techniques. Objects shaded this way will appear three dimensional, but will lack texture. Metallic objects for example, won't look shiny. For more realistic shading, other factors must be considered, including ambient lighting and the way in which different materials reflect and absorb light.
Phong shading is used in 3d modeling, to simulate the reflective properties of a surface, but the basic ideas are equally applicable to pixel art. Materials are defined using 3 factors - ambient, diffuse, and specular reflectivity. Remember to take into account the hue of the reflected light as well as its intensity.
A.) ambient,
B.) ambient + diffuse,
C.) ambient + diffuse + specular
Ambient - ambient light is reflected off all surfaces, whether or not they face the main light source. The ambient light is always the darkest shade of a base colour, but the hue and intensity of the light, is determined by the surrounding objects. For example, the underside of a white ball, resting on a red surface, will appear pinkish. Similarly, in a lava world all objects would have an orange/red tint. In outer space, there might be no ambient light at all.
Diffuse - when light hits a surface which is not particularly smooth, it is scattered in all directions. The amount of light reflected towards the viewer is determined only by the amount of light hitting the surface. The basic shading described earlier, is the result of considering only diffuse reflection.
Specular - specular reflection is only found on smooth, highly reflective surfaces, such as mirrors, metal, and water. It is much stronger than diffuse reflection, as all of the light hitting the surface, is reflected towards the viewer. However, this requires that the surface be at a precise angle to both the light source and the viewer.
In the photograph above left, you can see a bright, narrow line of light reflecting off the water. This is specular reflection. If we look at a field of grass by moonlight, the field is far more evenly lit. The rough surface scatters light from all over the field, equally, in all directions - including towards the camera.
Emissive - in addition to reflecting light, some objects actually emit it. In most cases, the light emitted from an object, will overpower that reflected from other sources, so reflections won't be needed. It is however, important to show the emitted light being reflected off nearby objects.
Shading Highly Reflective Surfaces
Realistic shading of highly reflective surfaces such as chrome and silver, can be quite awkward. The image reflected in the surface will depend on surrounding objects. If the sprite is to be used in a game, it (and objects around it) will likely be moving. To be strictly realistic, the reflections would need to change as the sprite moves. There is a shortcut though.
Consider an object in an outdoor surrounding - a knight's silver armour for example. Whether the knight is in a field, on a dirt track, or anywhere else, he's still going to have an essentially blue sky above him. Since the light source (the sun) is going to be from above as well, a light blue shade can be used for highlights. Similarly, a dark green/brown can be used in the shadows, as the ambient lighting is reflected off the ground. People are so used to seeing metallic objects in this kind of environment, that their brain will actually tell them that they are looking at something metallic even if the environment is different.
Dithering
Dithering could be considered the digital equivalent of hatching or stippling. It's used to create the illusion of an extra shade of colour by using closely grouped pixels of existing shades.
Ordered dithering uses a repeating pattern of pixels to produce a consistent shade over a large area. The repetitive nature of the pattern can make it quite obvious, especially if the shades being used contrast a lot. The patterns below are especially useful, as the proportion of each shade is adjusted in consistent increments of 1/8th.
Diffuse dithering uses random placement of pixels. On large areas, where manual dithering would become very tedious, the airbrush tool can be used as a shortcut for this.
Antialiasing
Antialiasing is used to simulate a level of detail more precise than single pixels, and is especially useful for making outlines appear softer and smoother.
It is, in a way, the opposite of dithering, as it uses a single pixel of an intermediate shade, to create the illusion of there being several sub pixels of different shades.
This is best achieved by hand, with a paintbrush, though it is possible to use a soften brush. Using the antialias settings on paint brushes is not recommended (see the section on tools).
Selective Outlining
Selective outlining is another technique to make pixel art look less cartoon-ish. It basically involves replacing the outlines with darker shades of the adjacent colours (or even removing the outline altogether in places).
Using selective outlining on the edges of sprites can make them stand out less clearly against the background, so it's not always a good idea. However, the same principles can, and should, be used on other lines, such as the joins between body parts and items of clothing etc.
Conclusion
There we have it – the sum of my pixelling know-how, condensed into a couple of pages. Hopefully this will help someone out there. My last two pieces of advice are to practice as much as possible, and to just not worry about it too much – games are for playing, not hanging on the wall. Happy Pixelling!
that's one of the features you'd have to pay for. i didn't explain it very well, but i was only really talking about free software. i'd never consider graphics gale worth actually buying (even for £8.30). i'm a little bit biased, as i've been using PSP for years (the only thing i used before that was deluxe paint), but i do think it's a lot better.
"i'd never consider graphics gale worth actually buying (even for £8.30). i'm a little bit biased, as i've been using PSP for years (the only thing i used before that was deluxe paint), but i do think it's a lot better."
Did you mean you think GraphicsGale is better than PHP, or the other way around?
Advertisement
Zoom
Paint Brush
Colour Picker
Colour Replacer
Selection Tool
Magic Wand
Flood Fill
Airbrush
Hue Map
MS Paint all the way for me 
).
