Badges-Be-Done
Procedural badge compositing, batch-ready.
🎨 Color Reference Image
Optional source image used for color extraction across all generate layers.
🗂 Image Sorter
Pre-process large image folders before importing: removes duplicates, filters skewed aspect ratios, and buckets by resolution. Runs locally — nothing is uploaded.
How to use
1. Background Layers
Compiled bottom-up. Not used for intersection detection.
Regenerates all generate-type background layers with unique seeds per batch image.
2. Midground Images
💡 Tips for best results
Image prep: Crop to 1:1 ratio. Use PNG with transparency for clean overlays.
Background removal: remove.bg works well for most images.
Top row — Slice Detection On: Opens the slice preview modal before processing. Choose which overlap regions get promoted above the border.
Bottom row — No Slice Detection: Composited directly, no modal.
Fills 64×64 · slice on
Native size centered · slice on
Fills 64×64 · no slicing
Native size centered · no slicing
3. Interaction Borders / Icons
Compiled before slice detection. Overlapping midground pixels can be promoted to front layers.
📦 Where to find pixel art borders
Accepts any 64×64 RGBA PNG. Only non-transparent pixels show — the rest composites cleanly over the background and midground.
- OpenGameArt.org — search "border" or "frame", filter by CC0
- Kenney.nl — UI packs often include pixel borders
- itch.io free pixel assets — search "border frame"
- Lospec.com — community pixel art tools and palettes
- Aseprite / Photoshop / GIMP — draw your own at 64×64
4. Overlay Layers
Applied after all slicing. Always renders on top. Not used for overlap detection.