Abbiamo già parlato delle GIF animate e di quanto sono versatili sia dal punto di vista tecnico che comunicativo.
Ci sono diversi modi per creare GIF animate, si può partire dai tools disponibili online oppure crearle da zero con i programmi di editing grafico.
Ma andiamo con ordine.

Tools online per creare Gif animate

Lo strumento più veloce è sicuramente quello che mette a disposizione Youtube.
Basta aggiungere gif al link del video di Youtube che volete trasformare in GIF

Creare una gif animata con Youtube

Si aprirà il video inserito all’interno di un apposito editor per campionare il video e aggiungere stickers, caption, effetti ecc…

Un altro tool che vi segnaliamo è gifmaker.me che crea GIF animate unendo diverse immagini, quindi basterà creare i frame grafici o fotografici dell’animazione che volete creare e poi darli in pasto al sistema. Questo tool mette a disposizione anche qualche configurazione, come la dimensione finale della GIF, la velocità, il numero di ripetizioni, etc.

C’è poi il contenitore globale di GIF: Giphy, che mette a disposizione il suo tool giphy.com/create/gifeditor.
Il tool di Giphy è decisamente più completo del precedente, infatti permette di creare GIF anche da video (caricati dal proprio computer o di cui si possiede il link), immagini da combinare insieme altre GIF. Inoltre potete inserire i classici testi sovraimpressi con qualche parametro grafico e catalogare la GIF con dei tag. Potete infine condividere direttamente il link della GIF oppure scaricarla sul vostro PC.

La cosa positiva è che GIPHY ottimizza in modo perfetto i file, dando la possibilità di scaricarli in formato full oppure ottimizzato per i social network.
La contro indicazione è che creare una GIF con Giphy significa inserirla nel grande calderone del GIF animate consultabili ed utilizzabili da chiunque sul web.

Per creare GIF animate da zero noi usavamo Fireworks che permetteva un controllo davvero ottimo sull’ottimizzazione.
Le funzioni di Fireworks sono state riportate ora su Photoshop, che permette inoltre di aprire ed esportare in GIF anche da file video.

Vediamo prima come fare partendo dai frame disegnati sui livelli e in seguito come tagliare un video .mp4

Creare gif animate con Photoshop

Creare un gif partendo da una grafica disegnata da zero

Per prima cosa aprite la timeline di Photoshop dal menu Finestra > Timeline

Accertatevi di aver attivato la scelta “Crea animazione fotogramma”.

Ora disegnate su uno o più livelli o gruppi di livelli la vostra grafica.

Ora portatevi sulla Timeline, duplicate il primo fotogramma e andate ad apportare le modifiche che desiderate ai livelli per esempio nascondendo un livello e/o duplicandolo per modificarlo. Nel nostro esempio abbiamo creato due livelli per la bocca dell’emoticon, il sorriso e la bocca stupita, sul primo fotogramma attiviamo la visibilità al sorriso, sul secondo invece nascondiamo il sorriso e attiviamo la visibilità all’altra espressione.

Create tutti i livelli funzionali alla creazione delle vostra animazione e infine andate a definire la durata del singolo fotogramma cliccando su di esso nella Timeline.

È il momento di esportare la nostra animazione, scegliamo pertanto dal menu File > Esporta > Salva per web

Si aprirà la finestra per definire tutti i dettagli dell’esportazione. È necessario prestare attenzione a 3 cose:

  • La palette dei colori: le GIF possono avere al massimo 256 colori, se come in questo caso avete creato un’icona flat basteranno anche 128 colori o anche meno. Più colori usate più sarà pesante la vostra GIF.
  • Attenzione alla dimensione: anche questo è un parametro importante per il peso e l’uso che volete fare della GIF
  • La ripetizione dell’animazione: volete che l’animazione avvenga una sola volta perchè magari al termine della vostra c’è una call to action oppure volete creare un’emozione infinita?

Impostati questi parametri potete esportare e condividere la vostra GIF

Creare un gif partendo da un video

Per creare una GIF da un video aprite il file del video con Photoshop.
La timeline si aprirà automaticamente mostrandovi tutto il video.

Posizionate il cursore rosso della timeline dove intendete far partire l’animazione, portatevi con il mouse all’inizio del flusso del video e quando vedete cambiare il puntatore trascinate il flusso fino a dove avete posizionato il cursore.

Fate la stessa cosa per la fine dell’animazione. A questo punto troverete sulla Timeline soltanto la porzione di video che intendete trasformare in GIF.

Se avete cambiato idea potete ri-allungare i capi del flusso ridimensionando come vi pare la porzione da considerare. Procedete poi a ritagliare e, nel caso vi servisse, raddrizzare il video per una visualizzazione ottimale.

A questo punto dal menu File scegliete > Esporta > Salva per web

Rispetto all’esempio precedente, in questo caso, ci sono da configurare un po’ più di parametri. Non solo i colori e la dimensione ma anche il dithering* e la perdita (che si attiva disattivando la spunta su interlacciato).

Il dithering, nella elaborazione numerica di segnali, è una forma di rumore con una opportuna distribuzione, che viene volontariamente aggiunto ai campioni con l’obiettivo di minimizzare la distorsione introdotta dal troncamento nel caso in cui si riquantizzino i campioni stessi. [Wikipedia]

Dovrete quindi bilanciare tutti questi parametri affinché la GIF che esportata sia il giusto compromesso tra qualità e peso del file.

Giphy dice che per postare GIF sui social non devono pesare più di 10 Mb, noi cerchiamo di non farle pesare mai più di 3 Mb.

Onde GIF

Come sfruttare le GIF animate per il visual Storytelling

Ora che avete imparato come creare delle GIF animate potete cominciare a pensare di usarle per i vostri Visual Storytelling.

Le GIF possono essere utilizzare per sostituire parti di testo e per esprimere un sentimento o un’emozione. Ci sono infatti GIF che rappresentano in modo estremamente efficace degli stati d’animo o delle espressioni (MEME).

Se per esempio voglio esprimere il concetto di “Ahhhhhhhhh!” le GIF vengono in mio aiuto per chiarire in modo inequivocabile quello che voglio esprimere senza il rischio di essere fraintesa 🙂


via GIPHY

via GIPHY

Le GIF si possono utilizzare per corredare un racconto o un testo con animazioni che visualizzano in modo animato concetti complessi, come per esempio infografiche o diagrammi, rendendone sicuramente molto più efficace la comprensione.

Non dimentichiamo che le GIF sono estremamente versatili, è possibile infatti inserirle nelle Email oppure condividerle nei messaggi di Whatsapp e sui social e non è necessario cliccare su PLAY per vederle in azione.