Creare gif animate e banner

Vi siete mai chiesti come fanno alcuni membri di forum ad avere dei così bei avatar animati?

Nella maggior parte dei casi hanno usato photoshop e in particolar modo lo strumento animazione che adobe ha implementato fino dalla versione cs2.

Il concetto è lo stesso di creare un banner animato, e implica una minima conoscenza dell’animazione fotogramma per fotogramma.

Vediamo più in dettaglio come è possibile realizzare delle animazioni con gli strumenti che Photoshop ci mette a disposizione:

Prima di tutto nel caso vogliate realizzare dei banner animati per il vostro sito le dimensioni più utilizzate sono:

336×280 px ~ 468×90 px~ 120×600 px ~ 160×600 px ~ 250×250 px ~ 728×90 px

Nel caso vogliate creare degli avatar per forum informatevi prima quali sono le dimensioni consentite.

Come esempio in questo tutorial realizzerò l’animazione di una macchina che passa e si ferma, utilizzerò quindi solo un’ immagine e corca dieci fotogrammi.

Questo è solo un esempio, voi cercate di usarne qualcuno in più cosi da rendere l’animazione più fluida possibile, cercando allo stesso tempo di lasciare il file leggero, ricordatevi che la destinazione finale del lavoro è il web.

Potete trovare l’immagine della macchina qui
N.B. La registrazione è necesaria e gratuita per il dowload

Iniziamo:

Ho ritagliato l’immagine a 450px per 202 px, eliminando gran parte dello sfondo.

1) Create un nuovo ducumento delle dimensioni che volete con sfondo bianco, importate su un nuovo livello l’immagine della macchina e rinominate il livello ” UNO “

2) Duplicate il livello ” UNO ” e rinominatelo ” DUE ”

Selezionate il livello “DUE” , premete CTRL + T e tenendo premuto il tasto maiuscolo premete quattro volte la freccia destra della tastiera.
Sposterete cosi l’immagine di 20 pixel a destra.

3) Ripetete i punti 1 e 2 finchè non avete circa 10 livelli.

4) Ora, prima di creare l’animazione, realiziamo l’effetto di movimento.

Iniziate dall’ultimo livello e fate:
Filtro –> Sfocatura –> Effetto movimento

Impostate come in immagine:

Angolo: 0°
Distanza: 10px

RIPETETE QUESTA OPERAZIONE PER TUTTI I LIVELLI AUMENTANDO DI 10PX LA DISTANZA DI SFOCATURA.
al livello nove quindi dovrete dare una distanza di sfocatura di 20 px, all’ottavo di 30px etc..

4) Deselezionate tutti i livelli ad eccezione del livello ” UNO ”

5) Ora creiamo l’animazione:

Andate su:

Finesta –> Animazione per aprire il pannello dei fotogrammi.

6) Create 10 fotogrammi e per ogni fotogramma attivate il relativo livello e nascondete tutti gli altri; quindi:

fotogramma 1 –> livello 1 attivo e tutti gli altri nascosti

fotogramma 2 –> livello 2 attivo e tutti gli altri nascosti

fotogramma 3 –> livello 3 ~

e cosi via…

7) Ora dovete settare il tempo di ritardo per fotogramma.
Di default è impostato a 0 (nessun ritardo).

Nel nostro esempio abbiamo utilizzato pochi fotogrammi e risulterebbe troppo veloce, cliccate sulla freccietta indicata nella precedente immagine e selezionate 0,1 secondi di ritardo.

8) Ora non vi resta che salvare il vostro documento in formato gif:

File –> Salva per web e dispsitivi –> Selezionate gif come formato di esportazione

se avete seguito bene questo tutorial dovreste aver ottenuto un risultato come questo:

Per creare avatar e qualsiasi altra animazione il procedimento è identico. Buon divertimento.


al prossimo tutorial. MrFlock