Oak Panel-UI-Kit — doppelt gerahmte Panels und Buttons

Ein warmer Holzrahmen für die Art Spiel, die ein Inventarraster und ein Questlog hat. Zwei konzentrische Ränder mit Spalt dazwischen geben ihm ein geschnitztes Aussehen statt eines flachen braunen Rechtecks, und die tabförmigen Buttons sitzen auf einer Messing-Grundlinie, eine Reihe davon liest sich also als Satz Seiten statt als Reihe getrennter Elemente. Alles hier ist eine Nummer größer als ein Standard-Kit, denn ein Fantasy-Menü wird meist betrachtet, nicht überflogen.

Zwei Nine-Slice-Panels — ein doppelt gerahmter Fensterrahmen mit 32 px Ecken und ein vertiefter Innenrahmen mit 20 px Ecken — decken fast jede Box ab, die ein Menü braucht: Dialoge, Inventarraster, Listenhintergründe, Tooltips und Statuspanels. Zwei konzentrische Ränder mit einem Spalt dazwischen wirken geschnitzt statt gezeichnet — das trennt eine gefertigte Oberfläche von einem Rechteck mit Kontur. 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 Tab- Button-Zustände: Standard, Hover, gedrückt und deaktiviert. Sie sind auf derselben 160×48-Basis mit 16 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 Holzbraun oder den einzelnen Akzent in poliertes Messing 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