Pack d'interfaccia
Sunset Drive Kit di progressione
20 componenti di progressione e ricompensa (vaporwave) per interfacce in modalità scuro — indaco crepuscolare, accento rosa fenicottero. SVG e PNG trasparente a 1x/2x/4x.

Su questo pack
Sunset Drive Kit di progressione è un set di 20 componenti di progressione e ricompensa disegnati nello stile vaporwave, dove angoli arrotondati e ripiegati portano lastre rosa e petrolio su un fondo indaco profondo. Contiene quattro stati di nodo dell’albero abilità, collegamenti dritti, a gomito e a diramazione in due stati, un nodo di maestria bloccato e uno sbloccato, stelle di valutazione vuota, metà e piena, un distintivo di livello, una barra esperienza con tacche, un anello esperienza e un anello di ricarica.
Le schermate di progressione sono quelle in cui lo stato conta di più e in cui il colore è meno affidabile: un albero delle abilità è già coperto di grafica di abilità in ogni tonalità, quindi un nodo il cui stato è solo un colore di bordo diventa illeggibile appena ci finisce dentro un'icona.
Questo è l'unico stile di cornice che ammette una curva; tutti gli altri del catalogo sono rigorosamente spigolosi. Le sfumature percorrono l'asse maggiore in due passaggi saturi invece di spegnersi su un neutro, perché una sfumatura vaporwave slavata si legge come un errore invece che come un'atmosfera.
Dentro quello stile, questa è la lettura Sunset Drive: un'interfaccia in modalità scuro su una palette indaco crepuscolare con accenti rosa fenicottero, costruita attorno a una cornice a bordo singolo, pulsanti smussati da 176x48, barre a nucleo cavo divise in 8 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.
I collegamenti dell’albero sono la parte mancata più a lungo: un albero delle abilità non è fatto di nodi ma della relazione fra loro, e senza un connettore disegnato nello stesso stile lo sviluppatore finisce per tracciare una propria linea che non si accorda. Dritto, a gomito e a diramazione coprono una disposizione a griglia, e ciascuno arriva spento e attivo: il percorso attivo non è solo del colore d’accento ma anche più spesso, perché una schermata delle abilità è già piena di icone colorate. Il nodo bloccato è tratteggiato
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 Sunset Drive, il che significa che questo kit e il kit di pannelli Sunset Drive si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce synthwave, crepuscolari e retroromantiche.
Download
Link diretto · senza registrazione · senza pagina d'attesaSet completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme
Come si usa
- Disegna l'icona dell'abilità dentro il nodo, non sopra; la grafica del nodo lascia il centro libero esattamente per questo.
- Anima l'anello di ricarica ridisegnando l'arco anziché ruotando lo sprite — il fotogramma incluso è un esempio statico al 68%.
- Impila tre stelle della stessa dimensione per una riga di valutazione; la mezza stella esiste perché una media di 2.5 non debba essere arrotondata.
Licenza
Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica
"Sunset Drive Kit di progressione" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/sunsetdrive-progression-kit


