How to Make 16-Bit Pixel Art: Sizes, Palettes and Steps

By Arron R.10 min read
To learn how to make 16-bit pixel art, work on a small canvas (16x16 to 64x64), pick a limited palette with a few shades per colour, block a silhouette, fill fl

Learning how to make 16-bit pixel art comes down to a few habits: work on a small canvas, limit your colours, place every pixel on purpose, and keep the image sharp when it reaches the screen. This guide walks through what “16-bit” really means, which sprite sizes and palettes to start with, how to draw and shade a character by hand, how to animate it, and how to turn AI art or photos into clean, grid-true pixel art when you need assets fast.

What does “16-bit” actually mean in pixel art?

Pixel art is digital art built from individual pixels, where each one is placed deliberately. It is closely associated with the low-resolution graphics of 8-bit and 16-bit era computers and consoles, which could only show a limited number of pixels and colours at once. Those limits forced artists to make every dot count, and the resulting look stuck around long after the hardware stopped needing it.

Today, “16-bit” is a style label, not a technical setting. You do not save your file in a special 16-bit format; you save an ordinary PNG. What the label promises is a recognisable look:

  • Small sprites. A sprite is a two-dimensional bitmap placed into a larger scene, which is how most 2D game characters and objects are drawn. In 16-bit style these are usually somewhere around 16 to 64 pixels tall.
  • Limited palettes. A palette is the fixed set of colours you allow yourself. 16-bit style uses more colours than 8-bit, but still few enough that each one is a decision.
  • Real shading. Compared with 8-bit art, which often relies on flat colour and strong outlines, 16-bit art adds shading ramps, highlights and some texture.
  • Visible pixels. The image is scaled up for display, but every pixel stays a crisp square.

So when you ask how to make 16-bit pixel art, you are really asking how to work inside a set of self-imposed limits that create that look. The rest of this article is about choosing those limits well.

Choosing a canvas size and palette for 16-bit sprites

The two choices that shape everything else are resolution and colour count. Get these right before you draw a single line.

Canvas size

Your canvas size is the actual pixel dimensions of the sprite before any scaling. Smaller canvases are faster to draw and easier to keep consistent; larger ones allow faces, hands and clothing detail.

Sprite sizeGood forTrade-off
16x16Items, icons, tiny overworld characters, first practice piecesFaces are a few pixels; readability depends on silhouette
32x32Top-down RPG characters, platformer heroes, enemiesThe common middle ground; room for shading without huge workload
48x48 to 64x64Fighting-game style characters, bosses, portraitsEvery animation frame takes much longer to draw

A practical rule: pick the smallest size that lets your character read clearly, and keep every character in the same game at a consistent scale. A 32x32 hero standing next to a 64x64 villager drawn at the same pixel density looks fine; mixing pixel densities (a sprite scaled 2x next to one scaled 3x) does not.

Palette

Start with a small palette, roughly 16 to 32 colours for a whole scene, and only a handful per sprite. Organise colours into ramps: a ramp is a sequence of shades of one hue, from darkest shadow to brightest highlight. Three to five steps per ramp is plenty for 16-bit style.

Two tips make ramps look professional. First, shift the hue as you go: shadows lean slightly toward blue or purple, highlights lean toward yellow, instead of just mixing in black and white. Second, share colours between ramps, so the darkest skin shade doubles as the dark outline of a brown belt. Shared colours make a sprite look unified.

The same pixel art character drawn at 16x16, 32x32 and 64x64 with matching colour ramps
Canvas size sets how much detail you can afford: start small and scale up only when you need to.

How to make 16-bit pixel art by hand: the core steps

Any editor with a one-pixel hard brush, a grid and nearest-neighbour resizing will work, whether that is Aseprite, Photoshop, Procreate or a free browser editor. In Photoshop, use the Pencil tool rather than the Brush tool, because the brush anti-aliases its edges. In Procreate, set up a small canvas and use a hard square brush with smoothing turned off. Then follow the same sequence every time.

1. Block the silhouette

Fill the character’s outer shape in one dark colour. If you cannot tell what it is from the silhouette alone, no amount of shading will save it. Exaggerate: bigger heads, wider stances and oversized weapons read better at small sizes.

2. Fill flat colours

Split the silhouette into regions (skin, hair, tunic, boots) and fill each with the middle shade of its ramp. Do not shade yet. Check that neighbouring regions contrast enough to stay distinct when the sprite is small on screen.

3. Shade from one light source

Pick a light direction, usually top-left or top-front, and stick to it for every sprite and tile in the game. Add the darker shade where forms turn away from the light, then a highlight on the surfaces facing it. Shade in clusters, groups of same-coloured pixels that describe a form, rather than scattering lone pixels, which reads as noise.

4. Refine outlines

Many 16-bit sprites use a dark outline that is slightly coloured to match the area it borders (dark red around a red cape, not pure black). Some artists drop the outline on the lit side, called selective outlining, to make the sprite feel lit.

5. Clean jaggies and stray pixels

Jaggies are uneven steps in a line, such as a run of 3 pixels then 1 then 2. Smooth curves step in consistent patterns (3, 2, 1 or 2, 2, 1, 1). Remove doubled pixels where a line turns into an L-shaped corner, and delete orphan pixels that do not belong to any cluster.

6. Use anti-aliasing and dithering sparingly

Manual anti-aliasing means placing an in-between colour where two shapes meet to soften a jagged edge. Dithering means a checkerboard of two colours to suggest a third. Both are useful at 16-bit sizes but get overused by beginners; if a sprite looks blurry or busy, remove some.

That six-step loop is the honest answer to how to make 16-bit pixel art by hand. It is slow at first, and that is normal: the learning is in the clean-up passes.

Animating a 16-bit sprite and building a sprite sheet

A static sprite is half the job. Games need idle, walk, attack and hurt animations, and they need them packed into a sprite sheet: one image that holds every frame in a grid. In technical terms a sprite sheet is a texture atlas, a single image containing many smaller images, which lets a game engine load one file and cut frames out of it.

Keep animations short in 16-bit style. A walk cycle of 4 to 6 frames and an idle of 2 to 4 frames is typical and looks right for the era. A few rules keep frames consistent:

  • Same canvas size for every frame. If the attack frame needs extra room for a sword swing, enlarge all frames, not just that one.
  • Anchor the feet. The character’s base should sit on the same row in every frame, or it will jitter in-game.
  • Use onion skinning. Most pixel editors can show the previous frame faintly under the current one, so you can move parts by a pixel or two at a time.
  • Change silhouettes, not just colours. A walk reads because limbs and the head bob change the outline.

Lay the frames out left to right in a single row per animation, with no gaps, so an engine can slice them by frame width and height. If you want a faster route to animated characters, Auto-Sprite v2 creates game-ready 2D sprites for any character, animation and art style, which you can then bring into a pixel-art workflow.

Converting AI art into 16-bit pixel art with Pixel Snap

A lot of developers now start from AI-generated characters, or from a photo or concept painting, and want them in 16-bit style. The problem is that AI “pixel art” usually is not real pixel art: the pixels are uneven sizes, edges are soft, colours drift into hundreds of near-identical shades, and animation frames do not line up. Simply shrinking the image gives you a muddy, blurry sprite.

Pixel Snap exists for exactly this gap. It converts AI-generated images or videos into crisp, real pixel art: it cleans backgrounds, extracts frames from video, snaps the art to a true square-pixel grid, locks palettes, aligns animation frames, previews the result and exports game-ready sprite sheets. Pixel Snap is a Pro tool, so it needs a paid Sorceress membership. The workflow has three stages:

  1. Start with AI art or video. Generate a character, upload existing art, or pull frames from a video clip. You can create the source image with AI Image Gen, which puts the leading image models in one panel.
  2. Clean and snap. Remove the background, choose palette limits, and force true pixel-grid output. This is where 16-bit style happens: a tight palette limit gives you the ramp-based look described earlier, and the grid snap gives every pixel the same size.
  3. Preview and export. Align the frames, test the loop, then download the sprite sheet and individual frames.

Treat the output as a strong first draft. The same clean-up habits from the hand-drawn section still apply: check the silhouette at 1x zoom, fix jaggies on the face, and make sure the light direction matches the rest of your game. Starting from a snapped, palette-locked image means you are polishing, not redrawing.

If your source is a photo, a batch of images or video with a green screen, True Pixel is the other option. It converts any image or video into pixel-art sprites and sprite sheets, with chroma keying, clean outlines, edge cleanup and batch processing built in. It is also a Pro tool. For environments, Tileset Forge turns AI art into game-ready tilesets, so your backgrounds can match your characters.

Pipeline from AI-generated character art to grid-snapped pixel art to an aligned sprite sheet
Converting AI art: clean the background, snap to a true pixel grid, lock the palette, then export aligned frames.

Getting 16-bit pixel art into your game without blur

The most common way to ruin good pixel art is in the engine, not the editor. When a game scales a 32x32 sprite up to fill a 1080p screen, it has to decide what colour each screen pixel should be. Default smoothing blends neighbouring colours, which is great for photos and terrible for pixel art. The fix is nearest-neighbour filtering, which copies the closest source pixel instead of blending.

Two more rules help: scale by whole numbers (2x, 3x, 4x) so every source pixel becomes the same size on screen, and pick a low internal resolution for your game, then let the engine scale the whole canvas up. Here is a complete Phaser 3 example that does both and plays a four-frame walk cycle from a 32x32 sprite sheet:

const config = {
  type: Phaser.AUTO,
  width: 320,
  height: 180,
  pixelArt: true, // nearest-neighbour filtering, no blur
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: { preload, create }
};

function preload() {
  this.load.spritesheet('hero', 'hero.png', {
    frameWidth: 32,
    frameHeight: 32
  });
}

function create() {
  this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 3 }),
    frameRate: 8,
    repeat: -1
  });
  this.add.sprite(160, 90, 'hero').play('walk');
}

new Phaser.Game(config);

The game renders at 320x180 and scales to fit the window, so a 32x32 hero stays chunky and sharp at any screen size. For deeper coverage of export settings, CSS and other engines, see how to make pixel art not blurry. If you would rather describe the game and let an AI build it around your sprites, WizardGenie is the Sorceress AI game engine: it writes, runs and iterates on the game for you, in the browser or as a Windows desktop app.

Common mistakes when making 16-bit pixel art

Most beginner sprites fail for the same handful of reasons. Check your work against this list before calling a sprite finished:

  • Canvas too big. Starting at 128x128 feels safer but produces something closer to a low-resolution painting. Start at 32x32.
  • Too many colours. If two shades are almost identical, merge them. Fewer colours means stronger, more readable clusters.
  • Pillow shading. Shading inward from every edge toward the centre ignores the light source and flattens the form. Choose a light direction and commit.
  • Soft brushes and resizing with smoothing. Any blurred edge or bilinear resize introduces in-between colours you did not choose. Use a hard one-pixel tool and nearest-neighbour scaling only.
  • Mixed pixel scales. Characters, tiles and UI drawn at different densities look like they belong to different games.
  • Trusting AI output as-is. Unsnapped AI images have uneven pixels and drifting palettes. Snap them to a grid and lock the palette first.
  • Only judging zoomed in. Keep a 1x or 2x preview open while you work; that is the size players actually see.

Studying sprites from games you admire helps too. Look at sprite rips at their native resolution and count the colours on a single character. It recalibrates your sense of how little you need.

The workflow at a glance

Here is the full process for how to make 16-bit pixel art, whether you draw from scratch or start from AI art:

  1. Pick a canvas size (16x16 for practice, 32x32 for most characters) and keep it consistent across the game.
  2. Build a small palette of hue-shifted ramps, three to five shades each.
  3. Block the silhouette, fill flat colours, shade from one light source, refine outlines, and clean jaggies.
  4. Animate with short cycles on a fixed canvas, anchor the feet, and pack frames into a sprite sheet.
  5. For AI art or photos, use Pixel Snap or True Pixel to snap to a true grid, lock the palette and align frames, then hand-polish.
  6. In the engine, use nearest-neighbour filtering, a low internal resolution and whole-number scaling.

The style rewards restraint. Each limit you accept, fewer pixels, fewer colours, fewer frames, is what makes the result read as 16-bit. To see which other Sorceress tools fit around this pipeline, from tilesets to sound, browse the full tools guide.

Frequently Asked Questions

How can I convert an image to 16x16 pixel art?

Crop the image to the subject, simplify the shapes, then downscale it to 16x16 with nearest-neighbour resampling so colours stay hard-edged. Reduce the result to a small palette and repaint the pixels that turned into noise, especially eyes, outlines and the silhouette. At 16x16 almost every pixel matters, so expect to hand-correct most of the image. A converter such as Pixel Snap handles the grid snapping and palette locking for you.

What is a 16-bit pixel?

In technical terms, a 16-bit pixel is one whose colour is stored in 16 bits of data, a format often called high colour. In pixel art the phrase means something different: “16-bit” describes the visual style of the console and computer era it is named after, with small sprites, limited palettes, careful shading and visible pixels. Modern 16-bit-style art is usually saved as ordinary PNG files.

Is Stardew Valley 16-bit pixel art?

Stardew Valley is a modern game, so it was not made for 16-bit hardware or bound by its limits. Its art is widely described as 16-bit style because it uses small character sprites, limited palettes, visible pixels and the top-down farming look of that console era. That is how most “16-bit” games work today: the label describes an aesthetic choice rather than a technical constraint.

What are the differences between 16-bit and 32-bit pixel art?

Both labels describe eras rather than strict rules. 16-bit style usually means smaller sprites, tighter palettes, chunkier shapes and fewer animation frames. 32-bit style tends to use larger sprites, more colours, smoother gradients, more frames per animation and finer detail like individual fingers or fabric folds. The bigger and richer the sprite, the more time each frame takes to draw, so 16-bit style is often the practical pick for solo developers.

Can I make 16-bit pixel art for free online?

Yes. Any image editor that has a one-pixel hard brush, a grid and nearest-neighbour resizing can produce 16-bit pixel art, and several run in the browser. Sorceress includes Canvas, a free in-browser image editor, for quick edits. The tools matter far less than the habits: a small canvas, a limited palette, one light source and deliberate placement of every pixel.

Sources

  1. Pixel art — Wikipedia
  2. Sprite (computer graphics) — Wikipedia
  3. Texture atlas — Wikipedia
  4. Texture filtering — Wikipedia
Written by Arron R.·2,377 words·10 min read

Related posts