Making Sprites for Computer Animation: Animated Web Graphics

Learn How To Use a Graphics Program to Make an Animated Character for Your Site

Sprites are computer generated two-dimensional web graphics that can be animated. With these graphics, you can create an infinite number of special effects for web pages and simple computer games. Follow these instructions for a quick method for how to make sprites.

  1. Choose your computer graphics program. There are several software options available with computer generated images used for making sprites. Consider using Paint, Photoshop or Graphics Gale. Each program works a little differently so if you are new to the program, spend some time in their basics tutorials.  
  2. Begin a new project. In your software, select to begin a new project or drawing.
  3. Start with a basic grid. Most programs should have an option for turning the background grid on. Turn the grid on.
  4. Adjust the zoom. Sprites tend to be small images that are animated so when you create them it is easier to zoom in to at least 800 percent of the document size. With the grid on from step three you will notice that your screen contains a grid of tiny squares about the size of pixels or picture elements.
  5. Decide what your sprite will look like. You can use a fully formed sprite as a model or any other image that strikes your fancy. If drawing is one of your skills feel free to create your sprite free hand out of whatever your imagination can devise. When new to the practice you may want to start with simple animals and shapes until you get the hang of the software.
  6. Draw the outline. Choose black as your ink color to create the outline. Then draw the basic outline of your character. To draw the outline you select the grid squares that will be filled in with the black color pigment. If you color the wrong grid, just select white and fill the grid again to remove the black you placed in error.
  7. Fill in with color and shading. The best sprites are in color and have shades and shadows. Pant programs offer a variety of shades of each color so adding shadows to your base color is simple. Just select a shade darker on your color palette.   
  8. Adjust your zoom to 100 percent. Once you have the color and shades you want, take a look at your sprite in real size by adjusting your zoom back to 100 percent. You should have a cute little character just waiting to be animated and added to your favorite game or website. Computer animation really brings out the best features of online games and programs.

Making a sprite takes patience since you are essentially filling it in one tiny grid square at a time. The more practice you have the easier it becomes.


Share this article!

Follow us!

Find more helpful articles: