Come creare gif animate

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.

gif-animate1

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:

gif-animata2

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.

gif-animate3

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.

gifanimata

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.


You might also like

5 Comments

  1. Fabrizio says

    ottimo tutorial! chiaro come al solito

  2. lorena says

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

  3. MartinBenes says

    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.

  4. CyberLuke says

    Grazie mille.
    Stavo impazzendo nel cercare il comando sotto il menù “file”, e l’aiuto in linea di Photoshop non serve a una beneamata. 😉

Leave A Reply

Your email address will not be published.