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...
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 “
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.
Iniziate dall’ultimo livello e fate:
Filtro –> Sfocatura –> Effetto movimento
Impostate come in immagine:
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…
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:
al prossimo tutorial. MrFlock
Biondina 18 luglio 2008 il 08:55
è 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
MrFlock 18 luglio 2008 il 10:05
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
Biondina 19 luglio 2008 il 07:45
ostiiiii ta ghè risùùùù! ahahaha! traduzione: cavolo hai ragioneeeeee hihihi!!! bello fes! grassie mille! :)
Angie 15 agosto 2008 il 14:26
Ciao! ho preso oggi photoshop e non ci capisco molto XD
non ho capito il punto 6 ç_ç
Però è bello il tutorial :)
Kiss :*
MrFlock 18 agosto 2008 il 11:36
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…
Angie 21 agosto 2008 il 11:11
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)
DJ Gabbo 30 dicembre 2008 il 09:04
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?
Ispa 2 gennaio 2009 il 07:31
Anche io ho lo stesso identico problema.. la scritta non c’è verso di farla apparire x cliccarci sopra.. Aiuto!!!
MrFlock 2 gennaio 2009 il 10:32
Ragazzi!! sicuri di avere la versione originale?
Ispa 3 gennaio 2009 il 05:39
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!
antony 18 gennaio 2009 il 05:28
il miglior tutorial fino ad ora, complimenti, un spiegazione perfetta delle animazioni, grazie!!!
Pietro 5 aprile 2009 il 10:16
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..
MrFlock 5 aprile 2009 il 12:00
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!!
Druso 26 maggio 2009 il 11:31
Questo tutorial è arrivato come la manna dal cielo!
Semplice, chiaro e sintetico! Sei un mito!!!!!!!!
Ciao
Dru
francesco 13 aprile 2010 il 11:30
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.
diti 28 aprile 2010 il 17:44
basta ke la gif l fai riprodurre solo una volta no???
Kelevra 9 maggio 2010 il 12:46
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)..
linda 4 ottobre 2010 il 08:24
Grazie mille per il tutorial! Oggi per la prima volta sono riuscita a fare un banner animato! :)
ANTONIO 7 dicembre 2010 il 16:03
non nel passaggio numero 2 mi spieghi meglio
annunci economici 17 maggio 2011 il 13:45
grazie per i consigli che date