Le GIF sono molto in voga al giorno d’oggi e spuntano letteralmente ovunque sul web. Non hai ancora imparato l’arte delle GIF? Si tratta di una competenza indispensabile nell’odierno mercato del lavoro altamente competitivo, nonché molto ambita dai potenziali datori di lavoro e clienti nel settore del design freelance allo stesso modo, rendendolo un grande in aggiunta al vostro portafoglio di design online.
Se vuoi imparare a creare una GIF con Photoshop, siamo qui per aiutarti! Con questa guida imparerai a realizzare meme esilaranti, banner animati e materiale promozionale in un batter d’occhio!
Fase 1: Caricare le immagini in Photoshop
Prima di poter creare una GIF animata in Photoshop, dovrai importare le immagini e prepararle per l’animazione. Esistono diversi approcci in questo senso, e la scelta dipenderà in gran parte da come desideri procedere:
Hai già una serie di immagini pronte all'uso?
Quindi hai una serie di immagini che presentano già una sequenza che puoi animare, oppure il tuo cliente ti ha fornito le immagini di cui avrai bisogno? Fantastico. Puoi iniziare facilmente andando su File > Script > Carica file nella pila. Questa utile opzione ti permette di caricare contemporaneamente un'intera serie di immagini, invece di doverle trascinare una per una nel documento.
Ti verrà chiesto di aprire dei file, quindi seleziona il Sfoglia e individuare ogni file che si desidera inserire nel documento. Una volta premuto OK, Photoshop creerà automaticamente un livello per ciascuna immagine che hai scelto di includere.
Hai una sola immagine? (O non ne hai nessuna?)
Se non hai alcuna immagine o hai una sola immagine su cui intendi lavorare (come spesso accade con i banner animati), crea un nuovo documento con File > Nuovo. A questo punto, basta trascinare l'immagine nella finestra del progetto di Photoshop oppure andare su File > Apri e seleziona la tua immagine.
Se intendi creare ulteriori cornici con altre immagini all’interno di questo nuovo documento, dovrai creare manualmente dei livelli per ciascuna di esse. Per farlo, seleziona Livello > Nuovo > Livello oppure clicca sul Livello pulsante nella tavolozza dei livelli.
Stai per creare una GIF in Photoshop! Una volta completato questo passaggio con uno dei due metodi sopra indicati, assicurati di assegnare un nome a ogni livello per mantenere il tuo flusso di lavoro ben organizzato. Fai doppio clic sul nome dei livelli nella tavolozza dei livelli e rinomina ciascuno di essi. Prendi l'abitudine di farlo: quando arriverà il momento di salvare la tua GIF in Photoshop, sarà molto più facile modificare i file se potrai capire a colpo d'occhio a cosa corrisponde ogni elemento.
Passo 2: Apri la finestra della timeline
Prima di poter iniziare ad animare qualsiasi cosa, dovrai imparare a creare i fotogrammi chiave. Per farlo, dovrai aprire il Cronologia finestra. Questa non è aperta per impostazione predefinita quando si crea una GIF animata in Photoshop, quindi vai su Finestra > Cronologia e seleziona l'opzione per iniziare.
Una volta selezionato questo, il Cronologia Se selezioni questa opzione, la finestra apparirà nella parte inferiore dello schermo.
Non aver paura di entrare in contatto con i clienti per capire cosa desiderano prima di addentrarti troppo nel processo. Vuoi che siano soddisfatti, quindi dovrai restare in contatto con loro!
Fase 3: Crea un'animazione con fotogrammi
Questo passaggio non potrebbe essere più semplice. Clicca sul Crea un'animazione con fotogrammi pulsante all’interno della timeline. Passando a questo layout, verrà regolato il Cronologia passa alla modalità "fotogramma per fotogramma". Noti come l'immagine sia ora disposta come una serie di fotogrammi in questa timeline? È proprio su questi fotogrammi che puoi applicare le modifiche all'animazione.
Che cos’è un’animazione fotogramma per fotogramma (keyframe)?
Cosa si intende esattamente per “frame” in questo contesto? Attraverso Cornici cronologiche (fotogrammi chiave) possiamo apportare modifiche fotogramma per fotogramma alle nostre immagini e creare effetti animati come il tweening e il testo lampeggiante tramite i livelli. La finestra “Timeline” consente di attivare e disattivare i livelli, spostare gli elementi nei singoli fotogrammi, ruotare il testo, applicare filtri e regolare la durata di determinati fotogrammi.
Fase 4: Assegna un livello a ogni fotogramma
Quando crei una GIF animata in Photoshop, devi assicurarti che ogni singolo fotogramma abbia un proprio livello. Questo ti permette di modificare ogni fotogramma come preferisci senza influire sugli altri nel tuo progetto: si tratta di un aspetto fondamentale per realizzare un’animazione pulita. Per suddividere le immagini in livelli, seleziona Seleziona > Tutti i livelli e poi individuare il Cronologia icona del menu qui in alto a destra nella finestra:
Da lì, seleziona Crea un nuovo livello per ogni fotogramma:
Ora avrai livelli separati per ogni singolo fotogramma presente nel tuo documento. (Vuoi scoprire qualche trucchetto in più per il tuo lavoro con Photoshop? Dai un’occhiata alla nostra mega-lista di Tutorial su Photoshop!)
Fase 5: Creare cornici dai livelli
Successivamente, nello stesso menu, seleziona Creare cornici dai livelli anche questo. In questo modo ogni singolo livello diventerà un fotogramma nel tuo Cronologia.
A questo punto, potrai selezionare ogni singolo fotogramma nel tuo Cronologia e modifica gli elementi come meglio credi. È qui che svolgerai la maggior parte del tuo lavoro. Più complessa è la tua animazione, più fotogrammi ti serviranno per realizzare transizioni di grande effetto. Assicurati di scegliere caratteri tipografici ottimizzati per il web se utilizzi del testo nelle tue creazioni!
Fase 6: Durata dei fotogrammi
Hai quasi imparato tutto ciò che ti serve per creare una GIF in Photoshop. Mancano solo pochi passaggi! Ora che hai impostato tutti i fotogrammi di base, il prossimo passo è stabilire la durata di riproduzione di ciascun fotogramma. Se non lo fai, la tua animazione si comporterà in modo strano, o forse non verrà riprodotta affatto.
Si tratta di un’operazione molto semplice: seleziona il fotogramma che desideri modificare, quindi fai clic sulla freccia e seleziona il tempo dal menu a tendina che appare. Per impostazione predefinita, Photoshop imposta ogni fotogramma su 0 secondi, quindi dovrai modificare questo valore, altrimenti l’animazione non funzionerà correttamente. Prova a selezionare 0,2 o 0,5 secondi per iniziare. Potrai sempre modificare questo valore in un secondo momento.
Passaggio 7: Opzioni di ripetizione
Ora che hai creato la GIF in Photoshop, è il momento di assicurarti che funzioni correttamente. Vuoi che l’immagine venga riprodotta più di una volta? Allora dovrai impostare le opzioni di riproduzione in loop. Sotto la timeline vedrai diverse opzioni. Seleziona l’ Una volta Seleziona l'opzione e apri il menu a tendina.
Potrai scegliere tra alcune opzioni predefinite, oltre a personalizzare le tue specifiche. Seleziona quella più adatta alle tue esigenze. L'opzione più comunemente selezionata è “Forever”, poiché la maggior parte delle GIF animate è pensata per riprodursi in loop finché la pagina rimane aperta.
Passaggio 8: Anteprima
Per il passo successivo nella creazione di una GIF animata in Photoshop, dovrai visualizzare l’anteprima della tua GIF per assicurarti che l’animazione sia come desideri e che non ci siano sorprese. Photoshop ti permette di visualizzarla all’interno del programma senza doverla prima salvare in un formato di file. Per visualizzare l’anteprima della tua GIF animata, basta premere il tasto Gioco pulsante sul Cronologia.
Passaggio 9: Salva la tua GIF in Photoshop, quindi esportala
Ora è il momento di salvare la tua GIF in Photoshop. Tieni presente che dovrai salvarla in modo leggermente diverso rispetto a come sei abituato a fare con la normale Salva comando. Dovrai accedere a File > Esporta > Salva per il Web (versione precedente) invece. Segui le istruzioni, assegna un nome al file e il gioco è fatto! Salvare una GIF in Photoshop è proprio così semplice. Una volta terminata l'esportazione, assicurati di visualizzarla anche al di fuori di Photoshop (e magari ricevere feedback da altri creativi), poiché a volte possono sfuggirti piccole incongruenze che vanno risolte. Assicurati anche di salvare il documento stesso, poiché ti servirà il file PSD in un secondo momento, qualora dovessi modificare qualcosa.
Lavorare con i video
È inoltre possibile utilizzare Photoshop per creare file GIF animati a partire da clip video. Per farlo, andare su File > Importa > Fotogrammi video su livelli.
Verrà visualizzata una finestra di dialogo in cui ti verrà richiesto di selezionare il file video desiderato. Seleziona il video e ti verranno proposte numerose altre opzioni.
La chiave sta nel limitare il numero totale di fotogrammi, soprattutto se il video dura più di un paio di secondi. Altrimenti, ti ritroverai con migliaia di fotogrammi, e questo renderà praticamente impossibile la regolazione di precisione.
Per limitare i fotogrammi, hai a disposizione diverse opzioni. Puoi utilizzare la finestra di dialogo esistente per ritagliare una sezione specifica del video (tramite il Solo gamma selezionata pulsante di opzione), oppure selezionare il Limite massimo di fotogrammi totali e selezionare il numero totale di fotogrammi da limitare. Ad esempio, se si seleziona la casella di controllo e si inserisce “4”, il programma importerà in Photoshop solo un fotogramma ogni quattro del video. È importante tenerlo presente, poiché la maggior parte dei video utilizza in genere tra i 20 e i 30 fotogrammi al secondo. Per una GIF non servono tutti i fotogrammi, quindi mantienila leggera e modificabile!
Condividi le tue GIF con il mondo
Le GIF animate sono una forma di contenuto multimediale molto efficace che probabilmente continuerà ad esistere ancora per molto tempo, e i clienti ne vanno pazzi. Una volta imparato a creare una GIF con Photoshop, assicurati di pubblicare le tue creazioni migliori sul tuo portafoglio di design online e mostra le tue animazioni più folli.
Non avete un sito web di portfolio online? Puoi usare un costruttore di siti web per crearne uno in pochi minuti. Assicurati di scegliere un portfolio online che offra funzionalità pensate per i designer, come ad esempio fantastiche modelli e tipografia intelligente, e gallerie di prova per i clienti, così i tuoi clienti potranno visionare le bozze direttamente sul tuo sito. Ecco alcune altre fantastiche siti web di design e portfolio ricchi di GIF animate da dare un'occhiata per trovare ispirazione.
Ora che sai come creare una GIF con Photoshop, è il momento di mettersi all’opera con le animazioni!
GIF per gentile concessione di @legionxstudios
Vuoi saperne di più sul design?
Portate i vostri video a un livello superiore con questi 10 fantastici Gimbal
10 portafogli di animazione creativi con il design dei siti web
Come realizzare un cinemagraph perfetto con Photoshop
