8-Bit Pixel Graphics Art

8-Bit graphics are characterized as having a maximum of 256 colors on the screen at one time, and no alpha channel.

I'm starting with a public domain portrait of Nikola Testa. 766x662.

  • First, I duplicate the layer so I have a backup of the original.
    The reason is, sometimes reducing the number of colors will result in the loss of an edge between the subject and the background. In which case, you'll want the original art so you can create a mask, and mask the art before proceeding. Ideally, though, it's easier to do any mask work after the pixelized reduction is complete.
    In this case it wasn't necessary as the background never blended with the subject, as seen in the cutout version.
  • Then select the top layer and apply the Cutout filter. The Number of Levels is the number of colors, so anything from 2 to 8 would qualify as 8-bit.
    Edge Fidelity should be at the lowest setting of 1.
    Edge Simplicity should be set at the highest level that maintains recognizability of the image, in this case a value of 5.

  • Next, I copy/paste the cutout to a new project file.
  • This next step depends on your project goals.
    Here, I simply resize to a height of 32px, resampling with Nearest Neighbor interpolation.

  • Save the image in an indexed or otherwise lossless format such as PNG, GIF, or TIF. Do not save JPG as it will introduce compression artifacts.
  • Next I use the Wand tool set at Tolerance 0, Contiguous, with Anti-alias disabled.
    Use this to carefully select portions of the background to recolor them to create a perfect knockout.
    Shift Select on the background with the wand until all of the desired background is selected.
    Create a new layer and fill it with a color.
    Boom again!


Here is a more video-gameish example


Here we show the original artwork and the resulting 32x rendering, followed by a 64x enlargement of the 32x for your viewing pleasure.
At this point, you can use the Pencil tool to easily make any minor adjustments.
Finally, you can save in an indexed format so you can preview the actual number of colors used before adding the art to your sprite sheet.

The final note is that there's basically only 2 tricks:

  1. Reduce the image with Nearest Neighbor interpolation.
  2. Use the Cutout filter when dealing with a continuous tone image, such as a photograph, or of you need to reduce the number of colors.

Animation specifications for your artist

  • Generally you want exaggerated movement in animation.
  • Determine any necessary hopping or bouncing rhythm, with regard to any limits in the available space.
  • Determine the number of necessary frames.
  • Make sure they are testing the animation before sending, in a GIF or video editing app.
  • Ideally, you want masked or transparency artwork, not solids or scans.
  • Make sure they know there could be edits.

776 reads • Last Modified: Tuesday, August 23, 2016