How to use the pixel art maker
- Choose a grid size (8, 16 or 32) and pick a color from the palette or the color picker.
- Click or drag on the grid to paint. You can use the eraser, fill, color picker and left-right mirroring.
- Choose a save scale and press "Save as PNG" to download an image with a transparent background.
The history of pixel art and the basics of dot graphics
Pixel art is a kind of picture made by placing each pixel, the smallest unit of a screen, by hand. Early video games and computers of the 1970s and 1980s had very limited resolution, number of colors and memory, so characters and backgrounds had to be drawn on a small grid with only a few colors, and the dot graphics style we know today took shape under those limits. Technology has advanced since, but its distinctive feel keeps it in indie games, emoticons and merchandise design.
The basis of dot graphics is simplification. Keep only the key features of the subject, make the outline clear, and reduce the number of colors. Because each cell decides the shape, how you tidy the stair-step edges decides the quality. Moving one or two cells at the edge of a picture changes the whole impression, so it is good to zoom in and refine.
Tips for your first drawings
Start with a limit of four to eight colors. A common way to give depth is to group a light, a middle and a dark tone together. Using three shades of the same color family on one object gives volume even when it is simple. Decide the direction of light and paint the same side lighter and the opposite side darker for a consistent look.
Mirror drawing is useful for quickly drawing symmetric subjects such as characters and icons. After finishing, turn mirroring off and add a little asymmetry to make it look natural. In small grids such as 16×16 each cell counts for a lot, so one mistake stands out. Use undo often while shaping the form, and check the result with a large save scale.
Tips for good pixel work
- Draw the outline first, then fill the inside.
- Reduce the number of colors you use.
- Make diagonals out of steps of equal length for a clean look.
- Shrink the picture before saving to check it reads at real size.
- Check copyright before publishing a picture that closely copies someone else's character.
FAQ
The saved image looks blurry.
Raising the save scale makes each cell a large square, which keeps it sharp. A 16×16 picture saved at ×16 becomes a 256×256 pixel PNG. When enlarging it in a viewer or a site, use the nearest-neighbor (pixel-preserving) method so the dots do not smear.
Which size should I choose?
8×8 suits very simple icons, 16×16 suits characters and emoticons, and 32×32 suits more detailed sprites. More cells allow richer expression but take longer to draw. Starting with 16×16 is recommended.
Can I load a saved picture again?
This tool can only download the picture as a PNG and cannot open editing files. If you may want to edit later, keep the PNG and redraw it on a grid of the same size.
Notes & limitations
This is a simple pixel editor without layers, animation or saving of editable files. When you use what you make, take care not to copy other people's work without permission.