Creare un banner animato in GIF

Con Photoshop, oltre a tutto ciò che ruota intorno al fotoritocco, è possibile realizzare immagini in un particolare formato, GIF (Graphic Interchange Format). Questo tipo di formato è molto utilizzato sul web perchè consente, con un ridotto ingombro in termini di dimensione su disco (dovuto anche al fatto che può contenere al massimo 256 colori), di ottenere immagini animate di tutti i tipi che spesso troviamo nelle pagine web che visitiamo e che spaziano da semplici smile a banner pubblicitari ad addirittura spezzoni video.

Per mostrare come poter realizzare un'immagine GIF focalizzeremo l'esempio sulla creazione di un banner animato per l'utilizzo sul web; una valida alternativa al Flash o all'HTML5 per ottenere un'immagine animata senza effetti particolari.
Il risultato alla fine sarà il seguente, Fig. 1:

Fig. 1 - Photoshop - Creare un banner pubblicitario animato in formato GIF

Per agevolare la spiegazione ho realizzato appositamente un video dimostrativo che spiega esaustivamente i passaggi principali per l'ottenimento del nostro banner:

Questo video tutorial si trova sul mio canale Youtube
Iscriviti al canale se vuoi rimanere aggiornato sui nuovi video che inserirò

Di seguito, data la presenza del video, mi limiterò a riassumere i passaggi effettuati senza ripetermi in ulteriori spiegazioni.

Il tutorial inizia con la creazione di un nuovo documento con dimensioni 468x60 px che è una tra le misure solitamente utilizzate per i banner sul web.
Quello che serve nella fase iniziale è inserire tutti gli elementi che andranno a comporre l'immagine finale, ognuno nelle rispettive posizioni, ripetendoli se necessario per ciascuna posizione che andranno ad occupare (questa parte può apparire contorta ma è più facile a farsi che a dirsi e nel video è di semplice comprensione e di fondamentale utilità per ottenere un effetto animato degli oggetti che compongono il contesto).
Il video continua con la presentazione degli elementi visivi utilizzati per comporre il banner ed il loro posizionamento (che chiarisce il concetto espresso poco sopra soprattutto quando viene introdotta la parte relativa al cursore del mouse ed alla "call to action").
Arriva poi il momento di creare i singoli fotogrammi e dare vita al movimento. Per accedere agli strumenti atti allo scopo basta selezionare dal menù principale la voce "Finestra" e scegliere l'opzione "Animazione".
Non resta altro che mostrare e nascondere i livelli per ciascun fotogramma duplicando quest'ultimi fino a quanto necessario. Impostare il numero di volte che l'animazione dovrà verificarsi una volta giunta al termine (è possibile impostare anche un loop infinito scegliendo "Sempre" dal relativo combobox).
Dopodichè salvare per web e dispositivi in formato GIF e testare il risultato su un lettore di immagini GIF (il browser, come IExplorer, Firefox o quant'altro, fa al caso suo, mentre se si tenta di aprire l'immagine con il classico visualizzatore di immagini di Windows non potremo percepire l'animazione).

Quanto appena scritto è solo un resoconto del video tutorial, invito pertanto a prenderne visione per una comprensione assicurata ed un risultato garantito.