Come creare una immagine animata in GIF con Photoshop.

Premetto che sono una vera e propria frana con i programmi di grafica. Quando riesco finalmente a imparare qualcosa non posso fare a meno di condividerlo scrivendoci un post. Mi rendo conto che per la maggior parte dei lettori si tratterà di cose sapute e risapute ma questi mei appunti in libertà potrebbero anche risultare utili a qualche navigatore che come me soffre di idiosincrasia da Gimp e Photoshop.

La motivazione per cui mi sono deciso a imparare questo metodo per la creazione di GIF animate è che mi servivano dei coriandoli che cambiavano colore per usarli in un Effetto di Carnevale visto che in rete non avevo trovato nulla di interessante. Prendendo spunto da questa modestissima realizzazione vediamo più in generale come creare una GIF animata con Photoshop. Si possono usare solo immagini oppure inserire anche del testo. Come esempio per mostrare la procedura mi limiterò a una GIF formata da tre immagini e una scritta.

Per prima cosa bisogna stabilire le dimensioni della animazione che vogliamo creare per esempio 500x300 pixel. Dobbiamo quindi avere nel computer un certo numero di foto che abbiano delle dimensioni di quel genere oppure essere inferiori.

Dopo aver aperto Photoshop andiamo in alto a sinistra su File > Nuovo e impostiamo le dimensioni del documento, inseriamo il suo nome (di default sarà Senza Titolo 1), il colore dello sfondo (meglio se si usa Trasparente) e si clicca su OK

Nell'area di lavoro di Photoshop apparirà una finestra delle dimensioni che abbiamo settato. Andiamo adesso su File > Inserisci per incollare una delle immagini che dovrà essere selezionata dal computer

Quando sarà visualizzata all'interno del documento ci si clicca sopra con il destro del mouse e si va su Inserisci. Nel caso in cui le dimensioni del documento e della immagine fossero diverse si può sempre adattarla con le apposite maniglie.

Si va quindi su Livello > Nuovo > Livello … e si crea un altro livello. Si inserisce una nuova immagine e si procede in questo modo fino a che non ci saranno tante immagini quanti sono i nuovi livelli che sono stati creati. Per importare ciascuna immagine dovrà essere selezionato Inserisci con il destro del mouse. Sulla destra del layout di Photoshop, per la precisione su Livelli, vedremo quindi tre immagini ciascuna inserita in un suo livello

Se si vuole inserire anche del testo si va su Livello > Nuovo > Livello… e si clicca sul bottone T posto negli Strumenti nella parte sinistra dell'interfaccia. Possiamo scegliere il colore, i font la dimensione e anche aggiungere effetti speciali andando in basso su Livelli > fx e scegliendo per esempio Bagliore esterno

Adesso riorniamo nel menù orizzontale principale e mettiamo la spunta a Finestra > Animazione. Nella parte bassa sarà visibile una timeline in cui potremo aggiungere i fotogrammi della nostra GIF animata. Nella finestrella dei livelli selezioniamo un solo livello cliccando sopra alle iconcine degli occhi

Nella parte bassa sarà visibile solo il livello selezionato come primo fotogramma

Cliccare su Duplica i fotogrammi selezionati, selezionare ogni nuovo fotogramma creato, e contestualmente cliccare sull'icona dell'occhio per visualizzare il rispettivo livello. Si otterrà una cosa di questo genere

Andando su Esegui l'animazione si può vedere l'anteprima della GIF che abbiamo creato. Si possono però ancora settare alcune cose. Su Sempre possiamo aprire il menù a discesa e scegliere appunto quante volte deve riprodursi la GIF (sempre è di default). Su 0 sec possiamo settare il tempo di visualizzazione di ciascun fotogramma da 0,1 secondi fino a quanto si vuole.

Quando si è terminato si clicca sul primo fotogramma quindi, tenendo premuto Shift, si clicca anche sull'ultimo. In questo modo saranno tutti selezionati e potrà essere scaricata la nostra animazione. Si va su File > Salva per web e dispositivi 

Si salva come GIF 128 con dithering con Trasparenza e senza Alone. Si possono anche inserire i metadati e modificare l'immagine visualizzandone l'anteprima


Buon divertimento!