In InVision, le animazioni GIF non vengono utilizzate per coccole: svolgono un ruolo importante in termini di marketing e istruzione. Quindi abbiamo anche provato a usarli sulla nostra homepage al posto delle animazioni realizzate con il codice.
Alla fine le persone hanno iniziato a chiederci: "Come si creano le animazioni GIF?" È tempo di svelare il segreto.
Progettazione immagine GIF
1. Ingrediente segreto
Ecco il mio piccolo segreto: tutte le mie animazioni GIF erano originariamente file video. Di solito uso ScreenFlow, che tra l'altro uso anche per creare video dei nostri prodotti. È un semplice programma che allo stesso tempo contiene molti utili strumenti di animazione.Dopo aver salvato l'animazione come file video, la importo in Photoshop tramite File> Importa> Fotogrammi video come livelli.
Consigli: Se ScreenFlow o After Effects sono troppo costosi per te, crea un'animazione in Keynote ed esportala come video. Infine, almeno qualche applicazione di questa funzionalità in Keynote.
2. Meno colori = più divertimento
Se vuoi creare fantastiche animazioni GIF, allora devi avvicinarti alla scelta del colore con una soggezione speciale. Ciò non influirà solo sulla dimensione del file, ma ti consentirà anche di creare animazioni più lunghe con file di piccole dimensioni. (Per me, piccolo è inferiore a 1 MB)3. Usa il motion blur se possibile
Programmi come ScreenFlow e After Effects ti consentono di esportare video con l'effetto movimento applicato. Ciò non solo conferisce alla tua animazione un aspetto professionale, ma semplifica anche la riduzione delle dimensioni del file in Photoshop.
4. Sii (un po') pigro
Immagina quali altri elementi potrei aggiungere all'animazione GIF all'inizio di questo post. Piccoli suggerimenti con nomi utente, clic con il cursore sul pulsante più e così via. Le persone non hanno bisogno di vedere tutto questo per avere una comprensione generale di ciò che vedono, quindi mostra solo ciò di cui hai bisogno: sei limitato nel tempo e nelle dimensioni del file.Esporta animazioni GIF
Prima di preoccuparti dei suggerimenti di seguito, prova a esportare la tua animazione GIF. Se è della taglia giusta, ottimo lavoro! Continua con lo stesso spirito. In caso contrario, prova i seguenti metodi.5. Rimuovi i fotogrammi duplicati
Molto probabilmente la tua animazione si ferma o rimane ferma per un momento. Guardando da vicino, noterai che questo momento è composto da diversi fotogrammi identici. Se ci sono 10 di questi fotogrammi, eliminane 9 e imposta la durata del fotogramma rimanente su, ad esempio, 1 secondo.
Se non funziona, prova a importare di nuovo il video, ma questa volta seleziona l'opzione Limite a ogni 2 fotogrammi. Questo dovrebbe ridurre significativamente la dimensione del file.
Consigli: Se la tua animazione è lunga più di 150 fotogrammi, avrai problemi a cercare di ridurre la dimensione del file.
6. Meno colori
Quando salvi la tua animazione GIF in Photoshop, vedrai un menu a discesa accanto al parametro Colori. Sperimenta con i valori, prova il minor numero di colori possibile che non renderanno l'intero file spazzatura.
7. Modificare il parametro Lossy *
Ad essere onesti, non so nemmeno cosa significhi questo parametro. Ma io Esattamente So che se lo metti tra 1 e 10, ti libererai dei kilobyte extra senza perdere qualità.
* "Lossy": il livello accettabile di perdita di informazioni grafiche in un file raster, che consente di ridurre la dimensione del file dell'immagine
Niente è cambiato! Aiuto!
Se hai provato tutto ciò che è stato detto sopra, ma non sei ancora riuscito a ridurre le dimensioni dell'animazione GIF, devi fare un passo indietro. Vuoi l'impossibile? C'è un altro modo per ottenere ciò che desideri? Posso dividere un file in due animazioni GIF? È meglio se la tua animazione GIF si concentra su un aspetto.Da un traduttore. Con tutti i desideri e commenti riguardanti la traduzione, vi prego di contattarmi in modo personale. Grazie!
Ciao amici! In questo articolo capiremo come creare un'animazione GIF diversi modi. Da semplici immagini e da video, utilizzando servizi online e utilizzando vari programmi gratuiti.
Con lo sviluppo dell'animazione, sono comparsi cartoni animati che quasi tutti hanno guardato, guardato e guarderanno. L'ulteriore sviluppo ha portato alla nascita di film insieme all'animazione. Un ottimo esempio di ciò è Chi ha incastrato Roger Rabbit. Con lo sviluppo della tecnologia, è apparsa l'animazione al computer che ha portato film e cartoni animati a un livello qualitativamente nuovo. In questo articolo impareremo come creare semplici animazioni GIF.
L'aspetto positivo di questo metodo è che non è necessario scaricare e/o installare programmi aggiuntivi.
Esistono molti servizi per la creazione di gif. Ne ho provati tre su me stesso e di questi tre mi è piaciuto http://gifovina.ru/
Vai al sito web del servizio e usa il pulsante Aggiungi cornici per caricare le immagini.
Se hai aggiunto più immagini contemporaneamente, potrebbero essere allineate nell'ordine sbagliato. Per risolvere questo problema, sposta il mouse sull'immagine che desideri spostare. Viene visualizzata un'icona nell'angolo in alto a sinistra dell'immagine, afferrandola con il mouse per la quale è possibile posizionare l'immagine in un altro punto della coda
Inoltre, nell'angolo in alto a destra dell'immagine viene visualizzata una croce che consente di eliminare l'immagine.
C'è un campo con un numero sotto ogni immagine. Questa è la durata del fotogramma in secondi. Per impostazione predefinita, questo è 1 secondo. La durata può essere modificata facendo clic su questo campo e utilizzando lo slider per impostare il tempo richiesto o utilizzando la tastiera per impostare la durata richiesta.
Puoi personalizzare gli effetti di transizione tra i fotogrammi. Per fare ciò, clicca sull'icona del cerchio barrato tra le immagini e, nel menu che si apre, seleziona l'effetto desiderato.
Dopo aver selezionato un effetto, sarà disponibile la durata di questo effetto, che può anche essere regolata.
Al centro, puoi modificare la cornice selezionata. Le possibilità di modifica consistono nell'aggiungere forme diverse alle immagini. All'interno di queste forme, puoi definire una didascalia. Ci sono due caratteri tra cui scegliere. Quest'ultimo può essere selezionato in qualsiasi dimensione, renderlo grassetto e/o corsivo.
Puoi impostare i colori per lo sfondo, il testo e il bordo di una forma.
Le seguenti opzioni sono disponibili sul lato destro della finestra di modifica dell'animazione.
La dimensione... È possibile impostare la dimensione dell'animazione. Dall'elenco a discesa selezionare quello richiesto o selezionare Personalizza ... e nella finestra a comparsa specificare la dimensione richiesta.
Maggiore è la dimensione dell'animazione, maggiore è il peso del file GIF.
Animazione GIF creata.
Dal video
Per creare un'animazione GIF da un video, devi installare un qualche tipo di programma. mi piace iWisoft Convertitore video gratuito... Puoi scaricare questo programma gratuito dal sito ufficiale http://www.iwisoft.com/videoconverter/.
Scarica, installa ed esegui.
Nella finestra che si apre a sinistra, vedi il video originale, quello che ottieni a destra. Utilizzando la barra sotto la timeline, puoi limitare il tempo della tua animazione. Ho bisogno di un piccolo pezzo dal video che è selezionato nella foto.
Con l'aiuto del frame nella finestra del video originale, puoi selezionare la parte del frame che vuoi vedere nella tua animazione. Puoi personalizzare una serie di effetti secondo necessità.
Il papà con la nostra animazione si apre subito. Ho ricevuto un file GIF da 33 MB, nonostante il video originale pesi< 19 МБ).
Dal video online
Nel campo, inserisci un collegamento a un video di YouTube e fai clic su Mostra video.
Nel video, puoi scegliere 10 secondi qualsiasi per creare un'animazione GIF. Questo viene impostato trascinando il cursore sulla scala sotto il video.
È possibile specificare manualmente l'ora di inizio e di fine dell'animazione. Per fare ciò, fare clic sul collegamento " inserire l'ora manualmente"E chiedi.
Se scegli Modalità avanzata creando una gif, puoi anche impostare la larghezza dell'animazione spostando il cursore.
Quando tutto è pronto, premi Continua.
È così facile creare animazioni Gif online dai video di YouTube.
GifCam.exe
C'è un semplice programma che ti permette di creare animazioni GIF. Puoi scaricarlo dal link
Le caratteristiche principali dell'utilità sono descritte anche in inglese.
Il programma non richiede installazione. Scarica l'archivio, scompatta ed esegui GifCam.exe
Si apre una finestra del programma che riprenderà ciò che vuoi vedere nella tua animazione GIF.
È una combinazione di immagini e animazione. È molto facile farlo da soli. Ora esamineremo l'intero processo passo dopo passo.
Per fare ciò, utilizzeremo un servizio speciale a Odnoklassniki. Si chiama Magisto. Per creare una gif, le foto devono essere caricate sulla tua pagina, girate e distribuite.
IMPORTANTE: ci devono essere almeno 7 foto in un album per creare animazioni gif in Magisto.
Creazione GIF:
Abbiamo utilizzato le funzionalità gratuite di questo servizio. Allo stesso tempo, il numero di foto che Magisto caricherà su una GIF non è superiore a 15 e il download è impossibile senza l'acquisto di un account premium a pagamento.
Come creare una gif utilizzando un servizio online
Esistono molti servizi online per la creazione di gif, ma ne useremo uno come esempio. Il suo nome è Gifovina. Nella barra degli indirizzi del browser, scrivi "gifovina.ru" e vai al sito.
Creazione di animazioni gif:
La GIF è stata creata. Ora scarica e salva il video sul tuo computer.
Come creare una gif con Photoshop
Il metodo non è facile, poiché richiede abilità nel lavorare nel programma Photoshop. In questo editor, puoi creare una GIF da una o più foto.
Puoi saperne di più sulla creazione di una gif da un'immagine nel video: https://www.youtube.com/watch?v=y2UTWJjUtic.
Come puoi vedere, ci sono molti modi per creare animazioni gif, il principale dei quali è stato trattato. I primi due stanno creando GIF online. Sono più semplici e veloci, ma se mostri perseveranza e dedichi tempo all'apprendimento, Photoshop ti offrirà molte più opportunità.
Molti utenti potrebbero aver bisogno di creare un breve video gif che può essere utilizzato come avatar su vari forum, per dimostrare frame umani significativi e altre attività simili. Per creare una gif da immagini esistenti, puoi utilizzare le capacità di strumenti speciali (sia fissi che di rete) che possono aiutare a creare un file gif delle dimensioni e della qualità di cui abbiamo bisogno. Dopo diverse settimane di lavoro con il formato gif, ti parlerò dei modi migliori per creare una gif dalle fotografie () e quali strumenti ci aiuteranno in questo.
Al momento, ci sono tre modi principali per creare un file gif dalle foto che abbiamo. Sono i seguenti:
Diamo un'occhiata più da vicino a ciascuno di questi metodi.
I migliori servizi per realizzare una bellissima gif online
- Toolson.net è una risorsa in lingua russa in cui l'installazione di GIF è costruita secondo i modelli standard per tali servizi. Vai a questa risorsa, carica le foto nella sequenza corretta. Successivamente, specifichi l'intervallo tra i fotogrammi in millisecondi, le dimensioni in pixel dell'animazione gif in altezza e larghezza, la capacità di eseguire il loop del video e selezionare vari effetti. Quindi fai clic sul pulsante "Crea" e scarica la gif risultante sul tuo computer;
- Gifius.ru è un'altra risorsa in lingua russa, il cui lavoro si basa su modelli di modelli per risorse di questo tipo. Carichi immagini per creare un'animazione gif, imposti le impostazioni dell'animazione, quindi fai clic su "Scarica GIF" e salvi il risultato;
- Picasion.com è una risorsa in lingua inglese per la creazione di gif. Lavorare con esso non differisce dagli analoghi: carica una foto (se necessario, fai clic su "Aggiungi un'altra immagine" per caricare più foto), seleziona la dimensione del video (Dimensione), la velocità di dimostrazione delle immagini (Velocità), e clicca su "Crea Animazione", quindi salva il risultato sul tuo PC;
Programmi fissi per la creazione di GIF
Tra i programmi per computer che ti permetteranno di raccogliere una gif da foto di alta qualità, puoi notare strumenti popolari come "Photoshop" e "Gimp". La composizione di un file gif utilizzando le soluzioni professionali di cui sopra presuppone una buona padronanza delle funzionalità di questi programmi (lavorare con i livelli, ridimensionare le immagini ecc.).
Puoi anche notare le soluzioni software più semplici del livello "Unfreez", "Easy GIF Animator", "GIF Movie Gear" e altri analoghi che puoi cercare in rete. Le specifiche del loro lavoro non differiscono molto dalla funzionalità dei servizi mobili sopra descritti: carichi le foto di cui hai bisogno in un tale programma, specifichi i parametri della futura gif e la crei facendo clic sul pulsante appropriato.
Easy GIF Animator ti consente di creare una gif dalle tue foto esistenti
Programmi mobili per montare GIF
Un altro modo per comporre GIF dalle foto è utilizzare applicazioni mobili come "GifBoom", "5Second App", "GIF Camera", "GIF Camera" e altri analoghi per Android, iOS, Windows Phone OS.
Configurazione delle impostazioni GIF nella fotocamera GIF
Lavorare con loro consiste solitamente nello scegliere più foto per una gif, già disponibili nella memoria del telefono, e nell'ottenere una foto per una gif utilizzando la fotocamera del telefono (scatto). Dopo aver caricato le immagini necessarie nell'applicazione, resta da specificare un numero di parametri per la conversione della gif (dimensioni, frame rate, loop video e così via), quindi eseguire il processo di conversione stesso e ottenere il risultato.
Conclusione
In questo articolo, ho esaminato la composizione di gif animate da scatti fotografici e gli strumenti che possono aiutarci in questo. L'opzione più semplice e conveniente è utilizzare i servizi di rete che creeranno la gif di cui hai bisogno in un paio di clic e poi salvarla sul tuo PC. L'uso di programmi fissi e mobili è giustificato in caso di necessità di un'elaborazione più ampia delle foto di base e della formazione di un file gif, che nella maggior parte dei casi non è necessario.
In contatto con
Le GIF sono ovunque. Un tempo umili, le immagini animate sono ora il linguaggio non ufficiale di Internet. L'animazione GIF è il modo più veloce per esprimere emozioni su Twitter e possiamo anche passare ore a guardarla scorrendo il feed delle notizie su VK, Facebook o Odnoklassniki.
Esiste un numero abbastanza elevato di siti su cui è possibile trovare gif già pronte su una varietà di argomenti. Ma niente batte un'animazione GIF fai-da-te. Pensi che questo sia un processo difficile? Ti sbagli, è abbastanza semplice. Puoi creare rapidamente animazioni GIF nell'editor grafico Photoshop, convertendo un video esistente o utilizzando una serie di immagini statiche. Diamo un'occhiata più da vicino a come è fatto.
Nota: Per tutti gli esempi in questo articolo, sto utilizzando Photoshop CC 2017.
Come creare animazioni GIF da video
Per prima cosa devi avviare Photoshop, andare su File> Importa> Fotogrammi video su livelli e selezionare il video che desideri.
Nella finestra di dialogo che si apre, puoi importare l'intero video o selezionarne solo una parte. Se scegli la seconda opzione, trascina le maniglie sotto la finestra di anteprima per impostare i punti di inizio e fine. Verrà importata la parte del video compresa tra questi grip.
Nota: Tieni presente che più video importi, più grande sarà la tua GIF. Inoltre, se stai importando filmati troppo lunghi, scegliere Lascia ogni 2 fotogrammi (o più) è un modo semplice per ridurre le dimensioni senza influire troppo sulla qualità.
Assicurati che la casella di controllo Crea animazione stop motion sia selezionata, quindi fai clic su OK. Viene avviato il processo di importazione del video. Questa operazione potrebbe richiedere del tempo a seconda delle dimensioni della clip. Al termine dell'importazione, si aprirà un'area di lavoro in cui ogni fotogramma video verrà posizionato sul proprio livello.
Nella parte inferiore dello schermo c'è la tavolozza Timeline. Mostra tutti i fotogrammi di cui sarà composta la tua animazione GIF.
Puoi aggiungere e rimuovere i fotogrammi a tuo piacimento o modificare uno qualsiasi dei livelli esistenti nello stesso modo in cui modifichi i livelli su qualsiasi altra immagine. Per visualizzare in anteprima la tua animazione GIF, fai semplicemente clic sul pulsante Riproduci nella parte inferiore della timeline.
Dovresti finire con qualcosa del genere:
Crea animazioni GIF da una serie di immagini statiche
Se non hai un video da utilizzare come base per la tua animazione GIF, puoi crearlo manualmente da una serie di immagini fisse. È un po' complicato, soprattutto se vuoi fare qualcosa di interessante, ma il processo di base è semplice.
Crei la tua GIF da un singolo file immagine contenente più livelli. Ogni livello è un fotogramma separato della tua animazione futura. Ci sono due modi per iniziare:
- Se hai già creato immagini per la tua animazione, importale scegliendo File > Script > Carica file da impilare.... Fare clic su Sfoglia e selezionare le immagini, quindi fare clic su OK. Ogni immagine verrà posizionata su un livello separato all'interno dello stesso file.
- Se non hai ancora creato immagini, fallo ora. Ricorda che ogni singola immagine fa parte dell'animazione futura.
Ora sei pronto per iniziare a creare la tua animazione.
Animazione di immagini statiche
È così che funziona. Quando crei manualmente un fotogramma di animazione, ogni livello visibile viene incluso in esso. I livelli disabilitati non parteciperanno al fotogramma generato.
Per il primo fotogramma, rendi visibile il primissimo livello e disattiva tutti gli altri. Quindi, creando il secondo fotogramma, rendi visibile il secondo livello, quindi il terzo livello nel terzo fotogramma e così via. Quando inizi, le cose diventeranno più chiare.
Per iniziare a creare l'animazione, apri la timeline se non si è aperta automaticamente per te. Per fare ciò, nel pannello superiore, fai clic su "Finestra" e nel menu che si apre, seleziona "Cronologia". Al centro del pannello che si apre, fai clic su Crea animazione fotogramma. Questa azione creerà il primo fotogramma della tua animazione. Nel pannello Livelli, nascondi i livelli che non dovrebbero far parte della cornice.
Ora fai clic sul pulsante "Nuovo frame", che duplicherà il frame precedente. Nascondi ancora una volta i livelli extra e rendi visibili quelli che dovrebbero partecipare alla cornice.
Ripeti questo processo finché non hai aggiunto tutti i fotogrammi necessari per l'animazione.
Completamento
Infine, imposta il tempo di visualizzazione per ogni fotogramma. Seleziona il primo fotogramma e poi fai Maiusc-clic sull'ultimo per selezionarli tutti. Ora fai clic sulla freccia in basso sotto uno dei fotogrammi e seleziona un ritardo. Nessun ritardo significa che l'animazione verrà eseguita rapidamente, mentre il numero di secondi impostato costringerà i fotogrammi a rimanere sullo schermo per il periodo di tempo impostato.
Infine, imposta le opzioni di loop, che troverai nella parte inferiore del pannello Timeline. Questo parametro è responsabile di quante volte verrà riprodotta la tua animazione. Nella maggior parte dei casi, sceglierai l'opzione Sempre.
Ora fai clic sul pulsante Riproduci nella parte inferiore dello schermo per visualizzare in anteprima l'animazione risultante. Dovresti vedere qualcosa del genere:
Puoi modificare i fotogrammi semplicemente selezionandoli e modificando la visibilità dei livelli (puoi anche modificare l'opacità o effettuare altre impostazioni più complesse). Aggiungi altri livelli se ne hai bisogno o fai clic sull'icona del cestino per rimuoverli.
Quando sei soddisfatto del risultato, puoi passare alla sezione "Salvataggio dell'animazione" o continuare a leggere per migliorare l'animazione risultante.
Miglioramento dell'animazione aggiungendo frame intermedi
Photoshop supporta una potente funzione di animazione per la creazione di interpolazioni. Ciò consente animazioni più fluide generando automaticamente fotogrammi di transizione tra due fotogrammi esistenti. In questo esempio, scorrerò tutti i fotogrammi per dare al cielo stellato un effetto scintillante.
Per iniziare, seleziona il primo fotogramma e fai clic sul pulsante Crea interpolazioni sulla barra degli strumenti nella parte inferiore della timeline.
Nella finestra di dialogo che si apre, imposta la voce "Fotogrammi intermedi" al valore "Fotogramma successivo", e per la voce "Aggiungi cornici" specifica il valore che preferisci. Un valore più alto significa una transizione più fluida ma più lenta. Fare clic su "OK" per creare frame intermedi.
Ora ripeti questo processo per gli altri frame sorgente che hai aggiunto. Quando arrivi all'ultimo, imposta "Interframes" su "First Frame". Ciò contribuirà a creare una transizione graduale all'inizio del ciclo di animazione.
Premere il pulsante di riproduzione per visualizzare l'effetto.
Salvataggio dell'animazione
Al termine, salva prima il file in formato ".PSD". Ciò salverà tutte le informazioni sui livelli e sull'animazione in modo da poter modificare successivamente l'animazione, se necessario. Successivamente, puoi passare direttamente al salvataggio.
Per salvare l'animazione che hai creato, vai su File> Esporta> Salva per Web (Legacy) .... Nella finestra che si apre, seleziona il formato GIF e nel campo "Colori" specifica 256. Per ridurre le dimensioni complessive del file, riduci le dimensioni nel campo "Dimensione immagine".
Puoi vedere la dimensione dell'animazione nell'angolo in basso a sinistra della finestra di anteprima. Se è troppo grande, trascina il cursore Rifiuti verso destra. Ciò influenzerà la qualità, ma ridurrà significativamente la dimensione del file.
