Pack d'interfaccia

Inkwell Caselle d'inventario — griglia da 64px

13 caselle inventario fumetto inchiostrato da 64×64: vuota, hover, selezionata, bloccata, negata, destinazione; equipaggiamento tondo ed esagonale, hotbar, tre cornici rarità.

  • ui
  • svg
  • png trasparente
  • inventario
  • casella d'inventario
  • cornice oggetto
  • rarità
  • griglia
  • fumetto
  • cartoon
  • spesso
  • interfaccia chiara
Una fila di caselle d'inventario quadrate su sfondo a scacchiera che mostra gli stati vuota, hover, selezionata con segni agli angoli e bloccata con tratteggio diagonale, seguita da cornici di rarità colorate e da una griglia di otto caselle
anteprima 1600×640la trasparenza è mostrata a scacchiera

Su questo pack

Caselle d'inventario da 64px sul fondo chiaro. L'interno incassato è un secondo tono piatto invece di una sfumatura, che è tutta la grammatica del cel shading; i gradi di rarità aggiungono segni d'angolo contabili perché il grado si legga anche con il colore tolto.

Una griglia d’inventario non ha bisogno di un pannello, ma di un quadrato che si affianca. Ogni casella qui è 64×64 con gli stessi ingombri esterni: l’unica eccezione è la casella a due celle per gli oggetti grandi, 128×64, che è un file a sé e non un quadrato stirato, perché stirare una casella che non è nine-slice ne deforma gli angoli. Distanziale di 68 px e i bordi si leggono come un’unica griglia invece che come una fila di scatole separate.

Gli stati sono disegnati come struttura, non come colore. La casella selezionata riceve segni d’angolo, quella bloccata una tratteggiatura diagonale, quella in hover alza il bordo di un gradino, quella negata porta una croce e la destinazione di rilascio una cornice d’accento tratteggiata. È voluto: la schermata inventario è la superficie più rumorosa di quasi ogni gioco, sta sotto illustrazioni di oggetti di ogni tinta insieme, e uno stato che è solo un colore di bordo sparisce nel momento in cui nella casella c’è una spada rossa.

Negata e bloccata sono sprite distinti di proposito. Una casella bloccata potrà aprirsi più avanti; una negata sta rifiutando l’oggetto che hai sul cursore. Disegnarle uguali è il modo in cui un inventario finisce per insegnare al giocatore la regola sbagliata. Le caselle equipaggiamento rompono il quadrato per lo stesso motivo: quella accessorio è rotonda e quella gemma esagonale, così la forma dice cosa ci va prima di qualsiasi tooltip.

Le tre cornici di rarità riprendono i colori di colpi, carica e combo dal resto della famiglia, ciascuna con un segno d'angolo oltre al bordo colorato — così chi ordina per rarità legge due segnali, e nessuno dei due compete con la grafica dell'oggetto al centro della casella.

Tutto è incluso come SVG modificabile e come PNG piatto trasparente a 1x, 2x e 4x. Gli interni delle caselle sono trasparenti, quindi ciò che renderizzi dietro la griglia si vede attraverso, invece di un colore di sfondo cotto nell'immagine.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP119 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 readmeZIP119 kB Ottieni →
Casella vuota, SVG modificabileSVG772 B Ottieni →
Casella selezionata con segni agli angoli, SVG modificabileSVG1.2 kB Ottieni →

Come si usa

  1. Disponi le caselle con un passo di 68 px — lo sprite da 64 px più 4 px di spazio — e i bordi resteranno a un pixel di distanza invece di raddoppiarsi.
  2. Disegna l'icona dell'oggetto centrata nella casella a circa 45 px; l'incavo interno è di 58 px, quindi qualsiasi cosa più grande tocca il bordo e si mangia la cornice.
  3. Scambia l'intero sprite della casella per gli stati selezionata e bloccata invece di sovrapporre una tinta, perché i segni agli angoli e il tratteggio fanno parte dello sprite.
  4. Le cornici di rarità sostituiscono direttamente la casella vuota — stessi limiti, stesso incavo — quindi un cambio di rarità è un solo scambio di texture senza toccare il layout.

Licenza

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

Riga di credito da copiare
"Inkwell Caselle d'inventario — griglia da 64px" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/inkwell-inventory-slots