To start, one needs two simple programs: a paint program, and a gif compiler. Of course, the paint program is used to make the sprite- and any paint program will do- I use Paint Shop Pro myself. As for the gif compiler, one will need it to crop the final image and make the background transparent, but most of these programs aren't hard to operate- I use Gif Movie Gear, which you can download a trial of it at Gamani's official homepage if you need it.
Now, sprites can be generally defined as very low-resolution images, usually of no more than 80 or so pixels large (length and width)- though there are expections. They originated in the older days of 2d gaming- composed of pixels, sprites were (and still are) the main outlet for 2d graphics. Basically, start by opening the paint program and creating a new open canvas. Ideally, make the size of this canvas around 30x30-80x80 pixels (depending on how large the sprite is to be). Now, its time to start creating your sprite. The aspect of this that is difficult to put in words is actually painting the sprite, so I will try to incorporate some images to help.

But basically, zoom in on the image canvas and choose the paintbrush tool, select a black or near-black hue for the paintbrush, set its pixel width to one, and start to paint a rough outline of the figure (it helps to have a photo or something to reference by for this part, as it can be tricky). Here's a clip just to help visualize what that rough outline may look like:

(just for clarity, in all of these pics I have doubled the size of the actual image)
Notice that I wasn't very precise here- there is no real need to nitpick with the figure at this stage. If you need help getting the pose down, just make circles where the major joints are (as I did) and roughly link them together. I like to call this the wire-frame of the sprite. Note that the background is also a pale blue color because thatís the color that will become transparent later (for the background hue, just choose any color you know you won't be using and that's easy on the eyes). Then, just keep refining the lines of the rough figure with the paintbrush tool and shaping the body however desired:

The refining can be the most tedious and time-consuming part of making a sprite, depending on one's artistic ability and eye for detail, but do the best you can to sculpt the figure from the wire-frame. Eventually, trim the black outline so it's only 1-2 pixels wide around your figure and start adding details within the figure (clothing, accessories, muscle definition, ect). Adding details is all done with a few clicks of the mouse. Regardless, itís not essential that your final wire-frame have every little detail in it. The final wire-frame should resemble something well-refined and shaped:

Now, for the fun part, imo: coloring. First, I suggest filling the wire-frame with the basic colors using the fill (or paint bucket) tool. Don't add shading yet, just the fill in the basics. Try to keep the tones around a medium shade:

Now, just eye-drop the colors you put down and select darker and lighter hues to get the highlights and shades. I usually start with the medium tones, add one or two highlighting tones where needed, and then finish with one or two darker tones, refining and adding details as I go along. Here's an in-progress clip after adding some dark hue and light hues- notice that I kept the black wire-frame intact:

Then, as before, continue refining the colors, adjusting the shading/highlighting, and possibly adding more hues and details here and there. Here ia a clip of the somewhat finished coloring stage, note that I started to add a few more details that I couldn't really have with just the wireframe:

Now, unless you are going for a stylistic thing, you should probably get rid of that now-unattractive black wireframe. This can be a bit tedious. My best suggestion is to pick two or three somewhat dark, but not too black hues that match with the colors you have been using. Then just replace the balck outline pixels with these hues, possibly using lighter or darker tones depending on the shading/bodypart. Here's basically the finshed version after that's done. I added a little more detaing and attached a chair prop that I painted seperately (don't worry about that part):

And that's basically all there is to painting the sprite. If desired, keep refining and detailing the sprite until you have it as good as you want. Then decrease the image's color depth to 256 colors (there should be a 'colors' menu or something similar with this option in the paint program). Then, save the image as a gif file (since that is the only file extention fully compatible with all gif compiler programs). Then, open your gif compiler and load the image you just saved. Here's a screen shot of that stage using Gif Movie Gear:

Now, selected the frame(image) and click on the 'set transparency tool'. This tool is located in different places in different compilers, but, in this clip, I'll show where it is in Gif Movie Gear- the tools are boxed in orange:

In this case, either of the boxed tools will do. Click on one of them and a new window should pop-up, with all the hues you've used in the image (called a palette) and a window of your image. As before, the actual way in which this transparency option works varies from program to program, but for Gif Movie Gear, just use the eyedropper tool to find the correct color for your background hue (which should be easily found, since it was never used in the sprite). For Gif Movie Gear, the hue on the image you select will flash black and become transparent (gray with the background). Here's a clip of after I found and selected the right background hue to make transparent:

After setting the transparency, it's time to crop the image so the window borders fit with the edges of the sprite. Here, using a gif compiler may not be neccessary, as most paint programs have some type of crop image option, but I will keep the function in the gif compiler for simpilcity. As with transparency setting, where the crop tool is varies depending on the compiler you're using, but here is a clip of where Gif Movie Gear's is (which has been highlighted):

Here, Another window will pop-up. The selected image should be displayed within a boxed, dotted outline and have few set of coordinates on the other side of the image:

These 'coordinates' actually correspond the size of the image, in pixels. You will have to adjust the numbers on all four coordinates to move the four walls of the border closer in. Fiddle with these until the walls of the dotted box touch the very outside parts of the sprite. As thus:

(if it helps, zoom in on the image if you need to see the borders better)
Now, the sprite is ready. Just save the image as a gif file again, upload it onto the net for a host (preferably one that allows image-linking), and you are basically done :)

A few tips:
-It really helps to zoom in on the canvas when you are detailing/painting the sprite. Since your paintbrush only covers 1x1 pixel at a time, itís difficult to paint details on the canvas from a far view.
-A reference photo or image of something you want to duplicate or work off of can be very helpful.
-If you need practice, try taking high-resolution pics online, shrinking them down to very small size (within 50-200 pixel range) and try to paint a pixelated, sprite-like image of that pic. Like this repaint I made of a frame from King's TTT ending I started a long time ago, but never finished :P

-Don't fret over every detail. Because you are working with only a 50x50 or so canvas, it can be difficult to depict everything accurately with just a few pixels. Practice can help, however.
-If you are uncertain about where the cropping and transparency set options are in your gif compiler or paint program, just consult that programís readme or help files and look for those topics.

And that is all I can think of to say. Hope it was of some use. Happy painting, and don't let your eyes strain you too much :)

Site hosted by Build your free website today!