Pack d'interfaccia

Redline Set di cornici HUD

12 cornici HUD (cyberpunk) per interfacce in modalità scuro — nero sangue, accento ambra d'avviso. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • cornici hud
  • fantascienza
  • cyberpunk
  • sovrapposizione
  • cyberpunk
  • cyberpunk
  • cyberpunk
  • allerta
  • hud
  • rosso
Foglio con 12 cornici HUD (cyberpunk) della famiglia Redline, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×1597la trasparenza è mostrata a scacchiera

Su questo pack

Redline Set di cornici HUD è un set di 12 cornici HUD disegnati nello stile cyberpunk, dove ogni cornice ha il suo contorno asimmetrico — una tacca su un angolo, una guida lungo un bordo. Contiene una cornice di pannello principale, una cornice di lettura dati, una cornice da console, una cornice da terminale, uno striscione d'allerta, una larga striscia di stato, un'alta colonna laterale, una cornice per ritratto quadrata, un'etichetta e un badge compatto.

La maggior parte dei set HUD gratuiti è un rettangolo in dodici dimensioni. È quello il segnale: la vera grafica d'interfaccia dà a ogni cornice il proprio contorno, perché una lettura dati, un ritratto e uno striscione d'allerta non hanno lo stesso compito e non dovrebbero avere la stessa forma. Un set la cui unica differenza è la larghezza si legge come riempitivo appena ne metti due insieme sullo schermo.

La silhouette è composta e non scalata: ognuno dei quattro angoli e ognuno dei quattro bordi riceve il proprio trattamento, quindi non ci sono due cornici del set che condividano un contorno. Il bagliore al neon è una pila di tratti a opacità calante, non un filtro di sfocatura — alcuni rasterizzatori SVG applicano i filtri in modo diverso e trasformano l'alone in una sbavatura a 4x.

Dentro quello stile, questa è la lettura Redline: un'interfaccia in modalità scuro su una palette nero sangue con accenti ambra d'avviso, costruita attorno a una cornice a bordo singolo, pulsanti smussati da 140x36, barre a nucleo cavo divise in 10 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.

Ogni cornice qui ha la propria silhouette — i quattro angoli e i quattro bordi sono trattati in modo indipendente, così una cornice ha l'angolo in alto a destra intagliato e una guida su un lato mentre la successiva ha angoli ripiegati e una V su entrambi i lati lunghi. Nessuna è la copia ingrandita di un'altra. I segni applicati (blocchi di tratteggio, file di tacche, strisce a codice a barre, galloni) stanno solo sui bordi: il centro resta libero perché è lì che vanno la tua mappa, il tuo ritratto o il tuo testo.

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 Redline, il che significa che questo kit e il kit di pannelli Redline si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce cyberpunk, fantascientifiche e da futuro prossimo.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP201 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 readmeZIP201 kB Ottieni →
Cornice del pannello principale con angolo in alto a destra intagliato, cyberpunk, SVG modificabileSVG2.8 kB Ottieni →

Come si usa

  1. Applica il nine-slice solo sulle zone dritte. Ogni cornice indica i suoi margini sicuri nella scheda, e i lati la cui metà porta una tacca o una V sono marcati come non stirabili — se li stiri, il segno cresce con la cornice.
  2. Disegna il tuo contenuto dentro la cornice, non sopra: ogni silhouette lascia il centro vuoto apposta e nessuno dei segni applicati vi si spinge dentro.
  3. Il bagliore è disegnato come tratti sovrapposti e non come un filtro di sfocatura, quindi il PNG a 4x resta nitido. Se vuoi un bloom più forte, aggiungilo nel motore sopra invece di scalare lo sprite.

Licenza

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

Riga di credito da copiare
"Redline Set di cornici HUD" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/redline-hud-frame-set