Pack d'interfaccia
Oak Interfaccia tutorial
12 segni di tutorial e avvio (stilizzato) per interfacce in modalità scuro — marrone legno, accento ottone lucidato. SVG e PNG trasparente a 1x/2x/4x.

Su questo pack
Oak Interfaccia tutorial è un set di 12 segni di tutorial e avvio disegnati nello stile stilizzato, dove la cornice è intagliata, con pinnacoli che sporgono oltre gli angoli e una gemma incastonata in ciascuno. Contiene quattro fumetti con la punta in ciascuna direzione, un anello di evidenziazione pieno e uno tratteggiato, un riquadro di evidenziazione a squadre, due stati dell’indicatore di passo, un segno di tocco, una scia di trascinamento e una striscia per saltare.
Ogni altro kit di questo catalogo copre una parte dello schermo. Questo la indica, e ciò ribalta le regole: un’evidenziazione che riempie il proprio centro nasconde ciò che sta evidenziando, e un fumetto che può puntare in una sola direzione non serve su tre dei quattro bordi dello schermo.
L'ornamento fa parte della silhouette invece di essere disegnato sopra, così la cornice resta riconoscibile a dimensione di miniatura. La faccia porta una sfumatura verticale a tre passaggi — il massimo che un kit piatto può avvicinarsi a uno smusso dipinto.
Dentro quello stile, questa è la lettura Oak: un'interfaccia in modalità scuro su una palette marrone legno con accenti ottone lucidato, costruita attorno a due cornici concentriche, pulsanti a forma di scheda da 160x48, barre lucide divise in 8 segmenti e icone piene 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 fumetto arriva con la punta su ciascuno dei quattro lati come sprite distinti e non come un unico palloncino da ruotare, perché ruotarlo manda l’ombreggiatura dalla parte sbagliata e un fumetto di tutorial serve su tutti e quattro i bordi dello schermo nella stessa sessione. L’anello e il riquadro di evidenziazione sono vuoti, solo contorno e nessun riempimento, così ciò che sta sotto resta del tutto visibile: è tutto il punto. I punti dei passi sono contabili, così si vede quanto tutorial manca, ed è l’unica cosa che spinge a premere Avanti.
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 Oak, il che significa che questo kit e il kit di pannelli Oak si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce fantasy e da RPG.
Download
Link diretto · senza registrazione · senza pagina d'attesaSet completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme
Come si usa
- Scegli il fumetto in base al bordo su cui poggia invece di ruotare uno sprite; le quattro punte sono disegnate perché l’ombreggiatura resti identica in tutte.
- Metti l’anello o il riquadro di evidenziazione sopra il bersaglio senza disegnare nulla all’interno. Il velo va dietro l’evidenziazione, non dentro.
- Usa l’anello tratteggiato per ciò che va premuto e quello pieno per ciò che va guardato, e mantieni questa distinzione per tutto il tutorial.
- Alimenta i punti dei passi con il numero reale di passi. Il tutorial che si salta è quello di cui non si sa la lunghezza.
Licenza
Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica
"Oak Interfaccia tutorial" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-tutorial-ui


