Home › Creative › Dotmake

Pixel Art for Beginners: How to Draw Your First Sprite

Pixel art is drawing one square at a time on a small grid. It started as a technical limit of early computers and game consoles, and it stays popular because it is approachable: there are no brushes to master, and every decision is visible. It is also surprisingly hard to do well, because every single pixel counts.

This guide covers the basics that make the biggest difference for beginners: canvas size, colours, outlines, shading and saving. Then it walks through drawing a first sprite step by step, and how to do it in Dotmake.

1. Start with a small canvas

Beginners usually choose a canvas that is far too big. On a 64 x 64 grid there are 4,096 squares to fill, and drawings start to look like blurry paintings. On a 16 x 16 grid there are just 256, so each pixel matters and you finish while you are still enjoying it.

A 16 x 16 sprite is a good first project. Once that feels comfortable, move to 32 x 32 for more detail. What size should pixel art be? compares the common sizes.

2. Use only a few colours

A limited palette is what makes pixel art look like pixel art. Try four or five colours for your first sprite: an outline colour, a base colour, one shadow, one highlight and perhaps an accent. Reusing the same few colours across the drawing makes it look deliberate rather than noisy.

3. Draw clean outlines

Lines in pixel art look best when each step is consistent. A line that goes two across and one down, then two across and one down again, looks smooth. One that goes two, one, three, one looks bumpy. Irregular bumps are often called jaggies.

Watch out for doubled pixels in corners, where a line becomes two pixels thick for a moment. Remove the extra pixel so the outline stays one pixel wide. Curves look best when the steps get gradually longer or shorter, like 1, 1, 2, 3 rather than 1, 3, 1, 2.

4. Shade with a light source

Decide where the light comes from, usually the top left. Put the highlight on the parts facing the light and the shadow on the opposite side and underneath. Keep shading in solid clusters of pixels rather than scattering single dots, which tend to look like noise at small sizes.

A classic beginner habit is pillow shading: darkening all the edges evenly and making the centre light, which looks flat and puffy. Shading according to one light direction gives a much more solid result.

A first sprite, step by step

Try a simple object such as an apple, a potion bottle, a heart or a mushroom on a 16 x 16 grid:

  1. Block out the silhouette with the outline colour. Make it fill most of the grid, leaving a pixel or two of space around the edge.
  2. Fill the inside with the base colour.
  3. Add the shadow along the bottom and the side away from the light.
  4. Add a small highlight near the top on the side facing the light.
  5. Add one detail in the accent colour, such as a leaf or a label.
  6. Zoom out and look at it at small size. Fix any pixel that looks out of place, then turn off the grid to see the real result.

Looking at simple game sprites and icons as references helps a lot. Copying them for practice is a time-honoured way to learn; just do not publish copies of other people's art as your own.

5. Save without blurring

Save pixel art as PNG. JPEG compression smears the hard edges and adds stray colours. When you enlarge a drawing, use nearest-neighbour scaling by a whole number (2x, 3x, 10x), so each pixel stays a crisp square. Smooth scaling turns it into a blur.

Drawing your first sprite in Dotmake

Dotmake keeps the tools to the essentials, which suits a first project.

  1. Open the grid size option and choose 16 x 16 (sizes run from 8 x 8 to 64 x 64).
  2. Tap a swatch in the palette or open the colour picker to choose your outline colour.
  3. Draw with the pen by tapping or dragging. Use the eraser to clear squares back to the background colour.
  4. Use fill to flood the inside with the base colour, and the eyedropper to pick up a colour you have already used.
  5. Zoom in for detail, use the hand tool to move around, and use undo and redo freely.
  6. Turn the grid lines off to check the result, then use save to download a PNG. Export downloads the project data as JSON.

The web version does not keep your canvas between visits, so download before closing the tab. The downloaded PNG is a capture of the canvas as shown, so resize it with nearest-neighbour scaling if you need exactly one pixel per square. Dotmake is also on iPhone and Android.

Frequently asked questions

What size should my first pixel art be?

16 x 16 is a good first size. It is small enough to finish quickly and big enough to draw a recognisable object.

How many colours should a beginner use?

Around four or five: outline, base, shadow, highlight and one accent. Add more only when you need them.

Why does my pixel art look blurry?

It was probably saved as JPEG or enlarged with smooth scaling. Use PNG and nearest-neighbour scaling by a whole number.

What are jaggies?

Uneven steps in a line or curve that make it look bumpy. Keep the step lengths consistent or gradually changing.

Does Dotmake have a line or shape tool?

No. You draw with the pen, eraser, fill and eyedropper. Dragging the pen fills every square along your path.