Posted in Featured, Photoshop, Tutorials, Web Design | 5 Comments
Come creare gif animate

Come creare le gif animate non sarà un argomento molto professionale ma è uno degli argomenti che incuriosisce di più. Photoshop Cs4 ha un ottimo sistema di animazione per cui ho deciso di ripubblicare un tutorial su come si può creare una gif animata utilizzando Photoshop Cs4.
Fase 1: Progettare il banner
Prima di realizzare il banner devi pensare a come sarà fatto, lo scopo che si vuole raggiungere, che tipo di animazione creare, quali elementi ti serviranno. Ad esempio immagina di dover realizzare un banner per la promozione delle offerte di Capodanno di un’agenzia di viaggio.
Probabilmente ti serviranno i seguenti elementi:
- foto di alcune destinazioni di viaggio
- il logo dell’agenzia
- materiale testuale come frasi e slogan ad effetto
Una volta raccolto tutto si crea una cartella del progetto e si archivia tutto con ordine.
Fase 2: Preparazione del file
Decidi il formato del banner e crea un nuovo file, importando tutto gli elementi dell’animazione. Ognuno su un livello diverso.
Io creo un’area di lavoro di dimensioni 320×240, quindi apro dal menu file tutte le foto che fanno parte del progetto e poi tramite il copia ed incolla le porto sul mio file 320×240.
Scriverò sullo stesso documento anche tutte le frasi e slogan che mi servono.

Fase 3: Animazione
Dal menu Finestra (window) scegli la voce Animazione e in basso apparirà una palette orizzontale che ti permetterà di animare gli elementi appena creati. Assicurati che sia attiva la visuale a fotogrammi. Se così non fosse clicca sul pulsante in basso a destra della palette come indicato sotto:

Nella stessa palette Animazione puoi vedere che c’è un solo fotogramma. Il tuo obiettivo ora è creare altri fotogrammi, uno per ogni schermata dell’animazione. In particolare la mia sarà composta da 5 fotogrammi:
- foto
- foto + scritta 1
- foto + scritta 1 + scritta 2
- foto + scritta 1
- foto + scritta 1 + scritta 2
Scegli quindi quali elementi se vedono al primo fotogramma. Io ho nascosto tutti i livelli tranne quello della foto. Ora premi il bottone “Crea nuovo fotogramma” (l’iconcina vicino al cestino) e nella palette Livelli, decidi quale elemento si vede e quale no, procedendo avanti in questo modo, di fotogramma in fotogramma.

Fase 4: Tempi
Ora dobbiamo impostare i tempi dell’animazione. Se premi il pulsante Play, noterai che l’animazione è troppo veloce.
Sotto ogni fotogramma c’è una casella con la scritta 0 sec., al posto dello zero inseriamo il valore che ci sembra più adatto.
Nel mio caso voglio che la scritta gialla alla fine lampeggi, in quel punto quindi, inseriò un tempo più breve.

Assicurati che la voce “per sempre” o “forever” sia attiva, in questo modo il banner si animerà senza mai fermarsi.
Fase 5: Esportazione per il web
Vai nel menu File->Salva per web
Nella finestra che compare scegli il formato gif e la quantità di colori sufficiente a garantire una buona resa cromatica, quindi salva.
Hai creato la tua gif animata.










ottimo tutorial! chiaro come al solito
Grazie, era ora di ritornare su Photoshop!!!
ciao, ottima spiega ma mi chiedevo e’ possibile far ripetere all’infinito una gif? e se si, come? volevo usarla come bannerino al posto di dover usare flash (deve alternare 3 img..)
Ciao, certo che si può. Se vai al punto 3 della mia spiegazione nell’immagine, in basso a sinistra, c’è la voce “forever”, ossia “per sempre”. Da li puoi selezionare quante volte far ripetere la gif o se farle fare un ciclo infinito.
Grazie mille.
Stavo impazzendo nel cercare il comando sotto il menù “file”, e l’aiuto in linea di Photoshop non serve a una beneamata.