Pubblicato il

photoshop

banner

gif

pubblicità

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:

esempio di una gif con photohsop

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:

come creare un banner animato con photoshop per un sito web con wordpress

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 

come creare una gif con photoshop per banner animato pubblicità

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

guida in italiano pe creare una gif con photoshop per un banner per un sito web

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:

come creare una gif animata con photoshop timeline

Cliccate sulla scritta create frame animation. Ora la vostra timeline dovrebbe avere questo aspetto:

timeline photoshop per creare una gif per banner pubblicitario animato

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:

menu timeline photoshop per gif banner animato

In questo menu selezionate l’opzione ‘Create new layer from each new frame’ e poi ‘Make frames from Layers

come creare una banner pubblicitario per il mio sito animato con photohsop

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.

selezionare durata della gif per banner con photoshop

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:

come creare un banner pubblicitario animato gif con photoshop per il mio sito web

Cliccate su save e salvate la vostra GIF nella directory che preferite.

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: 

  1. Caricate l’immagine nel vostro post usando l’editor di Wordpress.
    come creare un banner animato gif con photoshop per pubblciità
  2. Con l’immagine selezionata cliccate sull’icona di ‘link’ nella barra degli strumenti:
    come creare un baner di pubblciita per il mio sito animato in formato gif con photoshop
  3. 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à. 

Se hai una domanda puoi farla anche nella sezione commenti in basso

Grazie per aver letto questa guida suDevnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)