Su Habbo.com è stata pubblicata la quinta sessione di domande e risposte con notMiceElf, il grafico di Habbo! Ecco cosa ci ha svelato questa volta!

 

È di nuovo quel momento! No, non è il momento di cambiare i pannolini ai vostri habbo-neonati. Sheesh. È tempo per un'altra sessione della Summer School Q&A con notMiceElf.

Siamo ancora accecati (ahhh, il bagliore.... ok .... si, si deve fare) dall'ultimo Q&A quindi era meglio "disegnare" un sorriso sul vostro viso (con queste battute)... e, come sempre, è possibile inviare una domanda quindi tenetevi pronti!

 

La domanda di oggi è: Come si fa a fare una buona GIF? (domanda di shiony)

 

Questa domanda sembrava molto semplice a prima vista e poi ho iniziato a pensare a come rispondere e spiegare in animazione la risposta e il mio cervello.... è andato fuori controllo!

Quindi, grazie per avermi fatto venire un lieve mal di testa prima del mio caffè mattutino... potrei tirare un calcio a shiony! Lidea di animazione è un po' troppo "in carne" per questo post quindi mi concentrerò di più sulla creazione di un'animazione e poi andrò a spiegare un modo decente di salvataggio del file GIF.

 

Prima di tutto. Il processo dell'animazione dipende dal programma che si utilizza. Alcuni programmi non supportano la creazione di animazioni quindi, se avete l'obiettivo di animare, assicuratevi che il programma che state utilizzando supporti questa funzione.

Se stai solo cercando di salvare un'immagine statica (quindi non animata) in formato GIF si può fare un salto al fondo di questa lezione.

La spiegazione riguarda Photoshop ma il processo non cambia molto da programma a programma.

Suggerirei di trovare un tutorial che sia specifico per il programma che si sta usando comunque.

Per ora saranno solo informazioni generali 😛 OK, andiamo...

 

Animazione:

L'animazione è un falso! Già. È un'illusione whoooo *mani al cielo*. Sono sicuro che questa te l'hanno già detta tante volte, già, ma l'animazione è una sequenza di immagini statiche con contenuti leggermente diversi.

Ognuna di queste immagini statiche è chiamata "frame". Se visto in rapida successione possiamo interpretare i cambiamenti da fotogramma a fotogramma come movimento. La quantità di fotogrammi che vediamo in un secondo si chiama "fotogrammi al secondo" (tecnico.... lo so) o FPS (i player tra voi staranno dicendo "hey, ma è l'acronimo di First Person Shooter = Sparatutto in Prima Persona!).

Parlando di GIFs l'fps diventa il ritardo impostato tra un frame e l'altro.

 

La prima cosa che dobbiamo fare è creare un nuovo file. La dimensione non ha molta importanza (smettetela di ridere!) fintanto che si adatta ciò che si sta animando ma più piccola è generalmente migliore sarà l'animazione se si parla di animazioni in pixelart.

La risoluzione della vostra immagine, d'altra parte, è qualcosa su cui si dovrà prestare attenzione. La Pixel Art dovrebbe essere di fatto creata utilizzando una risoluzione di 72 pixel per pollice. Non chiedetevi perchè quel numero. È la legge! Obbedite!

 

 

La prossima cosa che ci serve è una sequenza temporale dell'animazione.

Nella timeline di Photoshop si trova il menù "Finestra" e poi "Timeline".

Nelle versioni precedenti di Photoshop è elencato come "Animazione" invece di "Timeline".

 

 

Una volta che avete aperto la Timeline scegliete la cornice di base della vostra animazione. Il metodo del frame è abbastanza comune per altri programmi di animazione pixel ed è più facile da capire per i principianti rispetto a novità come l'interpolazione. Inoltre, l'animazione basata su un frame è un classico.

 

 

Al fine di rendere l'animazione bisogna prima disegnare alcuni fotogrammi dell'animazione in modo da unirli assieme.

Ogni fotogrammma dell'animazione dovrebbe essere creato su un nuovo livello creandolo dalla palette dei livelli. Che si tratti di Pixel Art o disegni a mano il concetto è lo stesso. Il concetto di base è collegare al meglio le immagini tra loro di modo da creare un flusso accettabile e una buona chiarezza dell'immagine.

Questa spiegazione è molto rudimentale... ci vorrebbe un libro, se siete appassionati di animazioni (o youtube...).

Su youtube, appunto, si può trovare una serie di 12 Principi base usati dagli Animatori della Disney su cui hanno basato tutto il loro lavoro. Vale la pena dargli un'occhiata.

 

Piccolo suggerimento: c'è un modo molto semplice per testare il movimento tra i fotogrammi utilizzando una tecnica chiamata "onion skinning" che permette di visualizzare più fotogrammi in una sola volta. Photoshop non supporta questo tipo di funzione però... Al fine di ottenere qualcosa di simile alla "pelle di una cipolla" (quindi gli strati) su Photoshop dovrete abbassare l'opacità degli strati sotto al disegno corrente in modo da poter vedere come si disegnare altri fotogrammi.

Gli animatori, in genere, usano un tavolo luminoso per vedere attraverso i loro disegni e questo sistema simula in se quella tecnica.

 

 

Ok, quando avete i vostri disegni pronti date un'occhiata alla vostra sequenza temporale di animazione. Facendo clic sull'icona "Nuovo Frame" nella parte inferiore della sequenza temporale trasformerete i fotogrammi in un'animazione e per farlo avrete bisogno di un fotogramma per ciascun strato dell'animazione.

Nel mio esempio si può vedere che ho creato un livello di sfondo grigio e uno strato disegnato nel primo fotogramma. Si dovrà procedere a nascondere i vari livelli. Per nasconderli basta cliccare sull'icona Occhio a sinistra della miniatura. Fate lo stesso procedimento per ogni fotogramma dell'animazione.

 

 

Modificare il "ritardo" di un frame di animazione permette di modificare il tempo, in millisecondi, con cui un un fotogramma passa al fotogramma successivo. Avrete bisogno di trovare un ritardo ottimale che permetta un passaggio fluido da fotogramma a fotogramma. Animazioni troppo lente, in genere, appaiono senza troppa continuità mentre animazioni troppo veloci non lasciano abbastanza enfasi all'osservatore che perde qualche frame nella visione.

I browser, spesso, rinunciano ad attivare alcuni ritardi di frame quando sono troppo veloci... quindi è una buona idea quella di controllare l'animazione su vari browser per vedere che tutto funzioni sempre nel modo desiderato.

 

 

La funziona "loop" permette di creare un ciclo infinito dell'animazione oppure di iniziare e finire in un determinato lasso di tempo. La maggior parte delle GIFs che vedete in giro per internet sono di solito a ripetizione.

 

Salvataggio del File:

Il formato GIF è un formato da 8bit quindi ha un massimo di 256 colori. I Pixel o sono colorati o sono trasparenti (e la trasparenza conta come colore!). I GIF non hanno la capacità di rendere semi-trasparenti alcuni pixel come le immagini da 24bit. Se hai mai provato a salvare una GIF con più colori rispetto al massimo consentito (come una foto) avrai notato che i colori vengono ridotti per adattarsi al formato 8bit. Dovrete sempre rispettare quel numero massimo di colori quando creare un'immagine. Non preoccupatevi però, 256 colori sono ancora molti!

 

 

Su Photoshop potrete salvare utilizzando l'opzione "Salva per Web" dal menù "File" e selezionerete il formato GIF. Il tipo di palette (Selettiva, Percettiva, Adattiva, etc) non importa. Il tipo di palette scelto da preferenza su alcuni colori rispetto ad altri quando si vuole ridurre i colori per portare un'immagine a 8bit. È possibile testare e vedere quale è migliore. (noi solitamente usiamo la palette selettiva).

Qualsiasi tipo di opzione automatica di dithering va evitata per la pixel art. Se hai prestato attenzione disegnando non avrai mai bisogno comunque di questa opzione. Lo stesso si può dire per il dithering di trasparenza. Ci vorrebbero dei post-it con scritto "Basta dire NO alla trasparenza dithering!".

 

 

Se si sta utilizzando un programma che costringe una GIF a salvare utilizzando la tavolozza di Windows o di qualcosa di diverso dalle palette citate sopra... buttate quel programma nel bidone e compratene un altro. I programmi che fanno questo auto-dithering spesso cercano di approssimare l'aspetto della tavolozza originale.

Otterrete delle immagini con pixel colorati in modo strano quando vengono salvati in questo modo. È orribile. Davvero orribile. I miei occhi stanno sanguinando... orribile!

 

 

Per la quantità di colore, se non si utilizzano tutti i 256 colori si vedrà solo l'importo che è stato utilizzato. L'opzione opaco è un colore che viene aggiunto al pixel semitrasparente in modo che diventi completamente opaco ed è in gran parte utilizzato per abbinare colori semi-trasparenti al colore della pagina web.

Ad esempio, se ho un'ombra che è nero trasparente, l'immagine finale sarà un bianco opaco che renderà il colore grigio chiaro. Se non si sceglie nessun colore opaco i pixel sottostanti con una certa trasparenza saranno rimossi mentre quelli sopra saranno completamente opachi.

Realisticamente, però, se stai facendo una pixel art non si dovranno mai avere pixel semi-trasparenti.

 

 

Qualsiasi opzione per il web snap significherà che i colori nella tavolozza saranno spostati per abbinare i colori standard del 1985 (che sono abbastanza brutti). Dovete evitare questa opzione come la peste!

 

 

Questo è tutto! Non male vero? Se siete su un altro programma rispetto a Photoshop probabilmente avrete un "Salva con nome" e come opzione sceglierete il formato GIF. Un sacco di caratteristiche come la tavolozza, i colori importati, il dithering sono piuttosto comuni in molti programmi e quindi dovrebbe non avrete differenze rilevanti. Certamente un programma specifico per i pixel avrà queste opzioni. Buona fortuna per il vostro "GIF-ing" in giro per internet!

 

Wow NotMiceElf, ora siamo veramente pronti per entrare nel coraggioso mondo della creazione animata!