Friday 21st November 2014,
ideasnextdoor.com

Creare gif animate con Photoshop

MartinBenes October 3, 2007 Tutorials, Web Design 33 Comments

Finalmente dalla versione Cs2 di Photoshop qualcuno alla Adobe si è accorto che uno dei motivi principali per cui veniva utilizzato ImageReady, il software che si installava insieme a Photoshop, era prettamente la realizzazione dei banner animati.

Per fortuna come già detto, fin dalla versione Cs2 di Photoshop abbiamo a disposizione la finestra Animation (Animazione) che si trova come al solito sotto la voce di menu principale Window (Finestre).

Creare un banner animato o meglio dire, una gif animata è estremamente semplice con Photoshop, specialmente se si ha un minimo di dimestichezza con il concetto di animazione fotogramma per fotogramma (frame by frame).

Per chi non avesse idea su come procedere ecco i passi principali da seguire:

  1. Aprite un file vuoto delle dimensioni della vostra gif animata, ad esempio 130x68px (ovviamente le dimensioni possono essere variabili a seconda delle vostre esigenze)
  2. Incollate nel documento appena creato in Photoshop le immagini che comporranno la vostra animazione. Come risultato avrete tanti livelli quante sono le immagini. Ricordate che ogni volta che incollate in un documento una foto, viene creato automaticamente un livello nuovo.
    gif animate
  3. Questa sopra indicata è bene o male la scena che dovreste avere sotto i vostri occhi; io ho usato solo 3 immagini.
  4. Nella finestra Animation premete 2 volte il pulsante Duplicate selected frames (lo stesso che usiamo per creare nuovi livelli) in modo da ottenere un totale di 3 fotogrammi (se avete usato più foto, cliccate più volte…)
    animazione2.jpg
  5. Ora che abbiamo come nel mio caso 3 fotogrammi dobbiamo a partire dal primo, rendere visibile solo il livello che desideriamo. Io ad esempio ho reso visibile al primo fotogramma il livello Img3, al secondo il livello Img1 e al terzo il livello Img2.
  6. Una volta fatto, tenendo premuto shift selezioniamo tutti i fotogrammi dell’animazione e impostiamo la durata di ogni fotogramma (click sul numero 0sec.)
  7. Dal menu a tendina impostiamo il valore desiderato oppure stabiliamo noi la durata esatta, come ad esempio 1,5 sotto la voce Other…
  8. Una volta fatto possiamo premere il pulsante play e verificare se l’animazione realizzata è di nostro gradimento.
  9. Per esportare selezionare dal menu File->Save for web e scegliere il formato Gif

La gif animata verrà esportata e il lavoro è finito!


Ricordate che al posto delle immagini potete realizzare del testo, elementi grafici e così via; per creare interpolazioni di movimento di oggetti che si spostano è necessario invece seguire i seguenti passi:

  1. Posizionare al primo fotogramma l’oggetto grafico (immagine o testo) nella posizione di partenza
  2. Creare tanti fotogrammi quanto la durata dell’animazione, ad esempio 5
  3. Selezionare l’ultimo fotogramma e posizionare l’oggetto grafico nella posizione di arrivo
  4. Selezionare con Shift tutti i fotogrammi che compongono l’animazione, dal primo all’ultimo (eventuali fotogrammi che non fanno parte dell’animazione possono anche non essere selezionati)
  5. Premere il pulsantino a forma di catenina (quello con tanti cerchiettini) per creare l’interpolazione di movimento.

animazione3.jpg

Avete finito!



Se vi è stato utile quello che ho scritto condividete questo post o lasciate un commento. Se vi volete mettere in contatto con me potete farlo tramite il mio profilo su Facebook.

About The Author

He works with Photoshop and Illustrator in the creative field over 15 years. He is a freelance digital artist and Advanced Photoshop Trainer, X-Rite Coloratti, Fotolia Evangelist, Behance Ambassador in Italy, Adobe ACT and founder of the CreativeProShow. He is also en expert in social media and has a deep understanding of the human psychology. He is often called also for personal coaching and helps people achieving their goals. Actually based between Rome, Cape Town, London and Buenos Aires he loves to travel.

MartinBenes says:

Ne sono davvero felice! Se hai domande sono a disposizione.

sabrina2000 says:

nel modo in cui lei ha spiegato ho capito tutto è stato semplice efficace ed ho preso 10 in informatica grazie a lei complimenti!!!

MartinBenes says:

Ciao, mi spiace ma non ho sotto mano la Cs2…image ready e quel processo è ormai in disuso da parecchio tempo. Mi spiace davvero nn poterti dare una mano.

MartinBenes says:

Se hai seguito i passi dovrebbe funzionare. Lo stai salvando da “salva per web”? Purtroppo la versioen Cs2 è di parecchi anni fa e non ricordo più le impostazioni esatte per questo tipo di esportazione. Se vuoi mandami il file .psd e gli do un’occhiata. La mia mail la trovi nel menu in alto.

makleen says:

Ciao io sto lavorando con photoshop cs2… image ready cs2…
ho sempre fatto questi lavori per passatempo… ora ho cercato di rifarne e non mi fa salvare il file animato.. me lo salva in gif ma mi crea una cartella image e tanti file…
come posso fare?
ho fatto tutto quello che c e scritto qua su

SERENA says:

CIAO. Dopo tanto ci ho riprovato perchè avevo perso la pazienza.! ho il file in rgb 8 bit. e sono sul Cs3

MartinBenes says:

Ciao, Assicurati che il tuo file sia in RGB a 8 bit. Fammi sapere

SERENA says:

SE CI FOSSE QUALCUNO CHE MI PUO AIUTARE PERCHE’ HO FATTO LA GIF ANIMATA MA NON ME LA SALVA PER WEB. MI FA SALVARE IL FILE SOLO NORMALMETE. HO CONTROLLATO I BIT E SONO SI RGB-8 CHE POSSO FARE?
GRAZIE MILLE

sabrina says:

ciao
ti ringrazio per la spiegazione, ottima.
buona serata
sabrina

MartinBenes says:

Il formato gif supporta la trasparenza ma non le sfumature trasparenti. Non utilizzo iMovie ma tempo che il comportamento della gif dentro un programma di montaggio video non si comporterà in modo ottimale.

benny says:

ciao ma una volta fatto il gift posso importarlo con la trasparenza in i movie?

grazie mille ;D

MartinBenes says:

No, tutto corretto. Non funziona? Se no, mandami il psd. Trovi il mio contatto nel link in cima alla pagina Chi Sono.

Elena says:

Allora…ho impostato l’opzione di loop e l’ho salvato dal menu file–>salva per web e disp, devo salvarla in un altro modo?

MartinBenes says:

Ciao, probabilmente perchè non hai impostato l’opzione di loop, del ciclo dell’animazione oppure perchè la salvi dal menu File->Salva con nome e non dal File->Salva per web

Fammi sapere

Elena says:

Ciao! Ho un problema… quando salvo la mia gif animata (seguendo tutti i passaggi che hai detto), nelmomento in cui la apro non mi si visualizza l’animazione…perchè??
Come hai detto all’utente sopra, ho impostato l’opzione “sempre” riguardo al ciclo, ma nonostante questo la mia gif salvata non è animata…o meglio, solo se la apro con internet exp si visualizza l’animazione, altrimenti no.
Devi inviare la gif animata via email, e non so come fare.
Un’altra cosa…per ridurre il peso della gif animata c’è qualche stratagemma? :)

Ps. io uso cs3

Elena says:

Ciao! Ho un problema… quando salvo la mia gif animata (seguendo tutti i passaggi che hai detto), el momento in cui la apro non mi si visualizza l’animazione…perchè??

MartinBenes says:

Nel pannello dell’animazione, in fondo a sinistra, devi impostare l’opzione di rendere l’animazione ciclica. In inglese Loop. Per esportare, file->salva per web

CAbusivo says:

quando la salvo, sia esportandola per web, che salvandola con nome, mi salva un immagine fissa con estensione .gif tutt’altro che animata!!
why!?

(PS uso Photoshop CS5)

MartinBenes says:

Ciao, le gif animate non sono in grado di eseguire 25 fotogrammi al secondo di modo che il nostro occhio possa percepirle come animazione fluida. Anche se metti un intervallo tra le gif di 0, vedrai cmq l’animazione a scatti.
Se desideri creare animazioni per il web fluide ti conviene usare Flash. Non ce modo di creare gif animate fluide.
Un saluto

Matteo says:

Ciao scusate ma perchè lo scorrimento dell’immagine va a scatti e non fluido qualcuno mi può aiutare???

UMBO says:

Qual’è la tua mail?

MartinBenes says:

Ciao, può dipendere dalla dimensione delle immagini, se le hai alargate troppo o no. Se me la mandi per mail gli do un occhiata.

UMBO says:

Capito! Comunque la gif risulta come ‘satinata’, perchè sgranata non mi sembra il termine più corretto, comunque grazie mille!!

MartinBenes says:

Ciao,

Il formato Gif supporta massimo 256 colori. Per questo motivo alcune fotografie perdono notevolmente di qualità visiva…ti devi assicurare di aver scelto nel salvataggio il massimo numero di colori consentito, che cmq non potrà essere più 256.

In cosa consiste la qualità scadente dell’immagine nel tuo banner? Se mi fai capire bene ti posso aiutare in modo più specifico.

Alla prossima,
Martin

UMBO says:

Ciao! Grande tutorial, mi è davvero servito, però trovo che la qualità finale dell’immagine sia un po’ scadente anche se dovrei aver salvato la versione megliore! Suggerimenti!? Grazie in anticipo! CIAO!

Mari. says:

..grandioso!! Grazie mille! =)
BACI.Mari.

SARA maleventum says:

fantastico grazie mille ;)
splendida serata per te
s

MartinBenes says:

@ MrEko1119 scusami non ho capito bene il problema.

MartinBenes says:

Assicuratevi di valorare in metodo di colore Rgb a 8 bit.
Per farlo andate nel menu Immagine (Image) -> Metodo (Mode) e da qui impostate il vostro lavoro in RGB e 8 bit.

Fatemi sapere se avete risolto

LIUCKSARDY says:

IO NN RIESCO A SALVARLA COME WEB MA SOLO CON NOME QUINDI LA GIF ANIMATA NN LA POSSO ESPORTARE SUGGERIMENTI

MrEko1119 says:

ciao! scusa ma dopo aver incollato tutto le img che voglio e cliccato due volte su Duplicate selected frames a me nella finestra dell’animazione non mi compaiono tutte le img ma solo delle img uguali. come faccio?

Alessio says:

WOW, devo dirti (o forse dirle), GRAZIE!
Per l´aiuto che mi ha dato trovare questa spiegazione in internet! Semplice ed efficiente.
Unico punto dove mi sono bloccato era in image-ready al passaggio “4″ per creare nuovi livelli, ma poi rileggendo e provando ci sono riuscito.
GRAZIE!!

stefano says:

Complimenti veramente speigato alla grande