MICHELEPISANI.IT
 

Creare un banner animato con Photoshop per l'utilizzo sul web

Creare un banner animato in GIF

Photoshop - Creare un banner animato in formato gif
Agosto 29
07:192014

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:

Photoshop - Creare un banner pubblicitario animato in formato GIF

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.

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

1 Commento

  1. Guglielmo sabato 27 giugno 2015 alle ore 01.41

    Chiarissimo.. grazie mille.. del tempo impiegato e della chiarezza! grazie e auguri!

    Rispondi a questo commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …