Pack d'interfaccia

Byte Classifica

12 elementi di classifica e obiettivi (pixel art) per interfacce in modalità chiaro — osso freddo, accento petrolio di segnale. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • classifica
  • tabellone
  • obiettivo
  • graduatoria
  • trofeo
  • pixel
  • pixel art
  • pixel art
  • interfaccia chiara
  • puzzle
  • gestionale
Foglio con 12 elementi di classifica e obiettivi (pixel art) della famiglia Byte, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×1032la trasparenza è mostrata a scacchiera

Su questo pack

Byte Classifica è un set di 12 elementi di classifica e obiettivi disegnati nello stile pixel art, dove ogni angolo è una scala di pixel interi e nulla è antialiasato. Contiene tre righe di posto e una riga semplice, una riga evidenziata per il giocatore, un podio a tre posti, una targa di obiettivo bloccata e una sbloccata, una barra di avanzamento, due strisce di rarità e una mensola vetrina.

Oro, argento e bronzo sono il modo ovvio di disegnare i primi tre e sono anche l’unica palette che un gioco non controlla: appena il tuo accento è caldo, la riga dorata smette di leggersi come primo posto e comincia a leggersi come selezionata. E la riga che si cerca davvero è la propria, che nelle prime tre non c’è mai.

Il contorno avanza a scatti di 4px e l'ombreggiatura è un dithering di Bayer invece di una sfumatura, quindi il set sopravvive a una scalatura per fattore intero — l'unico modo in cui il pixel art può essere scalato senza ridursi in poltiglia.

Dentro quello stile, questa è la lettura Byte: un'interfaccia in modalità chiaro su una palette osso freddo con accenti petrolio di segnale, costruita attorno a una cornice a bordo singolo, pulsanti a pillola completamente arrotondati da 112x36, barre a fasce divise in 10 segmenti e icone con contorno su una griglia da 24px. Sono quelle misure a spiegare perché due famiglie possono condividere uno stile artistico senza essere intercambiabili: lo stile decide come si traccia un bordo, i numeri decidono a cosa serve l'interfaccia.

Il posto sta nella larghezza del blocco di rango a sinistra, che si restringe dal primo al terzo: l’ordine del podio si legge quindi prima di qualunque numero e resta leggibile in qualsiasi colore usi la famiglia. La riga del giocatore è ancora diversa: è l’unica disegnata con un contorno pieno, ed è questo a permettere di trovarla scorrendo invece che leggendo. Le targhe degli obiettivi si bloccano e si sbloccano per struttura, perché quella bloccata mantiene la cornice e svuota il campo: una mensola di obiettivi ha una forma già prima che se ne ottenga uno.

Ogni sprite arriva come SVG modificabile e come PNG trasparente a 1x, 2x e 4x, così puoi buttare i PNG dritti in un motore oppure aprire il vettoriale e cambiare un colore. Disegnato con le stesse misure del resto della famiglia Byte, il che significa che questo kit e il kit di pannelli Byte si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a giochi in pixel art.

Download

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

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

File inclusi in questo pack
FileFormatoPesoDownload
Set completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP44 kB Ottieni →
Riga di classifica, posto 1, SVG modificabileSVG2.8 kB Ottieni →

Come si usa

  1. Usa le righe di posto per i primi tre e la riga semplice per tutto il resto; il segnale è la larghezza del blocco di rango e non va sovrascritto.
  2. Disegna la riga del giocatore nella posizione che occupa davvero invece di fissarla in cima. Ha un contorno pieno proprio per essere trovata a metà elenco.
  3. Lascia la targa dell’obiettivo bloccato al suo posto invece di nascondere ciò che non è ancora stato ottenuto. Il campo vuoto accoglie la tua icona nella stessa misura della targa sbloccata.
  4. La striscia di rarità è una proporzione, non un grado: una striscia corta significa che in pochi lo hanno. Alimentala con la percentuale reale di completamento e non con un nome di rarità.

Licenza

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

Riga di credito da copiare
"Byte Classifica" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/byte-leaderboard