Over de jaren heen hebben we veel vragen gekregen over hoe we GIFs maken. We houden van GIFs omdat ze makkelijk te delen zijn, ze werken in alle browsers, en je kunt ze loops maken! Op veler verzoek volgt hier een overzicht van onze twee favoriete tools om GIF’s te maken en onze werkwijze voor beide.
Uw scherm opnemen
Er zijn een paar geweldige tools voor schermopnamen. Als je een Mac hebt, kun je Quicktime gebruiken, dat is helemaal gratis. In dit artikel zullen we ScreenFlow gebruiken, wat een betaald programma is van Telestream.
ScreenFlow is een geweldige optie voor het opnemen omdat het een krachtige editor bevat die je gedetailleerde controle geeft over je GIF. Wanneer u ScreenFlow opent of op configure recording drukt, ziet u dit scherm.
ScreenFlow-opnameconfiguratie.
Zorg er eerst voor dat u uw prototype op het scherm hebt. Selecteer vervolgens het scherm dat u wilt opnemen en druk op de rode knop om het hele scherm op te nemen. In deze tutorial neem ik een interactie op die gemaakt is in Framer, dus mijn preview venster is ingesteld op volledig scherm. Het is mogelijk om de opname later bij te snijden tot de perfecte grootte.
Creeer een perfecte loop
Een ding waar we altijd naar streven is een perfect looping GIF, en een goede manier om dit uit te voeren is om ervoor te zorgen dat het laatste frame van uw GIF precies hetzelfde is als het eerste frame. Dit voorkomt verspringingen, waardoor de GIF bij herhaald afspelen goed doorloopt.
Als je animatie een muiscursor bevat en je een vaste hand hebt, kun je eenvoudig een perfecte loop maken door de muiscursor met de hand te positioneren. Gebruik visuele aanwijzingen om jezelf eraan te herinneren waar je bent begonnen en waar je moet eindigen.
In mijn voorbeeld heb ik gebruik gemaakt van een geanimeerde touch cursor voor het beste resultaat direct binnen het eigenlijke prototype dat ik zal opnemen. Download dit voorbeeld om te zien hoe u een geanimeerde aanraakcursor aan uw eigen prototypes kunt toevoegen met Framer.
Actieve en inactieve toestanden voor de aanraakcursor.
Effecten toevoegen
Nu u uw opname hebt gemaakt in ScreenFlow, wilt u deze misschien aanpassen om de nadruk te leggen op wat u in de GIF wilt opnemen. Om dit te doen, gaat u naar Bestand > Documentinstellingen. In deze tutorial zullen we delen naar Dribbble op het web, dus 800×600 is de optimale grootte. Je zult merken dat de afmetingen van de eerder gemaakte opname te groot zijn. Om de schaal van de opname aan te passen, selecteert u de clip en klikt u op de rechterbovenhoek van ScreenFlow.
Verschaal uw clip zodat deze past in de documentgrootte met behulp van de schaalschuifbalk.
Als de opname eenmaal is gemaakt, knipt u het begin en het einde bij door de clip te verslepen (vergeet niet dat we de perfecte lus willen maken!).
Op dit punt is uw video klaar om te worden geëxporteerd, hoewel we u aanraden nog enkele puntjes op de i te zetten. Met ScreenFlow kunt u een vloeiend zoom-effect toevoegen om specifieke details in uw video te benadrukken. Om dit te doen, plaatst u de video scrubber over het punt waar u een zoomeffect wilt toevoegen. Klik vervolgens op de video-actieknop in de rechterbovenhoek van Screenflow en klik op + Action. Selecteer een mooie begin- en eindstand voor de actie met behulp van de schaalregelaars die we eerder hebben gebruikt. Herhaal deze stappen voor het uitzoomeffect.
Opzetten van animaties zoals zoomen door het toevoegen van video-acties.
Pro-tip: wanneer u een GIF deelt op sites zoals Dribbble, moet u er rekening mee houden dat het eerste frame van uw GIF wordt weergegeven als de miniatuur van de post, dus zorg ervoor dat u het visueel interessantste frame gebruikt.
Exporteren vanuit ScreenFlow
Nu onze clip is opgepoetst en geperfectioneerd, is het tijd om te exporteren. Screenflow biedt een voorinstelling om de clip direct als GIF te exporteren, maar we raden aan om deze route te vermijden, omdat je GIF zal eindigen als een zwaar gecomprimeerd groot bestand.
In plaats daarvan zullen we een verliesvrij .mov bestand exporteren. Navigeer naar Bestand > Exporteren > Voorinstelling > Verliesvrij – ProRes met Alpha.
Het inschakelen van bewegingsonscherpte kan uw GIF vaak nog vloeiender laten aanvoelen, vooral met het zoomeffect dat we hebben toegepast.
Blur vs. Geen onscherpte
Optimaliseren met Claquette
Claquette biedt net als Screenflow de mogelijkheid om uw bureaublad geheel of gedeeltelijk op te nemen en deze opnamen bij te snijden, te knippen en te exporteren naar GIF- of video-indelingen. U kunt Claquette kopen in de Mac App Store voor $ 9,99
Claquette’s grootste voordeel ten opzichte van Screenflow is dat het u granulaire controle geeft over uw GIF-kwaliteit en dus een betere bestandsgrootte met verbazingwekkende compressie. Dit stelt u in staat om hoge kwaliteit GIF’s te maken die een optimale bestandsgrootte hebben.
Net zoals we deden in Screenflow, selecteer het scherm dat u gaat opnemen en druk op opnemen in Claquette. Speel de video die u zojuist hebt geëxporteerd af in QuickTime en druk op CMD + 1 om de video op ware grootte af te spelen.
Claquette-opnameconfiguratie.
Wanneer de clip klaar is met afspelen, stopt u de opname om te beginnen met bijsnijden en bijsnijden. Beweeg de schuifregelaar links en rechts van de clip naar het begin en einde van de clip. Wat betreft de grootte van de uitsnede, gebruik de grootte die u ook hebt gekozen voor uw clip in Screenflow: 800 x 600. Verplaats het bijsnijdgebied naar het midden x:0 y:0 en druk op bijsnijden.
Clips bijsnijden en bijsnijden in Claquette.
De juiste balans vinden
Dit zijn drie GIF-kwaliteiten die van grote invloed zijn op de bestandsgrootte:
- Hoeveelheid kleuren
- Hoeveelheid beweging
- Duration
In de meeste gevallen, als uw GIF slechts een van deze kwaliteiten bevat, kunt u de kwaliteit opdrijven. Zorg ervoor dat je de breedte en hoogte op 100% zet en oneindig doorlust. Als uw GIF veel kleuren bevat, raad ik u aan de kleuren op 256 te houden en te bezuinigen op andere aspecten zoals FPS of quantisatie kwaliteit.
Claquette’s export instellingen.
Er is geen echte heilige graal voor deze instellingen, dus bij het delen naar Dribbble (max 8mb) proberen we ze altijd op te schroeven naar de hoogst mogelijke instellingen, dan exporteren en kijken wat we hebben om mee te werken. Blijf dat exporteerproces herhalen totdat je een grootte/kwaliteitsbalans vindt die aan je behoeften voldoet.
Pro-tip: Ook al zegt Dribbble dat de limiet 8mb is, het is eigenlijk 8,3mb. Wanneer je met grote kleurrijke GIFs werkt, zul je er snel achter komen waarom 0.3mb belangrijk is.
Nu je de gids hebt doorgelezen, hopen we dat het je helpt je Framer-animaties om te zetten in de best mogelijke GIFs voor het presenteren van je werk op je portfolio, Dribbble, en elders. We zijn benieuwd wat je maakt, dus tag je post met #MadeWithFramer om kans te maken op een vermelding in onze wekelijkse nieuwsbrief. Veel plezier met het maken!
Bekijk het eindresultaat op Dribbble