Neon Panel-UI-Kit — Panels mit Eckwinkeln und Buttons

Ein Sci-Fi-Konsolen-Kit auf Basis geschnittener Ecken und offener Rahmen. Es gibt nirgends einen durchgehenden Rand — vier Eckwinkel markieren die Grenzen, der Rest bleibt offen, und genau das lässt ein HUD als Overlay über der Welt lesen statt als Fenster, das sie verdeckt. Den Rest erledigen die Fasen: Sie lesen sich als bearbeitetes Metall, wo ein Eckradius nach Mobile-App aussieht.

Zwei Nine-Slice-Panels — ein eckwinkliger Fensterrahmen mit 16 px Ecken und ein vertiefter Innenrahmen mit 12 px Ecken — decken fast jede Box ab, die ein Menü braucht: Dialoge, Inventarraster, Listenhintergründe, Tooltips und Statuspanels. Es gibt gar keinen durchgehenden Rand — vier Eckwinkel markieren die Grenzen, der Rest bleibt offen, das Panel rahmt Inhalt also ein, ohne ihn einzusperren. Beide dehnen sich sauber auf jede Größe, weil die Ecken nie skalieren und die Mitte eine flache Füllung ist.

Auf den Panels sitzen vier abgeschrägte Button-Zustände: Standard, Hover, gedrückt und deaktiviert. Sie sind auf derselben 144×36-Basis mit 10 px Ecken gezeichnet, du tauschst also die Textur an einem einzigen Button-Widget und bekommst die ganze Interaktionsschleife, ohne ein Rechteck zu verschieben. Der gedrückte Zustand senkt seine Fläche um zwei Pixel und nimmt das obere Highlight weg, statt nur abzudunkeln — das lässt einen Button geklickt wirken statt bloß umgefärbt.

Alles kommt doppelt. Die SVG-Quellen sind die Dateien, in denen das Kit gezeichnet wurde — öffne sie, ändere die sechs Töne in Tiefraumblau oder den einzelnen Akzent in Zyan und exportiere neu. Die PNG-Exporte sind flach, transparent und in 1x, 2x und 4x vorskaliert, für Engines, die Bitmaps wollen — ohne vormultipliziertes Alpha und ohne eingebrannten Schatten außerhalb der Sprite-Grenzen.

Creative Commons Namensnennung 4.0 — Kostenlos für kommerzielle Nutzung. Namensnennung erforderlich. Vollständige Bedingungen · Was das in der Praxis heißt