How to Draw a 16×16 Pixel Art Steel Dagger, One Pixel at a Time
A diagonal weapon is a useful pixel-art exercise because it exposes every weak decision. A one-pixel wobble can bend the blade, an oversized guard can break the silhouette, and a random highlight can make steel look like plastic. This lesson solves those problems on a strict 16×16 canvas.
The finished dagger uses 54 visible pixels and only eight visible
colours. We will build it in five drawing stages. Coordinates use (x, y),
with (0, 0) in the top-left corner.
Inspect every drawing stage
Use Prev and Next to move through the saved drawing history. Turn on Show changes after the first stage to isolate the pixels added or recoloured by the current decision.
Step 1: plot the 45-degree blade gesture
Start with ten light steel pixels. Place them at:
(1,1), (2,2), (3,3), (4,4), (5,5), (6,6), (7,7), (8,8), (9,9), (10,10).
This diagonal is the spine of the whole icon. Do not draw the guard first. If the blade direction is wrong, every handle pixel will reinforce the mistake.
Step 2: wrap the blade in a one-pixel outline
Place black pixels immediately above-right and below-left of the gesture. The
blade becomes a repeating three-pixel strip: outline, steel, outline. Cap
the tip with (0,0), (1,0), and (0,1), then cap the base with (10,11).
Keep the outline one pixel thick. At 16×16, doubling even a short section makes the blade look bent or blunt.
Step 3: shade the steel along the diagonal
The blade is brighter near the tip and darker near the guard. Recolour the ten centre pixels in this order:
| Coordinates | Colour | Purpose |
|---|---|---|
(1,1), (2,2), (5,5) | light steel #CEECEC | keeps the main plane readable |
(3,3), (4,4) | shine #F4FEFE | creates a small polished flash |
(6,6), (7,7) | mid steel #A5C9C9 | begins the value transition |
(8,8), (9,9), (10,10) | shadow steel #83A3A3 | separates the blade from the warm guard |
The change is positional, not random. The four steel colours form one ordered value ramp, so the viewer reads a single reflective blade instead of coloured noise.
Step 4: build a compact crossguard
The guard occupies only three rows. Add its black boundary first, then place
warm metal at (12,10), (11,11), and (10,12). Use amber #E0993C for the
outer two pixels and gold #FBBD5D for the centre.
The zigzag is deliberate: it crosses the blade direction without becoming a large horizontal bar. That keeps the icon narrow enough to fit the diagonal composition.
Step 5: finish the grip and pommel
Continue the handle toward the bottom-right corner. Place the brown grip at (12,12) and (13,13), surround it with black, then use one gold pixel at (14,14) for the pommel. Close the silhouette with black pixels at (15,14), (14,15), and (15,15).
Here is the complete row-by-row blueprint. A dash means “leave transparent.”
| Row | Final non-transparent pixels |
|---|---|
| 0 | x0–1 outline |
| 1 | x0 outline, x1 light steel, x2 outline |
| 2 | x1 outline, x2 light steel, x3 outline |
| 3 | x2 outline, x3 shine, x4 outline |
| 4 | x3 outline, x4 shine, x5 outline |
| 5 | x4 outline, x5 light steel, x6 outline |
| 6 | x5 outline, x6 mid steel, x7 outline |
| 7 | x6 outline, x7 mid steel, x8 outline |
| 8 | x7 outline, x8 shadow steel, x9 outline |
| 9 | x8 outline, x9 shadow steel, x10 outline; x12–13 outline |
| 10 | x9 outline, x10 shadow steel, x11 outline, x12 amber, x13 outline |
| 11 | x10 outline, x11 gold, x12 outline |
| 12 | x9 outline, x10 amber, x11 outline, x12 brown, x13 outline |
| 13 | x9–10 outline, x12 outline, x13 brown, x14 outline |
| 14 | x13 outline, x14 gold, x15 outline |
| 15 | x14–15 outline |
Watch the dagger draw itself
The shared automatic drawing component compares each saved history frame and places the changed pixels one at a time. Pause whenever you want to copy the current state onto your own canvas, or reset and replay the full construction.
Automatic drawing
Start with an empty 16×16 canvas
Draw it yourself
Now rebuild the dagger on the blank grid. Use Diff to outline every cell that still differs from the exact CC0 reference. The match score includes all 256 cells, including transparency, so erase accidental background pixels too.
Draw the steel dagger yourself
Rebuild the exact 16×16 icon. Use the target, palette, undo controls, and Diff view when you need a hint.
What this tiny weapon teaches
- Plot direction before detail. A clean gesture gives the whole icon a stable axis.
- Protect the silhouette. The one-pixel black border keeps pale steel visible on any background.
- Shade with an ordered ramp. Highlights belong near the tip; darker steel belongs near the guard.
- Spend warm colours on identity. Three guard pixels and three handle pixels are enough to say “crafted weapon.”
- Let empty cells work. More than three quarters of the 16×16 canvas stays transparent, which keeps the dagger fast and readable.
The source sprite is by Shade and is released under CC0 on OpenGameArt. The tutorial sequence changes only how the drawing is explained; the final frame reproduces the source pixels exactly.