Pack d'interfaccia

Cursori Paper

12 cursori del mouse (piatto) per interfacce in modalità chiaro — carta calda, accento rosso ruggine. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • cursore
  • puntatore
  • mirino
  • mouse
  • piatto
  • piatto
  • interfaccia chiara
  • minimale
  • casual
Foglio con 12 cursori del mouse (piatto) della famiglia Paper, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×739la trasparenza è mostrata a scacchiera

Su questo pack

Cursori Paper è un set di 12 cursori del mouse disegnati nello stile piatto, dove non ci sono contorni né ombreggiature di alcun tipo. Contiene una freccia e una freccia con anello di attesa, una mano che indica e un cursore di spostamento, un mirino e un aggancio bersaglio, cursori di attacco, dialogo e bottino, cursori di attesa, blocco e testo, e un cursore di ridimensionamento.

Un gioco che disegna la propria interfaccia e poi ci lascia sopra il cursore del sistema operativo ha un buco in mezzo allo schermo, ed è proprio la parte che il giocatore guarda di continuo. Il cursore è anche l’unico sprite senza controllo sul proprio sfondo: attraversa cielo, pietra, fuoco e inventario nello stesso secondo.

La profondità viene solo da un'ombra morbida a strati — tre passate sovrapposte invece di un filtro di sfocatura, perché alcuni rasterizzatori SVG scalano male una sfocatura e il PNG a 4x esce come una sbavatura. Tutto il resto è un unico colore pieno.

Dentro quello stile, questa è la lettura Paper: un'interfaccia in modalità chiaro su una palette carta calda con accenti rosso ruggine, costruita attorno a una cornice a bordo singolo, pulsanti a pillola completamente arrotondati da 140x44, barre a fasce divise in 10 segmenti e icone con contorno su una griglia da 24px. 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 cursore porta un contorno preso dall’estremo opposto della palette rispetto al corpo, ed è ciò che lo tiene leggibile su uno sfondo di cui il kit non sa nulla: un cursore scuro su una caverna scura sparisce, e nessuno stile lo rimedia. Il punto attivo è indicato nel titolo di ogni sprite invece di essere lasciato a indovinare: la freccia clicca a 0,0 e il mirino al centro, e un punto attivo spostato di tre pixel è un gioco in cui il giocatore manca ciò che ha mirato.

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 Paper, il che significa che questo kit e il kit di pannelli Paper si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a interfacce minimali e mobile.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP51 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 readmeZIP51 kB Ottieni →
Cursore freccia, punto attivo 0,0, SVG modificabileSVG409 B Ottieni →

Come si usa

  1. Prendi il punto attivo dal titolo dello sprite quando registri il cursore: freccia e mano cliccano vicino alla punta, mirino e bersaglio al centro.
  2. Usa il PNG da 32 px per un cursore hardware e resta su scale intere; il cursore hardware è composto dal sistema operativo e una scala frazionaria è dove il contorno si ammorbidisce.
  3. Passa ai cursori di attacco, dialogo e bottino dal tuo raycast di interazione invece di tingere un solo cursore, perché ciò che il giocatore legge a colpo d’occhio è la sagoma e non il colore.
  4. Il cursore di blocco è per un’azione rifiutata, non per un controllo disattivato: un pulsante disattivato lo dice già con il suo sprite, e usarli entrambi lo dice due volte.

Licenza

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

Riga di credito da copiare
"Cursori Paper" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-cursors