La mia GIF pasquale animata

Come realizzare una GIF animata

Premessa

In questo post andrò a spiegare in che modo ho realizzato questa gif a tema pasquale.

Operazioni preliminari

Per prima cosa ho cominciato a cercare su Internet delle gif pasquali così da poter prendere uno spunto da poi partire. Ho guardato qualche gif, ma nessuna di quelle mi piaceva particolarmente, finché non ho trovato questa piccola animazione.

Come ho realizzato la mia GIF

Per realizzare un'animazione bisogna creare livelli diversi per ogni movimento che si vuole far compiere. 

Ho aperto un documento quadrato 1000X1000 poi ho cominciato a realizzare:

Lo sfondo

Ho colorato il primo livello di due gialli diversi per creare lo sfondo (giallo chiaro: #f4fb24, giallo scuro: #fadd1c)  

L'uovo

Poi ho scaricato l'immagine di un uovo che ho inserito in diversi livelli, uno un po' più spostato dell'altro, per fare in modo di riprodurre l'azione della caduta. Poi, una volta deciso il punto in cui l'uovo sarebbe atterrato, ho realizzato un nuovo livello e ho creato l'ombra dell'uovo. Ho creato altri 4 livelli, ognuno per ogni linea della crepatura dell'uovo. Grazie a questa linea è stato anche più semplice selezionare la parte superiore dell'uovo e creare un "livello tagliato". Ho copiato questo livello 3 volte e ho sistemato ognuno di questi in modo da dare l'animazione dell'uovo che si apre e, una volta trovata la posizione in cui il guscio sarebbe caduto, ho creato un altro livello per realizzare l'ombra. 

Il pulcino

Per quanto riguarda il pulcino ho trovato l'immagine su Internet e lo portata su Photoshop. Qui l'ho ridimensionata rispetto all'uovo e ne ho fatte 4 copie da posizionare una sopra l'altra in modo tale da dare il senso del movimento prestando attenzione al portare i primi due "livelli pulcini" sotto il livello dell'uovo tagliato, per dare l'impressione che stesse uscendo da quello.

La scritta

La scritta è stata realizzata con un "Impact", 400pt, con un colore tendente al marrone (#870d07). Non ho dovuto creare un nuovo livello su cui posizionare la scritta dato che nel momento  in cui creo un box testo il livello si crea da solo, in oltre ho posizionato la scritta in alto e non le ho dato un movimento da eseguire quindi non ho dovuto realizzare altri livelli.

L'animazione

Per creare l'animazione ho spento tutti i livelli lasciando acceso solo il livello dello sfondo, quindi sono andata su "Finestra>Timeline" e una volta aperta la timeline ho selezionato l'opzione "crea timeline video". Sul pannello della timeline è comparso un fotogramma, quello dello sfondo, per cui mi sono recata vicino al cestino vicino al pannello appena aperto e ho schiacciato l'icona del "+" per creare un nuovo fotogramma. A questo punto ho attivato il primo livello (l'uovo che comincia a cadere) e ho schiacciato di nuovo il "+" per realizzare un nuovo fotogramma. Ho realizzato li stessi passaggi per tutti il livelli diversi che avrebbero dovuto esserci nell'animazione. 

Velocità di riproduzione

 
Dato che la gif veniva riprodotta troppo velocemente ho modificato la durata dei fotogrammi. Ho selezionato tutti il fotogrammi (ne ho schiacciato uno, poi tenendo premuto "shift" ho schiacciato sugli altri), ho schiacciato la parte bassa dell'icona del fotogramma, dove c'è scritto "0,1▼" e ho premuto "0,3", poi sono andata sull'ultimo fotogramma e ho impostato 1,5 sec.

Esportazione

Mi sono recata su "File>Esporta>Salva per Web (versione precedente)".

Qui ho impostato:

• predefinito: GIF 128 con dithering
• animazione>opzioni ciclo> Sempre

e ho schiacciato "Salva...".

Per visualizzare la gif mi basterà selezionarla e premere "invio" o la barra spaziatrice.

Conclusioni

Il lavoro è stato abbastanza carino, una cosa diversa dalla solita foto statica e per la realizzazione non ho impiegato molto tempo dato che il lavoro mi coinvolgeva e ho deciso di realizzarlo subito appena mi è venuta in mente un'idea che, grazie alla documentazione fatta in precedenza, si è presentata chiara nel mia mente. Non ho trovato questo lavoro particolarmente complesso, più che altro laborioso, perché bisogna creare tanti livelli e posizionarli in maniera corretta.