How to make sprite animations

Written by jennifer meyer
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make sprite animations
You can replicate shading by varying the colour of each pixel. (High-tech pixelated backdrop. image by artcalin from

Early video games had very limited graphics capabilities. Each game character, or "sprite," was rendered as an 8 or 16 bit picture that looked extremely blocky due to the image's low resolution. These days sprite creation has become its own art form and artists willingly accept the limitations of the past to create their own sprite comics and animations. Creating a sprite animation with current technology is a simple process, requiring only an art program that can create animated .gif files.

Skill level:

Things you need

  • Graph paper
  • Art program with gif support

Show MoreHide


  1. 1

    Design your sprite on graph paper. Each square on the graph paper represents one pixel of the sprite. Design each pose your sprite will have in your animation. Your sprite should be at most 8 by 8 squares or 16 by 16 squares, depending on whether you wish to replicate an 8 bit sprite or a 16 bit sprite.

  2. 2

    Open your art program. Turn off the antialiasing. There is usually a box in the Options menu to do this. Antialiasing is when a program smooths the edges of your artwork, blending it with its surroundings. If you keep it on, it will alter the pixels of your sprite.

  3. 3

    Click on the File menu and select New to start a new project. A popup window appears displaying the project's settings. Enter in 100 pixels for both the height and width of the project. Click on the Background option and select a transparent background. Click on OK.

  4. 4

    Draw the first pose of your sprite using the Pencil tool. Do not use the Brush tool as this is not as precise a tool as you need. Draw the sprite pixel by pixel, using your graph paper design as a guide.

  5. 5

    Create a new layer and draw the next pose of your sprite animation on top of your first. If the difference between the two poses is slight, you may find it easier to copy the first pose, paste it into the new layer, and then alter it. Create a new layer for each pose of your animation.

  6. 6

    Go to the "File" menu and select "Save for Web". If your program does not have this option, select "Save As". Enter a title for your file and select .gif for the file format. Find the box that asks if the file is to be animated and check it. Save your file. You now have an animated .gif of your sprite.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.