Pack d'interfaccia

Paper Kit di pannelli — pannelli a cornice singola e pulsanti

Pannelli finestra nine-slice a cornice singola in pergamena chiara, cornici di elenco incassate e quattro stati di pulsante a pillola, in SVG e PNG a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • nine-slice
  • pannello
  • pulsante
  • menu
  • sobrio
  • interfaccia chiara
  • minimale
  • casual
Pannello di menu pergamena chiara con una fascia del titolo in rosso ruggine e un'area di elenco incassata, accanto a una colonna che mostra lo stesso pulsante a pillola negli stati normale, hover con contorno e premuto
anteprima 1600×800la trasparenza è mostrata a scacchiera

Su questo pack

Un'interfaccia in modalità chiaro per giochi che non si svolgono di notte: giochi di enigmi, gestionali, giochi di carte, tutto ciò che si legge meglio su carta che su uno schermo. Tutto è invertito rispetto a un kit di gioco normale — il corpo del pannello è il tono più chiaro e i bordi i più scuri — e i pulsanti sono pillole complete, la forma che impedisce a un rettangolo chiaro di sembrare un div senza stile.

Due pannelli nine-slice — una cornice finestra a cornice singola con angoli da 20 px e una cornice interna incassata con angoli da 14 px — coprono quasi ogni riquadro di cui un menu ha bisogno: dialoghi, griglie d'inventario, sfondi di elenco, tooltip e pannelli di statistiche. Un unico bordo continuo tiene il pannello abbastanza discreto da stare dietro a testo denso. Entrambi si stirano in modo pulito a qualsiasi dimensione perché gli angoli non scalano mai e il centro è un riempimento piatto.

Sopra i pannelli si appoggiano quattro stati di pulsante a pillola: normale, hover, premuto e disabilitato. Sono disegnati sulla stessa base 140×44 con angoli da 22 px, quindi cambi la texture su un unico widget di pulsante e ottieni l'intero ciclo di interazione senza spostare un rettangolo. Lo stato premuto abbassa la sua faccia di due pixel e toglie il riflesso in alto invece di limitarsi a scurire, ed è questo a far sentire un pulsante cliccato e non semplicemente ricolorato.

Tutto arriva due volte. I sorgenti SVG sono i file in cui il kit è stato disegnato — aprili, cambia i sei toni carta calda o l'unico accento rosso ruggine, e riesporta. Le esportazioni PNG sono piatto, trasparenti e pre-scalate a 1x, 2x e 4x per i motori che vogliono bitmap, senza alfa premoltiplicato e senza ombre cotte fuori dai limiti dello sprite.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP47 kB

Kit completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme

File inclusi in questo pack
FileFormatoPesoDownload
Kit completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP47 kB Ottieni →
Pannello finestra, SVG modificabileSVG890 B Ottieni →
Pulsante (stato normale), SVG modificabileSVG233 B Ottieni →

Come si usa

  1. In Unity, importa i PNG, imposta Texture Type su Sprite (2D and UI) e il bordo su 20, 20, 20, 20 per il pannello finestra e 22, 22, 22, 22 per i pulsanti; poi imposta Image Type su Sliced sul componente d'interfaccia.
  2. In Godot 4, usa un NinePatchRect e imposta i margini della patch sugli stessi numeri, oppure trascina dentro direttamente l'SVG e lascia che Godot lo rasterizzi alla scala indicata nelle opzioni di importazione.
  3. In Unreal, importa come Texture2D, crea uno Slate Brush con Draw As impostato su Box e inserisci il margine come frazione della dimensione della texture — 0.19231 per il pannello da 104 px e 0.15714 per il pulsante da 140 px.
  4. Per risultati nitidi a scale d'interfaccia non intere, usa il PNG 2x o 4x invece di ingrandire quello a 1x, oppure punta il motore sul sorgente SVG e lascia che rasterizzi alla dimensione finale.
  5. Questo è l'unico kit chiaro del catalogo, quindi chiede testo scuro sopra — il valore d'inchiostro dell'SVG è quello su cui è stato tarato il contrasto, e sostituirlo con nero puro abbassa in realtà la leggibilità sul tono carta calda.

Licenza

Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica

Riga di credito da copiare
"Paper Kit di pannelli — pannelli a cornice singola e pulsanti" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-panel-ui-kit