Il tuo primo sprite

Apri l'editor, crea uno sprite, disegna, e salva ed esporta il tuo lavoro.

Qui vedrai come creare un piccolo sprite dall'inizio alla fine: crearlo, disegnare, annullare gli errori e ottenere un PNG. Richiede circa cinque minuti.

Apri l'editor

Vai su app.pxstud.io. Non c'è nulla da installare e nessun account da creare: l'editor parte con un progetto chiamato "Progetto senza titolo" che contiene un solo sprite vuoto, "Senza titolo 1" (64×64 pixel, trasparente, con una palette iniziale di 24 colori).

Il layout predefinito ha:

  • la barra dei menu in alto;
  • la palette, il selettore colore e i colori di primo piano e di sfondo a sinistra;
  • la barra delle opzioni degli strumenti, la tela e la timeline al centro;
  • la barra degli strumenti a destra.

Su un telefono o in una finestra piccola, l'editor usa invece un layout compatto, con i pannelli laterali raccolti in schede. C'è comunque tutto; vedi Lo spazio di lavoro.

Crea un nuovo sprite

Scegli File > Nuovo sprite... (Ctrl+Alt+N), oppure fai clic su + in fondo alle schede degli sprite. La finestra Nuovo sprite si apre su 64×64.

La finestra Nuovo sprite con la scheda di preset Vuoto aperta, dimensioni quadrate da 8x8 a 256x256, e a destra i campi Nome, Larghezza, Altezza, Modalità colore, Sfondo e PaletteLa finestra Nuovo sprite con la scheda di preset Vuoto aperta, dimensioni quadrate da 8x8 a 256x256, e a destra i campi Nome, Larghezza, Altezza, Modalità colore, Sfondo e Palette
La finestra Nuovo sprite
  • I Preset in alto inseriscono dimensioni comuni: Vuoto (quadrati e schermi di gioco), Social (YouTube, Instagram e altro), Console (gli schermi nativi dei sistemi classici e di console fantasy come PICO-8), Store (Steam, itch.io e gli store di app) e Recenti (le dimensioni che hai usato).
  • Per le dimensioni di Social e Store, una riga Dimensione pixel offre tele più piccole che si ingrandiscono in modo esatto. Scegli "320x180 ×4", disegna a 320×180 ed esporta al 400% per ottenere un'immagine nitida da 1280×720.
  • Larghezza e Altezza impostano tu stesso la dimensione.
  • Modalità colore è Colore RGBA (qualsiasi colore, con trasparenza), Scala di grigi o Colore indicizzato (ogni pixel è uno dei colori della palette).
  • Sfondo è Trasparente, Bianco o il tuo colore di sfondo. Uno sfondo non trasparente diventa un livello Sfondo.
  • Palette avvia lo sprite con la palette predefinita, una di Le mie palette o una palette integrata.

Fai clic su Crea. Lo sprite si apre in una nuova scheda, nel progetto attuale.

Disegna

  1. Scegli un colore: fai clic su un campione della palette per renderlo il colore di primo piano, oppure fai clic con il tasto destro per renderlo il colore di sfondo. Premi X per scambiare i due.
  2. Scegli la Matita (B) e trascina sulla tela. Il tasto destro del mouse disegna con il colore di sfondo.
  3. Prova il Secchiello (G) per riempire un'area, il Rettangolo (U) per i riquadri e la Gomma (E) per cancellare pixel. Tenere premuto Alt sulla tela preleva un colore con il Contagocce.

Ogni strumento è descritto nel riferimento degli Strumenti.

Annulla con Ctrl+Z e ripeti con Ctrl+Shift+Z o Ctrl+Y. Ogni sprite ha la propria cronologia modifiche, e il pulsante della cronologia sotto di essi nella barra degli strumenti (oppure Modifica > Cronologia modifiche) mostra ogni passo come un albero, così puoi tornare a uno qualsiasi, compresi i passi che hai annullato e poi sostituito con qualcos'altro.

Muoviti nella tela

  • Zoom con la rotellina del mouse o il pizzico sul trackpad (zooma attorno al puntatore), oppure con Ctrl+= e Ctrl+-. Ctrl+Shift+0 adatta l'intero sprite alla vista.
  • Panoramica con lo scorrimento a due dita sul trackpad, il tasto centrale del mouse o la Mano (H).
  • Su un touch screen, un dito disegna e due dita pizzicano per zoomare e fare la panoramica. Tocca con due dita per annullare, o con tre per ripetere.

Salvare

Non devi salvare: ogni modifica viene conservata nel tuo browser mentre lavori, e l'intestazione mostra Salvato in locale quando è fatto. Chiudi la scheda e torna più tardi, e il tuo progetto, i suoi sprite e le schede che avevi aperto sono ancora lì. L'editor funziona anche offline dopo che l'hai aperto.

Puoi anche installare l'editor come app, con la sua finestra e la sua icona: in Chrome, Edge e altri browser basati su Chromium, usa l'icona di installazione in fondo alla barra degli indirizzi; su iPhone e iPad, tocca Condividi, poi Aggiungi alla schermata Home. Su un computer o su un telefono Android, l'app e la scheda del browser condividono lo stesso lavoro. Su iPhone e iPad, l'app della schermata Home tiene una copia tutta sua, separata da quella di Safari: accedi a Sync in entrambe per avere gli stessi sprite.

Esporta un PNG

Scegli File > Esporta... (Ctrl+Alt+Shift+S). La finestra mostra un'anteprima dal vivo del file che otterrai.

  • Tipo: PNG, GIF animata, PNG animato, Sprite sheet, file Aseprite, WebP, video MP4 e altro.
  • Ridimensiona: ingrandisci l'immagine per passi interi (dal 100% al 1600%) così ogni pixel resta un quadrato nitido. La pixel art di solito si disegna piccola e si esporta grande.
  • Fotogrammi: tutti, solo quello attuale, o quelli di un tag.

Fai clic su Esporta e il file viene scaricato.

Trova qualsiasi comando

Premi Ctrl+K per aprire la palette dei comandi e scrivi ciò che vuoi ("capovolgi", "onion", "esporta"). Elenca ogni comando con il suo menu e la sua scorciatoia, e quelli che hai usato di recente vengono per primi.

Poi

  • Livelli: disegna separatamente contorno, colori e ombreggiatura.
  • Lo spazio di lavoro: disponi i pannelli come preferisci.
  • Menu: tutto ciò che c'è nella barra dei menu.