Creare gif animate e banner

di MrFlock 21

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...

animazione_photoshop

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 “

Primo livello

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.

livelli_photoshop

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:

Effetto_movimento_photoshop

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…

finestra_animazione

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:

animazione_photoshop

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


al prossimo tutorial. MrFlock

Commenti (21)

  1. è strabello questo tutorial, ma nn capisco perkè a me qnd si muove dietro lascia la scia delle altre makkinine mentre nell’esempio la scia dietro è bianca…Hum…nn capisco uffi…spero avrò la risposta! ciaue complimenti! kiss

  2. Ciao Biondina, grazie per i complimenti.
    Molto probabilmente sbagli al punto 6.

    Controlla bene che per ogni fotogramma ci sia UN SOLO livello attivato :)

    fammi sapere… ciao

  3. ostiiiii ta ghè risùùùù! ahahaha! traduzione: cavolo hai ragioneeeeee hihihi!!! bello fes! grassie mille! :)

  4. Ciao! ho preso oggi photoshop e non ci capisco molto XD
    non ho capito il punto 6 ç_ç
    Però è bello il tutorial :)
    Kiss :*

  5. Ciao Angie, riesci ad essere più specifica? cosi posso aiutarti…
    Per nascondere i livelli devi cliccare sull’occhio a sinistra di ogni livello, quando l’occhio c’è il livello è visibile, quando non c’è non è visibile…
    Quindi al punto sei selezioni il primo fotogramma e clicci su tutti gli occhi tranne il primo…

  6. ho capito adesso, grazie mille e di più X°D
    ora ci sono riuscita zizi

    Thx ancora :D:D:D:D:D:D
    (non capivo come fare a “nascondere” i livelli xD)

  7. Ciao,il tutorial è bellissimo ma quando ho finito tutto vado a cliccare salva per web ma è scolorata la scritta e quindi non mi fa cliccare…cosa potrei fare per risolvere questo problema?

  8. Anche io ho lo stesso identico problema.. la scritta non c’è verso di farla apparire x cliccarci sopra.. Aiuto!!!

  9. Ragazzi!! sicuri di avere la versione originale?

  10. mmmm… ho risolto comunque il problema… con il cs3 non mi carica e non misalva in formato gif, con la versione cs2 me lo fa. grazie lo stesso mrflock! i tutorial sono esagerati! complimenti!

  11. il miglior tutorial fino ad ora, complimenti, un spiegazione perfetta delle animazioni, grazie!!!

  12. Ciao Flok, sono Pietro ò provato ad eseguire l’animazione
    tuttu OK meno la fluidità del movimento.
    Devo dire una cosa agli amici che fanno commenti, il caro Flok, che non à bisogno di essere magnificato nelle spiegazioni è il migliore di tutta la rete, andate a curiosare un pochettino poi tornerete di corsa Bye Bye..

  13. Grazie Pietro.. troppo gentile!! per la fluidità dei movimenti hai provato a diminuire il ritardo dei fotogrammi?
    Grazie mille ancora per questo e per gli altri commenti!!

  14. Questo tutorial è arrivato come la manna dal cielo!
    Semplice, chiaro e sintetico! Sei un mito!!!!!!!!
    Ciao
    Dru

  15. Ciao,grazie per il tutorial.Volevo farti una domanda.E’ possibile creare anche una sorta di loop solo per gli ultimi 2fotogrammi per esempio?Cioe’ far arrivare la macchina al fotogramma 8 e poi ripetere gli ultimi 2 in loop senza farla poi ripartire da zero?Grazie.

  16. basta ke la gif l fai riprodurre solo una volta no???

  17. No diti, francesco non intende quello.. Vorrei sapere anche io come far ripetere in loop solo gli ultimi fotogrammi, in modo da “spezzare” l’animazione (una animazione si ripete una volta e l’altra sempre)..

  18. Grazie mille per il tutorial! Oggi per la prima volta sono riuscita a fare un banner animato! :)

  19. non nel passaggio numero 2 mi spieghi meglio

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>