Sumi HUD Bars — health, mana and stamina

Glossy bars at 24px. The comic sibling uses flat bands because a printed page has no specular; a wash has a wet surface, and the hard split of the gloss variant reads as that without ever becoming a smooth gradient.

The frame is a nine-slice with 9 px end caps, so it stretches to any width without the ends deforming — a full-width boss bar and a 40 px enemy nameplate bar use the same file.

The fills are separate sprites rather than baked into the frame, which is the part that matters in practice: you scale the fill's width from zero to full and the frame never moves. Each fill splits at the halfway line with a hard edge rather than a gradient, which is what reads as glass without costing a single soft pixel at 1x.

There are three colours, one per resource: health, mana and stamina. They are spaced apart in brightness as well as hue, which is the part that survives a greyscale screenshot and the most common forms of colour blindness. A set tuned to identical lightness looks balanced in a swatch row and collapses into one grey block on screen.

The segmented variant adds 8 notch lines over the same frame, for games that count discrete pips — hearts, charges, ammo — rather than a continuous percentage. It is a separate file rather than an overlay, so you can drop it in without changing your bar widget.

Three frame builds cover where bars actually sit: the standard bar, a slim one for enemy nameplates, and a vertical one, because a mana column is not a rotated health bar — rotating a nine-slice stretches its caps along the wrong axis. Each build has its own set of three fills.

Two overlay fills handle the states a single bar cannot show on its own. The ghost fill is hollow and dashed: it marks the segment just lost, so a hit reads as a change rather than a new number. The shield fill is hatched rather than tinted, because an absorb layer sits on top of the resource bar and a second colour there collides with the colour underneath it. Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x.

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice