Pack d'interfaccia

Hyperlane Classifica

12 elementi di classifica e obiettivi (arcade) per interfacce in modalità scuro — viola profondo, accento arancio del tramonto. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • classifica
  • tabellone
  • obiettivo
  • graduatoria
  • trofeo
  • arcade
  • arcade
  • arcade
  • corse
  • sfumatura
  • hud
Foglio con 12 elementi di classifica e obiettivi (arcade) della famiglia Hyperlane, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×1032la trasparenza è mostrata a scacchiera

Su questo pack

Hyperlane Classifica è un set di 12 elementi di classifica e obiettivi disegnati nello stile arcade, dove il colore è il corpo e non il bordo — lastre sature con estremità appuntite. 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.

Ogni lastra è riempita con una sfumatura a due passaggi lungo l'asse maggiore, e i segni sono disegnati scuri sopra il colore invece che chiari sopra il nero. Le estremità appuntite fanno parte della silhouette, quindi sopravvivono alla scalatura invece di essere un effetto di contorno.

Dentro quello stile, questa è la lettura Hyperlane: un'interfaccia in modalità scuro su una palette viola profondo con accenti arancio del tramonto, costruita attorno a due cornici concentriche, pulsanti a pillola completamente arrotondati da 192x48, barre lucide divise in 6 segmenti e icone in bicromia su una griglia da 32px. 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 Hyperlane, il che significa che questo kit e il kit di pannelli Hyperlane si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce di corse, arcade e basate sul punteggio.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP95 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 readmeZIP95 kB Ottieni →
Riga di classifica, posto 1, SVG modificabileSVG2.0 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
"Hyperlane Classifica" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/hyperlane-leaderboard