Igennem årene har vi fået mange spørgsmål om, hvordan vi laver GIF’er. Vi elsker GIF’er, fordi de er nemme at dele, de fungerer i alle browsere, og du kan lave dem i loop! På populær efterspørgsel er her en oversigt over vores to foretrukne værktøjer til oprettelse af GIF’er og vores arbejdsgang for hver af dem.
Indspilning af din skærm
Der findes et par gode værktøjer til skærmoptagelse. Hvis du er på Mac, kan du bruge Quicktime, som er helt gratis. I denne artikel bruger vi ScreenFlow, som er en betalingsapp fra Telestream.
ScreenFlow er et godt valg til optagelse, fordi det indeholder en kraftfuld editor, der giver dig detaljeret kontrol over din GIF. Når du åbner ScreenFlow eller trykker på configure recording vil du se denne skærm.
ScreenFlow recording configuration.
Først skal du sørge for, at du har din prototype på skærmen. Vælg derefter den skærm, du vil optage, og tryk på den røde knap for at starte optagelsen af hele skærmen. I denne vejledning vil jeg optage en interaktion, der er lavet i Framer, så mit preview-vindue er indstillet til fuld skærm. Det er muligt at beskære optagelsen til den perfekte størrelse senere.
Skab et perfekt loop
En ting, vi altid stræber efter, er en perfekt looping GIF, og en god måde at udføre dette på, er at sikre, at den sidste frame i din GIF er nøjagtig den samme som den første frame. Dette forhindrer spring, hvilket så får GIF’en til at flyde korrekt, når den afspilles på repeat.
Hvis din animation indeholder en musemarkør, og du har en rolig hånd, kan du nemt skabe et perfekt loop ved at placere musemarkøren med hånden. Brug visuelle stikord til at minde dig selv om, hvor du startede, og hvor du skal ende.
I mit eksempel har jeg gjort brug af en animeret touch cursor for at få det bedste resultat lige inden for den faktiske prototype, som jeg skal optage. Download dette eksempel for at se, hvordan du kan tilføje en animeret touch cursor til dine egne prototyper ved hjælp af Framer.
Aktive og inaktive tilstande for touch cursoren.
Tilføj effekter for at pifte det op
Nu, hvor du har lavet din optagelse i ScreenFlow, vil du måske justere den, så den fokuserer på det, du vil have med i GIF’en. Du kan gøre dette ved at gå til Fil > Dokumentindstillinger. I denne vejledning vil vi dele til Dribbble på nettet, så 800×600 er den optimale størrelse. Du vil bemærke, at dimensionerne på den optagelse, der blev lavet tidligere, er for store. Hvis du vil pille ved optagelsens skala, skal du vælge klippet og klikke øverst til højre i ScreenFlow.
Skalér dit klip, så det passer til dokumentstørrelsen, ved hjælp af skyderen til skalering.
Når din optagelse er på plads, skal du sørge for at trimme begyndelsen og slutningen ved at trække i klippet (husk, at vi ønsker at skabe det perfekte loop!).
Nu er din video klar til at blive eksporteret som den er, men vi anbefaler dog at tilføje nogle finpudsninger. ScreenFlow giver dig mulighed for at tilføje en jævn zooming-effekt for at fremhæve specifikke detaljer i din video. Det gør du ved at placere videoscrubberen over det punkt, hvor du ønsker at tilføje en zoomeffekt. Klik derefter på videohandlingsknappen i øverste højre hjørne af Screenflow, og klik på + Action. Vælg en fin start- og sluttilstand for handlingen ved hjælp af de skaleringskontroller, vi brugte tidligere. Sørg for at gentage disse trin for udzoomeffekten.
Definér animationer som zooming ved at tilføje videohandlinger.
Pro-tip: Når du deler en GIF på websteder som Dribbble, skal du huske, at det første billede af din GIF vises som miniaturebillede af indlægget, så sørg for at bruge det visuelt mest interessante billede.
Eksport fra ScreenFlow
Nu er vores klip poleret og perfektioneret, og det er tid til at eksportere. Screenflow tilbyder en forudindstilling til at eksportere klippet direkte som en GIF-fil, men vi foreslår at undgå denne rute, fordi din GIF-fil vil ende som en stærkt komprimeret stor fil.
I stedet vil vi eksportere en tabsfri .mov-fil. Naviger til Fil > Eksporter > Forindstilling > Lossless – ProRes med Alpha.
Aktivering af bevægelsesblur kan ofte få din GIF til at føles endnu mere glat, især med den zoom-effekt, vi har anvendt.
Blur vs. Ingen sløring
Optimering med Claquette
Claquette giver ligesom Screenflow mulighed for at optage hele eller en del af dit skrivebord og trimme, klippe og eksportere disse optagelser til GIF- eller videoformater. Du kan købe Claquette i Mac App Store for 9,99 $
Claquettes største fordel i forhold til Screenflow er, at det giver dig granulær kontrol over din GIF-kvalitet og dermed en bedre filstørrelse med en fantastisk komprimering. Dette giver dig mulighed for at skabe GIF’er af høj kvalitet, der har en optimal filstørrelse.
Som vi gjorde i Screenflow, skal du vælge den skærm, du vil optage, og trykke på optage i Claquette. Afspil den video, du lige har eksporteret, i QuickTime, og tryk på CMD + 1 for at afspille videoen i dens faktiske størrelse.
Claquette-optagelseskonfiguration.
Når klippet er færdig med at blive afspillet, skal du stoppe optagelsen for at begynde at beskære og trimme det. Flyt skyderen til venstre og højre for klippet til klipets begyndelse og slutning. Med hensyn til beskæringsstørrelse skal du bruge den størrelse, du også har valgt for dit klip i Screenflow: 800 x 600. Flyt beskæringsområdet til midten x:0 y:0 og tryk på beskæring.
Trimning og beskæring af klip i Claquette.
Find den rette balance
Her er tre GIF-kvaliteter, der har stor indflydelse på filstørrelsen:
data:image/svg+xml,%3Csvg%20viewBox%3D’0%200%2015%2011’%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%3E%3Cpath%20id%3D’mask’%20d%3D’M2%206l3.5%203.5L13%202’%20stroke-width%3D’2’%20stroke%3D’inherit’%20fill%3D’none’%20stroke-linecap%3D’round’%2F%3E%3C%2Fsvg%3E”);–list-check-dark:url(“data:image/svg+xml,%3Csvg%20viewBox%3D’0%200%2015%2011’%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%3E%3Cpath%20id%3D’mask’%20d%3D’M2%206l3.5%203.5L13%202’%20stroke-width%3D’2’%20stroke%3D’inherit’%20fill%3D’none’%20stroke-linecap%3D’round’%2F%3E%3C%2Fsvg%3E”)”>
I de fleste tilfælde, hvis din GIF kun indeholder en af disse kvaliteter, kan du skrue op for kvaliteten. Sørg for at indstille bredden og højden til 100 %, og sørg for at lave en evig sløjfe. Når din GIF indeholder mange farver, anbefaler jeg stærkt at holde farverne på 256 og skære ned på andre aspekter som FPS eller kvantiseringskvalitet.
Claquettes eksportindstillinger.
Der er ingen rigtig hellig gral for disse indstillinger, så når vi deler til Dribbble (max 8 mb), forsøger vi altid at skrue dem op til de højest mulige indstillinger, og derefter eksportere og se, hvad vi har at arbejde med. Bliv ved med at gentage denne eksportproces, indtil du finder en balance mellem størrelse og kvalitet, der passer til dine behov.
Pro-tip: Selv om Dribbble siger, at størrelsesgrænsen er 8 mb, er den faktisk 8,3 mb. Når du arbejder med store farverige gifs, vil du hurtigt finde ud af, hvorfor 0,3 mb betyder noget.
Nu har du læst guiden igennem, og vi håber, at den hjælper dig med at forvandle dine Framer-animationer til de bedst mulige GIF’er til præsentation af dit arbejde i din portfolio, på Dribbble og andre steder. Vi kan ikke vente med at se, hvad du skaber, så husk at tagge dit indlæg med #MadeWithFramer for at få chancen for at blive vist i vores ugentlige nyhedsbrev. God fornøjelse med at skabe!
Se det endelige resultat på Dribbble