De-a lungul anilor, am primit o mulțime de întrebări despre cum creăm GIF-uri. Ne plac GIF-urile pentru că sunt ușor de partajat, funcționează în toate browserele și le puteți face în buclă! La cererea populară, iată o prezentare generală a celor două instrumente preferate de creare de GIF-uri și a fluxului nostru de lucru pentru fiecare dintre ele.
Înregistrarea ecranului
Există câteva instrumente excelente de înregistrare a ecranului. Dacă sunteți pe Mac, puteți folosi Quicktime, care este complet gratuit. În acest articol, vom folosi ScreenFlow, care este o aplicație plătită de Telestream.
ScreenFlow este o opțiune excelentă pentru înregistrare, deoarece include un editor puternic care vă oferă un control detaliat asupra GIF-ului dvs. Când deschideți ScreenFlow sau apăsați Configurare înregistrare, veți vedea acest ecran.
Configurarea înregistrării ScreenFlow.
În primul rând, asigurați-vă că aveți prototipul pe ecran. Apoi, selectați afișajul pe care îl veți înregistra și apăsați butonul roșu pentru a începe înregistrarea întregului ecran. În acest tutorial, voi înregistra o interacțiune realizată în Framer, așa că fereastra de previzualizare este setată pe ecran complet. Este posibil să tăiați înregistrarea la dimensiunea perfectă mai târziu.
Crearea unei bucle perfecte
Un lucru pentru care ne străduim întotdeauna este un GIF cu buclă perfectă, iar o modalitate bună de a executa acest lucru este să vă asigurați că ultimul cadru al GIF-ului dvs. este exact același cu primul cadru. Acest lucru previne salturile, ceea ce face apoi ca GIF-ul să curgă corect atunci când este redat pe repeat.
Dacă animația dvs. conține un cursor de mouse și aveți o mână sigură, puteți crea cu ușurință o buclă perfectă prin poziționarea manuală a cursorului de mouse. Folosiți indicii vizuale pentru a vă reaminti de unde ați pornit și unde trebuie să ajungeți.
În exemplul meu am folosit un cursor tactil animat pentru cel mai bun rezultat chiar în cadrul prototipului real pe care îl voi înregistra. Descărcați acest exemplu pentru a vedea cum puteți adăuga un cursor tactil animat în propriile prototipuri folosind Framer.
State active și inactive pentru cursorul tactil.
Adaugați efecte pentru a o condimenta
Acum că ați făcut înregistrarea în ScreenFlow, este posibil să doriți să o ajustați pentru a vă concentra pe ceea ce doriți să prezentați în GIF. Pentru a face acest lucru, mergeți la File > Document settings. În acest tutorial, vom partaja pe Dribbble pe Web, așa că 800×600 este dimensiunea optimă. Veți observa că dimensiunile înregistrării făcute mai devreme sunt prea mari. Pentru a vă juca cu scara înregistrării, selectați clipul și faceți clic în partea dreaptă sus a ScreenFlow.
Ecadrați clipul pentru a se potrivi cu dimensiunea documentului folosind cursorul de scală.
După ce înregistrarea dvs. este la locul ei, asigurați-vă că tăiați începutul și sfârșitul prin tragerea clipului (nu uitați, vrem să creăm o buclă perfectă!).
În acest moment videoclipul dvs. este gata să fie exportat ca atare, deși vă recomandăm să adăugați câteva finisaje. ScreenFlow vă permite să adăugați un efect de zoom neted pentru a evidenția detalii specifice în videoclipul dumneavoastră. Pentru a face acest lucru, poziționați scrubberul video peste punctul în care doriți să adăugați un efect de zoom. Apoi, faceți clic pe butonul de acțiune video din colțul din dreapta sus al Screenflow și faceți clic pe + Action. Selectați o stare de început și o stare de sfârșit frumoasă pentru acțiune folosind controalele de scalare pe care le-am folosit mai devreme. Asigurați-vă că repetați acești pași pentru efectul de zoom out.
Definiți animații precum zoom-ul prin adăugarea de acțiuni video.
Pro-tip: Când partajați un GIF pe site-uri precum Dribbble, țineți cont de faptul că primul cadru al GIF-ului dvs. va fi afișat ca miniatură a postării, așa că asigurați-vă că folosiți cel mai interesant cadru din punct de vedere vizual.
Exportul din ScreenFlow
Acum că clipul nostru este lustruit și perfecționat, este timpul să exportăm. Screenflow oferă o presetare pentru a exporta clipul direct ca un GIF, deși vă sugerăm să evitați această rută deoarece GIF-ul dvs. va sfârși ca un fișier mare puternic comprimat.
În schimb, vom exporta un fișier .mov fără pierderi. Navigați la File > Export > Preset > Lossless – ProRes with Alpha.
Activarea blurului de mișcare poate face adesea ca GIF-ul dvs. să pară și mai fluid, în special cu efectul de zoom pe care l-am aplicat.
Blur vs. No blur
Optimizarea cu Claquette
Claquette, la fel ca și Screenflow, oferă posibilitatea de a vă înregistra întregul desktop sau orice parte a acestuia și de a tăia, tăia și exporta aceste înregistrări în format GIF sau video. Puteți cumpăra Claquette în Mac App Store pentru 9,99 $
Claquette are ca cel mai mare avantaj față de Screenflow faptul că vă oferă un control granular asupra calității GIF-urilor și, astfel, o dimensiune mai bună a fișierului cu o compresie uimitoare. Acest lucru vă va permite să creați GIF-uri de înaltă calitate care au o dimensiune optimă a fișierului.
La fel cum am făcut în Screenflow, selectați afișajul pe care îl veți înregistra și apăsați înregistrare în Claquette. Redați videoclipul pe care tocmai l-ați exportat în QuickTime și apăsați CMD + 1 pentru a reda videoclipul la dimensiunea sa reală.
Configurarea înregistrării în Claquette.
Când clipul a terminat de redat, opriți înregistrarea pentru a începe decuparea și tăierea acestuia. Deplasați cursorul din stânga și din dreapta clipului la începutul și la sfârșitul clipului. În ceea ce privește dimensiunea de decupare, utilizați dimensiunea pe care ați ales-o și pentru clipul dvs. în Screenflow: 800 x 600. Mutați zona de decupare în centru x:0 y:0 și apăsați pe crop.
Trimarea și decuparea clipurilor în Claquette.
Căutarea echilibrului corect
Iată trei calități GIF care au o mare influență asupra dimensiunii fișierului:
- Cantitate de culori
- Cantitate de mișcare
- Durată
În majoritatea cazurilor, dacă GIF-ul dvs. conține doar una dintre aceste calități, atunci puteți mări calitatea. Aveți grijă să setați lățimea și înălțimea la 100% și să faceți o buclă la nesfârșit. Atunci când GIF-ul dvs. conține o mulțime de culori, vă recomand cu tărie să păstrați culorile la 256 și să reduceți alte aspecte, cum ar fi FPS sau calitatea cuantificării.
Setări de export ale Claquette.
Nu există un adevărat Sfânt Graal pentru aceste setări, așa că atunci când partajăm pe Dribbble (max 8mb) încercăm întotdeauna să le ridicăm la cele mai înalte setări posibile, apoi exportăm și vedem cu ce avem de lucru. Continuați să repetați acest proces de export până când găsiți un echilibru mărime/calitate care se potrivește nevoilor dumneavoastră.
Pro-tip: Chiar dacă Dribbble spune că limita de mărime este de 8mb, de fapt este de 8,3mb. Când lucrați cu gif-uri mari și colorate, veți afla rapid de ce contează 0,3mb.
Acum că ați citit ghidul, sperăm că vă ajută să vă transformați animațiile Framer în cele mai bune GIF-uri posibile pentru a vă prezenta munca în portofoliu, pe Dribbble și în alte locuri. Abia așteptăm să vedem ce creați, așa că nu uitați să etichetați postarea dvs. cu #MadeWithFramer pentru a avea șansa de a fi prezentat în buletinul nostru informativ săptămânal. Creație fericită!
Vezi rezultatul final pe Dribbble
.