Tutorial Photoshop – Come creare una gif animata

Condividi

This post is also available in English. Click here to go directly to the english version.

Photoshop è il software per eccellenza in ambito di grafica digitale, non solo per quanto riguarda l’editing di foto. Il software di casa Adobe, infatti, è adatto per tantissimi scopi che coprono l’intera sfera de digital design ; dalla creazione di icone ed applicativi grafici per il web, alla realizzazione della parte estetica di interi siti web. Oggi vedremo un semplice tutorial per photoshop, che ci permetterà di creare una gif animata e ci darà la possibilità di prendere confidenza con l’apposito pannello animazioni.

Mediante le funzioni di Photoshop possiamo anche creare simpatiche gif animate, che possono servire come alternative ad animazioni più complesse e che potrebbero appesantire il nostro server.

Vieni a scoprire i nostri pacchetti

web&graphic design

E’ vero che i servizi online che permettono la creazione di gif animate, ad oggi, sono tantissimi, ma è anche vero che il risultato ottenuto tramite la creazione personalizzata del nostro lavoro mediante un apposito tutorial per photoshop, non può essere paragonata a quella di un servizio automatico. Tra l’altro, vuoi mettere la soddisfazione? 🙂

Oggi creeremo, dunque, una semplice gif animata con lo scopo di aiutarvi ad imparare le funzioni base della Timeline di Photoshop e di permettervi, in seguito, di creare una qualsiasi animazione in tutta semplicità.


NOTA – Photoshop e la sua funzione Timeline ci permette di creare animazioni che possono essere esportate anche in formato video e non solo in .gif

Come creare una gif con Photoshop – Tutorial

Benissimo, partiamo con questo breve, ma efficace, tutorial sulla creazione di gif animate. Cio’ che andremo a creare oggi sarà questa immagine di seguito. Impazienti? Mettiamoci a lavoro.

tutorial photoshop gif animata
Tutorial Photoshop – creare una semplice gif animata

Per prima cosa apriamo Photoshop e creiamo un nuovo documento tramite il menù File > Nuovo , scegliamo una dimensione di 1000 pixels in larghezza e 1000 in altezza, metodo di colore RGB. Lasciamo gli altri parametri invariati, almeno per il momento.

Tramite lo strumento secchiello riempiamo lo sfondo del colore che più preferiamo, per questo tutorial io ho scelto #f2e79c . Creiamo un nuovo livello tramite il menù Livello > nuovo o semplicemente cliccando sul segno “+” in basso a destra nella barra dei livelli.

Creare una Gif animata – Strumento ellisse

Con il nuovo livello selezionato scegliamo lo strumento ellisse dal menù di sinistra (in parole povere, lo strumento che vi permette di creare forme rotonde ed ovali) e creiamo una nuova forma, che non sia perfettamente rotonda. Diamogli un colore di sfondo a piacere, per questo tutorial io ho utilizzato #e74a42 .

Strumento penna

Selezioniamo lo strumento Penna, con il colore di sfondo selezionato (lo stesso usato per la forma precedente) e quello di traccia deselezionato, per farlo assicuriamoci che nel menù in alto la dicitura “traccia” abbia il segno a forma di sbarra laterale rossa selezionato, se non è così apriamo il pannello e deselezioniamo manualmente.

Accanto, nella dicitura “Riemp.” selezioniamo lo stesso colore utilizzato in precedenza. Appena sotto al palloncino, creiamo la base tracciando dei triangoli con la punta verso il basso, come in foto :

gif animata
Creiamo la base del palloncino

Sempre con lo strumento penna selezionato questa volta dobbiamo deselezionare il colore di riempimento ed utilizzare il solo colore di traccia, lo stesso usato fino ad ora per il palloncino e la base, con uno spessore di 3px. Partendo dalla base del palloncino, creiamo lo “spago” cliccando una volta con il tasto sx, cliccando una seconda volta un po’ più in basso e, senza lasciare il mouse (con il tasto sinistro premuto), trascinarlo per crearne una curva.

tutorial photoshop gif animata
Creiamo lo spago del palloncino con lo strumento penna

Animiamo la gif

E’ ora di animare e credetemi se vi dico che è la parte più semplice. Apriamo la timeline tramite il menù in alto Visualizza > Timeline. Vi si aprirà una barra delle opzioni (timeline) in basso. Clicchiamo su “crea timeline”

gif animata
Clicchiamo sul tasto “crea timeline”

Una volta creata la timeline, selezionate TUTTI i livelli fin’ora creati TRANNE lo sfondo. Tenendo premuto il tasto cmd (mac) o ctrl (win) selezioniamo i livelli che abbiamo creato, ripeto, tranne lo sfondo. Con i livelli selezionati clicchiamo con il tasto destro e scegliamo “Rasterizza livelli”. Sempre con i livelli selezionati (se si sono deselezionati dopo la rasterizzazione ri-selezionateli nuovamente) , di nuovo click destro e scegliamo “Unisci livelli”.

gif animata
Rasterizziamo ed Uniamo i livelli, tranne lo sfondo

Torniamo nella timeline. Al centro troverete la timeline vera e propria, ovvero quella che crea i fotogrammi. Nella parte sinistra troverete, invece, il livello selezionato, ovvero quello che abbiamo appena rasterizzato ed unito. Facciamo click sulla freccia accanto al nome del livello nella parte sinistra della timeline. Vi si aprirà un nuovo pannello, cercate e selezionate con un click l’opzione “Posizione”.

Creiamo i keyframes

Vedrete che nella parte destra, quindi nella timeline, verrà creato un piccolo rombo che altro non è che il primo fotogramma. Ciò che ci resta da fare è semplicemente spostare il cursore della timeline un po’ più avanti, dopo di che con lo strumento “sposta” (solitamente il primo in alto, nella barra dei menù di sinistra) cliccare sul palloncino e trascinarlo in alto o in basso, a seconda di dove vogliamo che andrà a spostarsi nella timeline.

Ripetete il processo per un massimo di 4/5 volte, spostando sempre il cursore della timeline avanti e dopo fare lo stesso con il palloncino.

Questo creerà dei fotogrammi, già interpolarizzati nei movimenti. Fate click su “Play” nella timeline per vederne l’effetto appena creato.

tutorial photoshop creare una gif animata con

Salvate il file. Se volete conservarne il sorgente, allora salvate prima una versione in .PSD tramite il menù File > Salva con nome. Una volta salvato il sorgente, facciamo nuovamente click su File, ma stavolta scegliamo “Esporta” >> Esporta per web.

Vi si aprirà il pannello di esportazione. In alto, se non è già selezionato, scegliete l’estensione in .GIF 128 con dithering. Cliccate su Salva e date il nome a vostro piacimento.

tutorial photoshop gif animata
Creare una gif animata con Photoshop

Spero che questo breve tutorial sia stato di vostro gradimento e che, soprattutto, vi abbia aiutato a familiarizzare con la funzione Timeline di Photoshop. A presto per un nuovo tutorial!

Cheers.

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo