点击"生成"预览二维码，然后点击"下载PNG"保存。
像素艺术创作工具
关于此工具
基于浏览器的像素艺术编辑器，支持洪水填充、取色器、撤销/重做和PNG导出。
使用方法
- 1 PNG被放大10倍（例如16×16网格导出为160×160 px），使单个像素在查看或分享时清晰可见。
- 2 选择网格尺寸（8×8、16×16或32×32）并选择工具：铅笔、橡皮擦、桶填充或取色器。
- 3 从32种预设色样中选择颜色，或打开自定义颜色选取器选择任意色调。
- 4 在网格上点击或拖动进行绘画；使用撤销/重做按钮前进或后退。
What pixel art is and why a grid changes everything
Pixel art is illustration done one square at a time on a deliberately small grid, where every pixel is a conscious decision rather than a smooth gradient. It is the look of classic video games, retro icons, and emoji-style sprites, and the constraint is the point: with only a 16×16 grid to work in, you learn to suggest a shape with a handful of well-placed blocks. This maker gives you a true pixel canvas at three sizes — 8×8, 16×16, or 32×32 — drawn on an HTML canvas with crisp, non-blurred cells and visible grid lines so you always know exactly which square you are editing.
The four tools and what each one does
| Tool | Action |
|---|---|
| Pencil | Paints individual cells in the active colour; drag to paint a streak |
| Eraser | Clears cells back to white (transparent on export) |
| Fill | Flood-fills a connected region of one colour in a single click |
| Pick (eyedropper) | Samples the colour of any cell to make it the active colour |
The fill tool uses a classic flood fill: starting from the cell you click, it spreads outward to every orthogonally connected cell that shares the original colour, stopping at any boundary of a different colour. That is how one click can recolour an entire enclosed area — a sky, a background, the inside of a shape — without touching anything outside it.
A worked example: a simple heart
Switch to the 16×16 grid and pick a red preset. With the pencil, place two small bumps near the top — a few cells each, separated by a one-cell gap — then taper the rows below inward until they meet at a single point at the bottom. That outline alone reads as a heart at small size. Now select the Fill tool and click inside the outline: the whole interior floods red in one action. Want a lighter centre? Pick a pink with the eyedropper-free custom colour input and dab a couple of highlight cells in the upper area. If a stroke goes wrong, Undo steps back through your last changes (up to 20 levels), and Redo brings them back.
Working with colour
You get a fixed palette of 32 presets covering the primaries, secondaries, and a useful range of dark and muted tones — enough to build a coherent sprite without decision paralysis. For anything specific, the Custom colour input opens your system colour picker so you can dial in an exact hex value, and the active-colour swatch always shows what you will paint next. A practical habit from real pixel artists: keep your palette small. Limiting yourself to a handful of colours is what gives pixel art its cohesive, deliberate look — sprawling palettes tend to read as noise at this resolution.
Exporting and the scaling trick
When you click Export PNG, the tool does something important: it does not save the large on-screen canvas with its grid lines. Instead it redraws your art at the true pixel resolution — one image pixel per grid cell — and scales it up by a clean factor (10×) with no smoothing, then downloads it as a PNG. So a 16×16 drawing exports as a sharp 160×160 image where every block stays a perfect square. This matters because if you ever scale a pixel image with normal interpolation it goes blurry; pixel art must always be scaled by whole-number factors with smoothing turned off, which is exactly what the export does. Empty (erased) cells export as white.
Practical tips
- Start at the size you will ship. An icon for a tiny UI badge belongs on the 8×8 or 16×16 grid; detail you add at 32×32 disappears when displayed small.
- Outline first, fill second. Lay down the silhouette with the pencil, then use Fill for the interior — it is far faster than colouring cell by cell.
- Use the eyedropper to stay consistent. Rather than hunting the palette, pick an existing cell's colour to guarantee a match.
- Changing grid size clears the canvas. Switching between 8, 16, and 32 starts fresh, so export before you resize.
- It works on touch. The canvas supports finger drawing on phones and tablets, so you can sketch a sprite on the move.
Common mistakes
- Over-detailing. The temptation at 32×32 is to render every feature; restraint and clear silhouettes read better than busy ones.
- Relying on anti-aliasing. There is none here by design — edges are hard. Suggest curves with stair-stepped cells rather than expecting smoothing.
- Forgetting undo has a limit. History holds your last 20 steps; export periodically if you are working on something you cannot afford to lose.
The entire editor runs in your browser. Nothing is uploaded — your artwork is drawn and exported locally, and the PNG is generated on your own device.