Trace over a real screenshot to line up HUD elements. Image is stretched to fill the canvas exactly.
Layers
0
No elements yet. Add one below to get started.
Drag to position. Corner handle to resize. Arrow keys nudge (Shift=8px). Ctrl+Z undo, Ctrl+D duplicate.
Export
Project
Autosaves to this browser as you work. Save a .json file to back up or move to another machine.
1920 × 1080 px
X: — Y: —
960, 540
Inspector
Select an element to see and edit its exact pixel resolution and position for the 1920×1080 canvas.
Frame presets
Frame builder (live, uses colors 1 + 2)
9-slice (Unity sprite border)
Show guides
Border px
Palette (click = color 1, right-click = color 2)
Amount / intensity (bars, gauges, effects)
Segmented bar
Generators use color 1 as the base and color 2 as the accent. They follow the element's shape (circle / rounded button) and stack, so build up layers: material → widget → effects → icons.