How to Make Pixel Art: A Beginner's Guide Starting at 16×16

Decide the grid size first

What trips most beginners up isn't drawing technique but choosing a size. A bigger grid seems like it would look nicer, but every extra cell is one more decision, so choosing 64×64 for your first piece is a reliable way to stall halfway. The shortest route to a finished piece is the smallest grid that fits your subject.

Note that doubling the grid size quadruples the number of cells. You can finish 256 cells at 16×16 in about 30 minutes, but 32×32 has 1,024 cells and, at the same density, takes roughly four times as long. Finish one piece at 16×16 first, then move up to 32×32 if you want more — that order makes it far less likely you'll give up.

Making pixel art in your browser, step by step

No installation or account is needed. Enter a dot count to create a grid, then click cells to fill them. If you pay attention to the order in which you place dots, even a first attempt is unlikely to lose its shape.

1. 1

   Enter a dot count and generate the grid

   Enter the number of dots per side and press “Generate grid” to get an empty canvas. Changing the size later resets what you've drawn, so decide before you start.

2. 2

   Start with the outer silhouette

   Place the outermost lines first — the outline of the face or body. Pixel art is recognised by its silhouette more than its detail, so once the outline is set, the rest is filling in. Start from the middle and you often run out of room at the edges and have to redraw.

3. 3

   Add the inner details

   Place the eyes, mouth and patterns. At 16×16, eyes are usually one or two cells. Get greedy with detail here and nobody will be able to tell what it is when it's shown small.

4. 4

   Mark “unneeded” areas in gray

   Fill cells you know will stay background in light gray. The remaining white cells then stand out as “not decided yet”, making missed spots easy to find.

5. 5

   Export as PNG

   Press “Save PNG” to save the image exactly as it looks. To keep working later, press “Save progress” and you can resume in the same browser.

Using the three states: black, gray and white

Cells in this tool aren't just filled or empty — they have three states. Whether you use the difference makes a big difference to how easy the work is.

• Use white as a to-do list: fill unneeded areas in gray first, and the number of white cells becomes the amount of work left
• Use it instead of a sketch: leave areas you're unsure about white and turn only settled cells black, so there's less erasing
• Hand it over as a pattern: for fuse beads, knitting charts or grid-paper designs, the number of black cells is the number of pieces you need
• Check symmetry: once one side is done, fill the mirror side in gray first so the centre line doesn't drift

Below the grid you'll see counts for “Needed”, “Unneeded” and “Total”. If you're making the design in beads or blocks, the needed count is exactly how many pieces to get, so check it before you go shopping.

Five tips for cleaner pixel art

When pixel art somehow looks amateurish, the reason is almost always how the cells are arranged rather than drawing skill. Follow these five points and the same subject will look noticeably better.

• 1. Put the silhouette first: at small sizes, what matters is whether the shape is recognisable as a shadow
• 2. Keep the steps of diagonal lines even: step down one cell at a time or two at a time, regularly. Irregular steps like 3 → 1 → 2 make the line look jagged
• 3. Avoid isolated single pixels: a lone cell reads as noise. Connect it into a line, or delete it
• 4. Draw only one side of symmetrical shapes: for faces and symbols, check the balance once half is done, then mirror it
• 5. Leave a one-cell margin around the edge: art that runs right to the border looks cut off when used as an icon

Tip 2 makes the biggest difference. Diagonals in pixel art can only be drawn as staircases, so even step widths are what make a line look smooth. When drawing a circle too, use long horizontal runs near the top, bottom and sides and single-cell steps around 45 degrees, and the curve will look natural.

Saving as PNG, and using it as an image

When you're done, “Save PNG” exports it as an image. The exported file has a few quirks worth knowing about, depending on how you'll use it.

• The file name includes the grid size, for example “dot-art-16x16.png”
• The image is about 512 px per side (each cell is 512 ÷ dot count rounded down, with a minimum of 4 px)
• The grid lines you see on screen are included in the image
• White cells are exported as white, not transparent (the PNG doesn't have a transparent background)

Because the grid lines are exported, the PNG works as-is as a pattern or chart on grid paper. If you want a solid icon without lines, the easiest way is to shrink the PNG in an image editor to the same number of pixels as dots, then enlarge it to the size you need. Set the resampling method to “nearest neighbour” when enlarging so the corners of each pixel stay crisp instead of blurring.

How saving progress works, and how not to lose it

At 32×32 and above you may not finish in one sitting. Press “Save progress” to store your work, and next time press “Load save” to pick up where you left off. The save lives in the browser you're using, not on a server. If you're using your pixel art as a social media icon, export it to match recommended social media icon sizes so the outline doesn't blur.

• Only one save is kept. Pressing “Save progress” again overwrites the previous one
• You can only resume on the same device and browser — you can't save on your phone and continue on your PC
• Clearing your browser's site data deletes it
• In incognito or private browsing, it's lost as soon as you close the window

FAQ

What grid size should I start pixel art with?

16×16 is the best size for a first piece. Its 256 cells are plenty for a face or icon, and you can finish in about 30 minutes. For simple symbols or marks, 8×8 also works.

Can it convert a photo or image into pixel art automatically?

No. The pixel art tool doesn't do automatic conversion; you place cells yourself on an empty grid. In exchange you can shape every cell exactly as intended, which makes it well suited to icons and patterns.

Can I make pixel art on a smartphone?

Yes. Tap a cell to fill it, so grids up to about 16×16 work fine on a phone. At 64×64 and above the cells get very small, and a PC is easier.

Can I use the pixel art I make freely?

Designs you create yourself are your own work. But if you copy an existing character or logo onto the grid, the original copyright and trademarks still apply, so check the rights holder's terms before publishing or using it commercially.

Can I open my saved progress on another device?

No. Progress is saved inside the browser, so you can only resume on the same device and browser. To move between devices, export a PNG and share the file.