Carbon Kit di pannelli — pannelli con squadrette e pulsanti

La stessa sfumatura speculare a cinque passaggi e lo stesso motivo di linee spazzolate della famiglia in acciaio neutro, su una palette molto più scura e con il corpo aperto in squadrette d'angolo. È quest'ultimo cambiamento a trasformare un pannello nella ghiera di uno strumento: un bordo chiuso si legge come una finestra, quattro squadrette si leggono come qualcosa imbullonato a un cruscotto. I rivetti restano, perché un pannello di cabina che non è fissato a nulla è un rendering.

Due pannelli nine-slice — una cornice finestra con squadrette agli angoli con angoli da 10 px e una cornice interna incassata con angoli da 8 px — coprono quasi ogni riquadro di cui un menu ha bisogno: dialoghi, griglie d'inventario, sfondi di elenco, tooltip e pannelli di statistiche. Non c'è alcun bordo continuo — quattro squadrette segnano i limiti e il resto resta aperto, così il pannello incornicia il contenuto senza rinchiuderlo. 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 smussato: normale, hover, premuto e disabilitato. Sono disegnati sulla stessa base 152×44 con angoli da 4 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 quasi nero o l'unico accento ambra d'avviso, e riesporta. Le esportazioni PNG sono piatte, 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.

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