Come creare una GIF in PhotoShop dal video

Se sei arrivato qui chiedendoti come creare una GIF con Photoshop, probabilmente è perché il video che hai caricato sul tuo sito web stava rallentando il tempo di caricamento. Bene, sei capitato nel posto giusto. In questa guida, ti mostreremo come creare una GIF in Photoshop da riprese video. Apparirà benissimo sul tuo sito e sarà molto più ottimizzato per la velocità rispetto a un file video!

Con l'aiuto di una GIF, puoi presentare qualsiasi tipo di video su un sito web, in loop. Può essere una clip da materiale promozionale, una registrazione dello schermo per un tutorial o praticamente qualsiasi cosa tu voglia davvero.

Per questo tutorial, avrai bisogno di alcune riprese video e Adobe Photoshop. Se non hai un abbonamento a Photoshop puoi fare una prova gratuita, di conseguenza potresti scoprire che avere Photoshop è di grande aiuto per il web design! Se il tuo video è molto lungo, potresti volerlo ridurre prima in un editor video come iMovie o Adobe Premiere. Photoshop ha anche un'opzione di ritaglio durante l'importazione, ma un editor video è migliore se il metraggio originale è estremamente lungo.

Iniziamo.

Anteprima del risultato finale

Questo è il risultato finale della GIF che abbiamo creato per questo tutorial, perfetto per uno sfondo di sezione o modulo.

Per iniziare, importa il video in Photoshop

Per importare il video clip in Photoshop devi prima essere all'interno dell'editor di Photoshop. Da lì, fai clic su File> Importa> Fotogrammi video su livelli. Seleziona il video che desideri utilizzare e fai clic su Apri.

Nella finestra di dialogo a comparsa hai due scelte; 1. Dall'inizio alla fine – per utilizzare il video nella sua interezza o, 2. Solo intervallo selezionato – per utilizzare l'opzione di ritaglio e utilizzare solo una sezione del video.

Al di sotto di questo, c'è la possibilità di limitare l'importazione a un numero scelto di fotogrammi. Seleziona un numero piccolo se il video è più corto e un numero più grande se il video è più lungo. Questo potrebbe richiedere alcuni tentativi ed errori fino a quando non hai il flusso giusto. Ad esempio, il metraggio con modifiche piccole o lente avrà molti fotogrammi che sembrano quasi identici. D'altra parte, se il filmato è veloce con molti cambiamenti visivi, se togli troppi fotogrammi potrebbe sembrare nervoso.

Per questo tutorial, scegliamo "Dall'inizio alla fine" e "Limita a ogni 3 fotogrammi". Assicurati che sia selezionato "Crea animazione fotogramma".

Apportare modifiche al metraggio

Questo è il momento perfetto per apportare qualsiasi tipo di regolazione desideri al tuo filmato, dal ritaglio delle dimensioni alla regolazione dei livelli di colore. Ad esempio, potrebbe esserci un oggetto antiestetico nell'angolo del video o l'intera altezza del video è troppo grande per il punto in cui desideri posizionarlo nel design del tuo sito web. In alternativa, se il metraggio video è eccessivamente saturato, puoi utilizzare il pannello delle regolazioni per regolare la saturazione su tutti i livelli contemporaneamente.

Per i creativi là fuori, apportare modifiche a diversi livelli creerà tutti i tipi di effetti diversi per la tua GIF. Quello che non puoi fare è rimuovere gli sfondi o utilizzare strumenti che funzionano solo su un livello alla volta.

Suggerimento: assicurati di aver selezionato tutti i livelli, qualunque sia la regolazione che fai.

Come ritagliare tutti i livelli contemporaneamente

Seleziona tutti i livelli facendo clic su Livello 1, quindi mentre tieni premuto Maiusc, fai clic sul livello più in alto. Selezionare lo strumento Selezione rettangolare e selezionare le aree del video che si desidera conservare (non ciò che si desidera eliminare). Fare clic su Immagine > Ritaglia e le aree al di fuori della selezione scompariranno. Nel nostro video, selezioniamo l'intera area video lasciando un po' in alto deselezionata. Vogliamo rendere l'intero video meno alto e rimuovere il bordo bianco dell'orizzonte.

Come regolare i colori nella GIF

Con tutti i livelli selezionati, fai clic sulla scheda delle regolazioni nel menu Pannelli. Puoi utilizzare uno qualsiasi degli strumenti di regolazione e applicarli ai livelli nella tua GIF. Ad esempio, puoi trasformare i colori in bianco e nero o dargli un effetto a due tonalità. Usiamo la regolazione del bianco e nero con una tinta per rendere il colore del nostro video un po' più artistico. Questo è perfetto per uno sfondo che non interferisce con il resto del contenuto. Puoi usare qualsiasi tonalità di colore che ti piace e regolare i diversi livelli di colore come preferisci. Solo un consiglio, se aggiungi le regolazioni del colore, il tuo file finale sarà più grande che se non lo fai.

Questa GIF è stata scaricata a 211 MB senza i filtri colore ea 312 MB con le regolazioni del colore. Se vuoi davvero le regolazioni del colore, devi ridurre i fotogrammi per ridurre le dimensioni del file finale. Maggiori informazioni su questo nella prossima sezione.

Usa la linea temporale per modificare i fotogrammi

Con la finestra della timeline, puoi modificare i fotogrammi per ridurre la dimensione finale del file GIF. Ad esempio, fotogrammi extra alla fine della clip che sembrano ritardare o creare una sezione statica. Più cornici riesci a estrarre, meglio è! Ma fai attenzione a togliere troppi fotogrammi e l'effetto finale diventa nervoso, prenditi il ​​​​tuo tempo per controllare come appare il ciclo dopo aver eliminato alcuni fotogrammi.

Per accedere alla finestra della timeline e vedere come funziona la GIF su un loop, fare clic su Window > Timeline. Si aprirà un lungo pannello orizzontale nella parte inferiore dello schermo. Nell'angolo in basso a sinistra, ci sono alcuni controlli. Scegli l'opzione loop come "Per sempre" e premi il pulsante di riproduzione per vedere come appare la GIF. Nel nostro caso, la nostra GIF sembra abbastanza buona ma è ancora troppo lunga. Con oltre 200 fotogrammi e con una regolazione del colore, il file finale è di ben 312 mB. Puoi controllare le dimensioni del tuo file finale seguendo i passaggi nella sezione "Salva come GIF" di seguito. Dopo aver dato un'occhiata, premi Annulla invece di salvare. Sarai anche in grado di ridurre le dimensioni del file con le opzioni Esporta per il Web.

Come eliminare i fotogrammi per ridurre le dimensioni del file GIF

Per rendere la nostra GIF molto più piccola, eliminiamo gli ultimi 200 fotogrammi. Il video completo ha una sezione in cui la telecamera del drone gira e si sposta a sinistra verso il parco dietro la spiaggia. Non ne avevamo bisogno. Ora la nostra GIF pesa 160 MB. Ancora abbastanza grande. Non togliamo più fotogrammi perché diventerà nervoso, quindi lo lasciamo così com'è per ottimizzare in seguito con le opzioni 'Salva per Web'.

Per eliminare i frame, puoi selezionarne uno e premere l'icona del cestino che si trova sotto le funzioni di riproduzione della finestra della timeline. Allo stesso modo, puoi selezionare un gruppo consecutivo di fotogrammi facendo clic su uno e quindi i fotogrammi prima o dopo premendo MAIUSC+clic. Se non vuoi tagliare il metraggio dall'inizio o dalla fine della GIF ma vuoi accorciarlo, elimina i fotogrammi alternativi premendo su uno e poi comando+clic su ogni altro fotogramma.

Ci piace come quando crei una GIF su Photoshop con un video, puoi tagliare sezioni del filmato sia all'importazione che in seguito! Così pratico.

Come modificare la velocità della GIF

La finestra della timeline ti offre anche la possibilità di rallentare o accelerare la GIF. Ogni fotogramma nella timeline ha un controllo della velocità al di sotto di esso. La misurazione predefinita è "nessun ritardo" o "0", ma può succedere che il video che hai utilizzato avesse già una regolazione della velocità. Questo è il caso del nostro video. Se guardi lo screenshot qui sopra in cui eliminiamo i frame, puoi vedere che i nostri frame hanno un ritardo di 0,04 secondi. Quando visualizziamo l'anteprima della GIF, sembra che sia stata accelerata. Non lo vogliamo.

Selezioniamo tutti i frame nella timeline facendo clic sulle tre linee nell'angolo in alto a sinistra della finestra della timeline e facendo clic su "Seleziona tutti i frame". Su uno qualsiasi dei fotogrammi, facciamo clic sulla piccola freccia verso il basso e scegliamo "nessun ritardo". Questo farà fluire la nostra GIF in modo naturale. Per creare una GIF che assomigli al rallentatore, scegli un valore superiore a 1 secondo.

Salva come GIF e ottimizza

Quando tutto è finito, è il momento di salvare il progetto come GIF. Fare clic su File > Esporta > Salva per Web (legacy) e scegliere l'opzione GIF nella finestra di dialogo popup. Controlla la dimensione del file e considera il suo output. Ci sono alcune cose che puoi fare per ridurre la dimensione del file.

• Riduci il numero di colori.
• Riduci o rimuovi il dithering.
• Ridurre l'altezza e la larghezza.

Per verificare come le regolazioni stanno cambiando la tua GIF, fai clic sul pulsante Anteprima. Usa le schede 2-Up e 4-Up per vedere le diverse opzioni. Potrebbe essere necessario tornare indietro e rimuovere più frame se è ancora troppo grande. Punta a una dimensione del file inferiore a 20 MB. Se stavi creando una GIF per una sezione a larghezza intera, dovrai davvero ridurre i frame per poterla ottenere di buone dimensioni per il web.

Una buona regola è quella di mantenere i file GIF non più grandi di circa 20 MB. Più di questo è semplicemente troppo grande. Se riesci a ridurlo sotto i 10 MB senza perdere troppa qualità, allora hai un vincitore.

Abbiamo finito per eliminare più fotogrammi dalla nostra GIF per portarla a 18 MB. Quindi l'abbiamo passato a GIFCompressor e l'abbiamo ridotto del 55%. GIFCompressor è uno strumento online gratuito che riduce le dimensioni delle GIF senza perdere qualità. Puoi caricare una GIF di dimensioni fino a 50 MB.

Conclusione

Come vedi, è abbastanza facile creare una GIF in Photoshop da riprese video. L'unico avvertimento è la lunghezza del video con cui inizi e quanti fotogrammi rimuovi. Se non rimuovi abbastanza, il file finale sarà davvero enorme e non sarà di alcun aiuto. Potrebbero essere necessarie alcune prove per ottenere finalmente una GIF che appaia proprio come la desideri. Se stai creando GIF di schermate per tutorial, come in questa guida, ti prenderai la mano e sarà ogni volta più semplice.

Immagine in primo piano tramite emojoez / shutterstock.com