픽셀 아트 메이커
홍수 채우기, 스포이드, 실행 취소/다시 실행 및 PNG 내보내기가 있는 브라우저 기반 픽셀 아트 편집기.
이 도구에 대해
8×8, 16×16 또는 32×32 그리드에서 브라우저에서 직접 픽셀 아트를 만드세요. 32개의 사전 설정 색상 중에서 선택하거나 사용자 정의 색상을 선택한 후 연필로 그리고, 지우개로 지우고, 버킷 도구로 영역을 채우거나, 스포이드로 기존 색상을 샘플링하세요. 최대 20단계의 실행 취소 및 다시 실행으로 편집을 안전하게 유지하세요. 완료되면 픽셀이 선명하게 보이도록 10배 확대된 PNG로 아트워크를 내보내세요.
사용 방법
- 1 그리드 크기(8×8, 16×16 또는 32×32)를 선택하고 도구를 선택하세요: 연필, 지우개, 버킷 채우기 또는 스포이드.
- 2 32개의 사전 설정 색상 견본에서 색상을 선택하거나 사용자 정의 색상 선택기를 열어 모든 색조를 선택하세요.
- 3 그리드를 클릭하거나 드래그하여 그리세요; 실행 취소 / 다시 실행 버튼을 사용하여 앞뒤로 이동하세요.
- 4 'PNG 내보내기'를 클릭하여 선명한 픽셀 완벽 출력을 위해 10배 확대된 아트워크를 다운로드하세요.
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.