Creare gif animate con Photoshop

Finalmente dalla versione Cs2 di Photoshop qualcuno alla Adobe si è accorto che uno dei motivi principali per cui veniva utilizzato ImageReady, il software che si installava insieme a Photoshop, era prettamente la realizzazione dei banner animati.

Per fortuna come già detto, fin dalla versione Cs2 di Photoshop abbiamo a disposizione la finestra Animation (Animazione) che si trova come al solito sotto la voce di menu principale Window (Finestre).

Creare un banner animato o meglio dire, una gif animata è estremamente semplice con Photoshop, specialmente se si ha un minimo di dimestichezza con il concetto di animazione fotogramma per fotogramma (frame by frame).

Per chi non avesse idea su come procedere ecco i passi principali da seguire:

1. Aprite un file vuoto delle dimensioni della vostra gif animata, ad esempio 130×68px (ovviamente le dimensioni possono essere variabili a seconda delle vostre esigenze)
2. Incollate nel documento appena creato in Photoshop le immagini che comporranno la vostra animazione. Come risultato avrete tanti livelli quante sono le immagini. Ricordate che ogni volta che incollate in un documento una foto, viene creato automaticamente un livello nuovo.
   
3. Questa sopra indicata è bene o male la scena che dovreste avere sotto i vostri occhi; io ho usato solo 3 immagini.
4. Nella finestra Animation premete 2 volte il pulsante Duplicate selected frames (lo stesso che usiamo per creare nuovi livelli) in modo da ottenere un totale di 3 fotogrammi (se avete usato più foto, cliccate più volte…)
   
5. Ora che abbiamo come nel mio caso 3 fotogrammi dobbiamo a partire dal primo, rendere visibile solo il livello che desideriamo. Io ad esempio ho reso visibile al primo fotogramma il livello Img3, al secondo il livello Img1 e al terzo il livello Img2.
6. Una volta fatto, tenendo premuto shift selezioniamo tutti i fotogrammi dell’animazione e impostiamo la durata di ogni fotogramma (click sul numero 0sec.)
7. Dal menu a tendina impostiamo il valore desiderato oppure stabiliamo noi la durata esatta, come ad esempio 1,5 sotto la voce Other…
8. Una volta fatto possiamo premere il pulsante play e verificare se l’animazione realizzata è di nostro gradimento.
9. Per esportare selezionare dal menu File->Save for web e scegliere il formato Gif

La gif animata verrà esportata e il lavoro è finito!

Ricordate che al posto delle immagini potete realizzare del testo, elementi grafici e così via; per creare interpolazioni di movimento di oggetti che si spostano è necessario invece seguire i seguenti passi:

1. Posizionare al primo fotogramma l’oggetto grafico (immagine o testo) nella posizione di partenza
2. Creare tanti fotogrammi quanto la durata dell’animazione, ad esempio 5
3. Selezionare l’ultimo fotogramma e posizionare l’oggetto grafico nella posizione di arrivo
4. Selezionare con Shift tutti i fotogrammi che compongono l’animazione, dal primo all’ultimo (eventuali fotogrammi che non fanno parte dell’animazione possono anche non essere selezionati)
5. Premere il pulsantino a forma di catenina (quello con tanti cerchiettini) per creare l’interpolazione di movimento.

Avete finito!