I was asked about to how sprites are created and used. This post is an attempt to explain the basics behind a sprite sheet. What are sprites?
Sprites are pretty much normal digital images, but they are made at a very, very small scale. The term "sprite" usually refers to the images used in video games and for small animations, etc. The only thing special about a sprite compared to other images is that the sprite is usually made by meticulous work at the pixel level – each pixel being placed by hand, one by one. Being a pixel artist is different from being a graphical artist in other types of digital painting, but the principles of art - such as geometry, light and shading, color palettes, and more - still applies in much the same way.What image format should we use?
Sprites are usually saved as either GIF (Graphics Interchange Format) or PNG (Portable Network Graphics). BMP (BitMap) can be used, but it's a very big format and does not offer any real benefits nowadays. JPEG/JPG (Joint Photographic Experts Group), while very common for other image files, is not recommended at all for sprites! JPG is made for keeping photo quality while reducing the use of harddrive space. This is done through compression
– the image processing program goes through the image and reduces the amount of info stored as much as possible. For a photo, this still leaves it looking OK, because it has an extreme amount of pixels and differing color values already, and it can stand to lose some. For a sprite, the change in pixels will be very noticeable. A typical sprite has maybe 16 distinct color values, and a single color that is defined as the background – it should be treated as transparent, and never mixed with the main sprite. But when the compression does its work, a nice sprite can have its colors blended together, making it horrible and unusable.
Take a look at this comparison:
This is a properly saved sprite. It can easily be moved across different backgrounds, because even if we save the background as non-transparent it is still a single pure color that is not used anywhere else in the image. Thus we could easily cut away the white or the pink in this image, and move the sprite somewhere else.
But then we add compression...
This sprite is ruined. It has been saved as a compressed JPG, and when we try to cut away the background we find that the white is no longer pure – it has been blended with other colors in an effort to cut down on file size. And it's not just the background that has been blended.
Shock and alarm! The original sprite (left) had 9 colors – 4 shades of blue, 4 shades of metallic green, and 1 bright eye color. The compressed image (right) has far more colors, and they are visibly blurred and "dirty". If you want to use a different background, you have a lot of work ahead of you. If you want to extract a color palette, you're not getting anything useful. Lesson learned: Never ever compress an image containing sprites or other things you want to keep unchanged. If you save as JPG, use a program that actually gives you the option to set Quality to 100%. If you don't get such an option (like in MS Paint) assume that the image will be blurred and blended due to compression if you save as JPG.
BMP, as mentioned, is a big format. It has no compression, and saves data about every single pixel in the image. It will give you perfect image quality, but the file size makes BMP undesirable for web. People do not want to download a 10 MB file just to see your forum banner, after all.
PNG files have no compression either, but the way they save info makes PNG images pretty much a replacement for BMP in most situations. Furthermore, the PNG format also saves an alpha value for each pixel in addition to the standard red/green/blue values, which means that PNG files can have true transparency. This is perfect if you want to make a sprite that feature transparent parts – instead of being forced to use, say, a pink color to simulate transparent red on a white background, you can just up and use red with a low alpha value – thus making it possible to place the sprite on any background afterwards. The PNG format is excellent for sprites, and I highly recommend their usage as the standard format for sprites and other web graphics.
GIF is another small-size image format. It has the option of turning a single color transparent, but no more. It can be restricted to a certain amount of colors, to save space. Nice for sprites, so long as you get to pick what colors to keep and which ones to discard. If you are saving a sprite – which has only a few colors to begin with – saving as a GIF will usually have no effect on its quality. Some programs, though, such as old versions of MS Paint, will force a certain pallette, which may affect color shades a bit. Modern image programs will not do this. While it lacks full transparency support, the prime advantage of GIF is that it can be animated. Making a GIF animated requires an image editing program which can edit individual frames and which supports exporting to an animated GIF format.
Recommended: Use PNG for all sprites except the ones that need
to be animated when you post them online. In that case, use a GIF. Otherwise, sprite animations are best saved as a strip of individual images, which the recipient can cut up and use as needed.What programs and tools do we need?This guy explains it pretty well.
(Read the rest of the tutorial as well, it is excellent.) I have a tendency of being overly verbose. But here goes:
We only need an image editing program that can work with raster images – i.e. normal image files. Even MS Paint can do this, so if you're on a Windows machine you're already set. To work with a sprite, just open a file, zoom in until you can clearly see each pixel (turn on the grid if you want to) and then start placing dots. You can cut and paste and move parts. If you want to recolor sprites, first pick the existing color as your Secondary Color, then the new color you want to use as the Primary Color, and then right-click with the Eraser tool to replace one with the other.
Still, this is the hard way of doing it. Making sprites in MS Paint works up until you need to recolor a large amount of them, or when you need to make parts that overlap each other. Say, you want to paste armor onto a character. Then later you want to move the arm of the character a few pixels left – but naturally the image underneath the armor you pasted on has been lost. You will need to redraw it. And as Les Forges mentions in the link above: You can't open more than one file at a time, so copy-pasting to and from different sprite sheets and image files is a nightmare.
Instead of mucking with this waste of time any further, download a proper program which supports layers and all the proper jazz. MS Paint is meant only for the most basic of image editing needs. Even if you only need to stick image A above image B, you're generally better off with something other than MS Paint. Some people are reluctant to download anything that is not included with the machine, because "this works for my needs". Quite frankly, these people waste time and effort and usually get a worse result from their endeavors than someone who takes a minute to install a proper program.
Paint.NET, GraphicsGale and GIMP are all image editing programs which are up to the modern standard of layers. For example, here you can place your base character sprite on one layer and his armor on another – the base sprite will then be unaffected by anything you do with the armor sprite! Layers allow you to compare sprites by placing them over each other, and they allow you to edit part of an image without affecting other parts. These image editing programs also include other useful functions, such as the ability to change the color hue of an image with a quick drag of a slider, and the ability to apply effects such as blur or brightness adjustment – things that are simply impossible in MS Paint.
Personally I use Paint.NET for my sprites, since it is simple and lightweight and can be extended with plugins if needed. It's completely free to download and use. Others swear to GraphicsGale – a program which also includes the ability to edit animation frames, though that one costs money. GIMP is a free program which is "the poor man's Photoshop" – it has many powerful functions, but it may be overly complex to use if you're only going to make simple sprites. Photoshop is the king of modern image editing, but it is expensive and is not particularly well suited to sprites anyways. For sprites you have all you need in "lesser" programs.How to work with sprites
As mentioned, all you need to do is to zoom in to a comfortable level, then start placing pixels. There are many good tutorials on how to make a proper sprite, so I'll leave it up to them to explain palette selection, geometry, shading and similar things. The main things to consider are:
* Is my sprite the right size? It should be big enough that you can see what the object is, but it should not be so big that it stretches the page. Take note that if you want to resize a sprite, do so AFTER you are done with it. Make it on a 1:1 pixel scale, save that, then make a separate copy which you stretch bigger. Always scale uniformly – never scale a sprite to, say 150% width and only 120% height. This will make the resized "pixels" look rectangular – a sprite should always have square pixels, even when scaled up for display purposes. Also: a stretched sprite sheet is pretty much useless. A sprite sheet where a pixel is a pixel is perfect.
* How many colors am I using? Don't use too many different shades for a sprite, and don't use too few. Maybe 4 or 5 shades per color tends to be a good balance for classic sprites.
* Are my colors working well with each other? Don't use the standard palette. Don't go Bucket Fill with bright lime on your sprite. Remember to add highlights and shadows to offset the garish color if you do this. If you have downloaded a sprite sheet you will often have an existing color palette to choose from that does the job well.
* Am I using layers? If you need to plece one sprite (part) over another, use a new layer until you're 100% certain you want that piece to look like that permanently. Then you can merge the layers. When you save the final image layers will auto-merge, so don't worry. In your project file you should keep the layers. Imagine placing a sprite into a car, saving, then wanting to move the character somewhere else? Do you honestly want to re-paste the character into a new, blank car sprite (doing all the work over again), or do you want to do it the smart way and just move the layer a bit?
This is far from a comprehensive tutorial on how to make sprites, but it covers the basics of image formats and program usage. Consult other sites and blogs for details in the art of making sprites.