Se si pronunciano GIF o G(H)IF nessuno lo sa, ma sicuramente tutti sappiamo cosa sono. Le GIF possono aggiungere quel tocco in più di classe (se usate con gusto) al vostro sito. Inoltre possono essere utilizzate come ottimo metodo per ottenere l’attenzione del lettore verso un banner o pubblicità.
In questo post vi mostrerò come creare un banner animato GIF In 10 minuti usando Photoshop.
Ecco un esempio di quello che andremo a creare in questa guida:
In seguito andremo a vedere come inserire questo banner animato nel vostro sito web personale.
Cominciamo con la guida :)
Se avete già creato i fotogrammi del vostro banner, e volete solamente sapere come creare un file GIF da queste immagini, potete passare direttamente al passo 2.
1 Creare i fotogrammi del banner GIF
Come primo passo aprite Photoshop. in questo caso sto usando Photoshop CS6
Ora andiamo a creare i vari frame o fotogrammi del nostro banner animato. Nel mio caso ho creato 4 immagini png dove ho spostato leggermente le palline colorate per formare una sequenza. Ecco le immagini:
Una volta salvate queste immagini sul vostro PC, possiamo passare al passo successivo della guida:
2 importare varie immagini in un documento Photoshop
Ora che abbiamo i fotogrammi del nostro banner pronti, possiamo passare alla creazione dell’animazione GIF.
In Photoshop cliccate su File -> Scripts -> Load file into Stack
Vi verrà mostrata una finestra come quella in basso. Ora selezionate i fotogrammi del vostro banner GIF cliccando su ‘browse’ e cliccate OK una volta completato questo passo. Vedrete che verrà creato un nuovo documento Photoshop con vari ‘Layer’. Questi Layer rappresentano i fotogrammi del nostro banner animato.
3 Aprire la finestra Timeline
Ora dobbiamo andare ad utilizzare una finestra di Photoshop chiamata Timeline. Questa finestra ci permette di gestire una linea temporanea fotogramma per fotogramma.
Se non vedete questa finestra, cliccate su: Window -> Timeline
Se avete seguito i passi precedenti in modo corretto dovreste avere un documento photoshop con vari layer con un fotogramma in ogni layer, ed una finestra in basso chiamata timeline come questa:
Cliccate sulla scritta create frame animation. Ora la vostra timeline dovrebbe avere questo aspetto:
4 Importare i fotogrammi nella Timeline
Assicurandovi di avere tutti i layer del documento selezionati cliccate sul menu nell’angolo in alto a destra della Timeline:
In questo menu selezionate l’opzione ‘Create new layer from each new frame’ e poi ‘Make frames from Layers’
5 Selezionare la durata di ogni fotogramma della GIF
una volta importati i layer nella Timeline, potete selezionare la loro durata utilizzando l’opzione presente sotto ogni frame.
foto durata frames
Selezionate se volete la vostra GIF come un loop o come un singolo play. Se state creando un banner per un sito web, vi consiglio di utilizzare un loop, selezionando l’opzione forever.
Utilizzando il tasto play potete vedere un’anteprima del banner GIF creato. Se siete soddisfatti con il risultato possiamo vedere come salvare questa immagine GIF e come utilizzarla per creare un banner animato sul vostro sito web.
6 Come salvare una GIF con Photoshop
Salvare la GIF è abbastanza semplice. Basta cliccare sul menu File -> Save for web… Dovreste vedrete una schermata del genere:
7 Come utilizzare un banner GIF in un sito web
Ora che avete salvato la vostra immagine .gif sul vostro computer siete pronti per fare caricare questa GIF sul vostro server e posizionare il banner nel codice HTML. Ecco come!
- Usando un CMS
Se state utilizzando Wordpress o un altro CMS, ecco i passi da seguire:
- Caricate l’immagine nel vostro post usando l’editor di Wordpress.
- Con l’immagine selezionata cliccate sull’icona di ‘link’ nella barra degli strumenti:
- Nella finestra delle opzioni per link inserite l’url a cui il vostro banner punterà.
- Usando direttamente il codice HTML
Se non avete Wordpress o volete modificare il codice HTML direttamente, potete inserire il banner animato nella vostra pagina con questo codice:
<a href="https://miosito.it"><img src="https://url-del-banner-gif.gif"></a>
inserite questo codice dove preferite all’interno della pagina HTML, sostituendo ovviamente i parametri href ed src.
Ci siamo! Ora avete un banner animato in formato GIF sul vostro sito da utilizzare per le vostre pubblicità.