Negli anni abbiamo ricevuto molte domande su come creare GIF. Amiamo le GIF perché sono facili da condividere, funzionano in tutti i browser e puoi farle girare! A grande richiesta, ecco una panoramica dei nostri due strumenti preferiti per la creazione di GIF e il nostro flusso di lavoro per ciascuno.

Registrare lo schermo

Ci sono alcuni ottimi strumenti di registrazione dello schermo. Se sei su Mac, puoi usare Quicktime, che è completamente gratuito. In questo articolo, useremo ScreenFlow, che è un’applicazione a pagamento di Telestream.

ScreenFlow è una grande opzione per la registrazione perché include un potente editor che ti dà un controllo dettagliato sulla tua GIF. Quando apri ScreenFlow o premi configura la registrazione vedrai questa schermata.

Prima, assicurati di avere il tuo prototipo sullo schermo. Poi, selezionate il display che registrerete e premete il pulsante rosso per iniziare a registrare l’intero schermo. In questo tutorial, registrerò un’interazione fatta in Framer, quindi la mia finestra di anteprima è impostata a schermo intero. E’ possibile ritagliare la registrazione alla dimensione perfetta in seguito.

Crea un loop perfetto

Una cosa a cui aspiriamo sempre è una GIF perfettamente in loop, e un buon modo per farlo è assicurarsi che l’ultimo frame della tua GIF sia esattamente uguale al primo. Questo previene i salti, il che fa sì che la GIF fluisca correttamente quando viene riprodotta a ripetizione.

Se la vostra animazione contiene un cursore del mouse e avete una mano ferma, potete facilmente creare un loop perfetto posizionando il cursore del mouse a mano. Usate spunti visivi per ricordarvi da dove siete partiti e dove dovete finire.

Nel mio esempio ho fatto uso di un cursore touch animato per ottenere il miglior risultato proprio all’interno del prototipo reale che registrerò. Scarica questo esempio per vedere come puoi aggiungere un cursore tattile animato ai tuoi prototipi usando Framer.

Aggiungi effetti per ravvivare il tutto

Ora che hai fatto la tua registrazione in ScreenFlow, potresti volerla regolare per concentrarti su ciò che vuoi presentare nella GIF. Per fare questo, andate su File > Impostazioni del documento. In questo tutorial, condivideremo su Dribbble on Web, quindi 800×600 è la dimensione ottimale. Noterete che le dimensioni della registrazione fatta in precedenza sono troppo grandi. Per giocare con la scala della registrazione, seleziona la clip e clicca in alto a destra di ScreenFlow.

Una volta che la tua registrazione è in posizione, assicurati di tagliare l’inizio e la fine trascinando la clip (ricorda, vogliamo creare un loop perfetto!).

A questo punto il tuo video è pronto per essere esportato così com’è, anche se ti consigliamo di aggiungere qualche tocco finale. ScreenFlow vi permette di aggiungere un effetto di zoom fluido per evidenziare dettagli specifici nel vostro video. Per farlo, posizionate lo scrubber video sul punto in cui volete aggiungere un effetto di zoom. Poi, cliccate sul pulsante azione video nell’angolo in alto a destra di Screenflow e cliccate + Action. Selezionate un bello stato iniziale e finale per l’azione usando i controlli di scala che abbiamo usato prima. Assicurati di ripetere questi passi per l’effetto zoom out.

Pro-tip: Quando condividi una GIF su siti come Dribbble, tieni presente che il primo fotogramma della tua GIF sarà mostrato come thumbnail del post, quindi assicurati di usare il fotogramma più interessante dal punto di vista visivo.

Esportazione da ScreenFlow

Ora che la nostra clip è rifinita e perfezionata, è tempo di esportare. Screenflow offre una preimpostazione per esportare la clip direttamente come GIF, anche se suggeriamo di evitare questa strada perché la GIF finirà per essere un grande file pesantemente compresso.

Invece, esporteremo un file .mov senza perdite. Vai su File > Esporta > Preset > Lossless – ProRes con Alpha.

Abilitare la sfocatura del movimento può spesso rendere la tua GIF ancora più liscia, specialmente con l’effetto zoom che abbiamo applicato.

Ottimizzazione con Claquette

Claquette proprio come Screenflow offre la possibilità di registrare tutto o parte del vostro desktop e tagliare, tagliare ed esportare queste registrazioni in formato GIF o video. È possibile acquistare Claquette nel Mac App Store per $9.99

Il più grande vantaggio di Claquette rispetto a Screenflow è che ti dà un controllo granulare sulla qualità delle GIF e quindi una migliore dimensione del file con una compressione incredibile. Questo vi permetterà di creare GIF di alta qualità che hanno una dimensione ottimale del file.

Proprio come abbiamo fatto in Screenflow, selezionate il display che registrerete e premete record in Claquette. Riproduci il video che hai appena esportato in QuickTime e premi CMD + 1 per riprodurre il video alle sue dimensioni reali.

Quando la clip ha finito di essere riprodotta, ferma la registrazione per iniziare a ritagliarla e rifilarla. Sposta il cursore a sinistra e a destra del clip all’inizio e alla fine del clip. Per quanto riguarda la dimensione del ritaglio, usa la dimensione che hai scelto per il tuo clip in Screenflow: 800 x 600. Sposta l’area di ritaglio al centro x:0 y:0 e premi crop.

Trovare il giusto equilibrio

Ecco tre qualità GIF che hanno una grande influenza sulla dimensione del file:

• Quantità di colori
• Quantità di movimento
• Durazione

Nella maggior parte dei casi, se la tua GIF contiene solo una di queste qualità, allora puoi aumentare la qualità. Assicuratevi di impostare la larghezza e l’altezza al 100% e il loop per sempre. Quando la tua GIF contiene molti colori, raccomando fortemente di mantenere i colori a 256 e di ridurre altri aspetti come FPS o qualità di quantizzazione.

Non c’è un vero e proprio Santo Graal per queste impostazioni, quindi quando condividiamo su Dribbble (max 8mb) cerchiamo sempre di portarle al massimo delle impostazioni possibili, poi esportiamo e vediamo cosa abbiamo a disposizione. Continuate a ripetere questo processo di esportazione fino a trovare un equilibrio tra dimensione e qualità che si adatta alle vostre esigenze.

Pro-tip: anche se Dribbble dice che il limite di dimensione è 8mb, in realtà è 8.3mb. Quando lavorate con grandi gif colorate, scoprirete rapidamente perché 0.3mb sono importanti.

Ora che avete letto la guida, speriamo che vi aiuti a trasformare le vostre animazioni Framer nelle migliori GIF possibili per presentare il vostro lavoro sul vostro portfolio, Dribbble e altrove. Non vediamo l’ora di vedere cosa create, quindi assicuratevi di taggare il vostro post con #MadeWithFramer per avere la possibilità di essere presenti nella nostra newsletter settimanale. Buona creazione!

Guarda il risultato finale su Dribbble