Under årens lopp har vi fått många frågor om hur vi skapar GIF-filer. Vi älskar GIF:er eftersom de är lätta att dela, de fungerar i alla webbläsare och du kan göra dem loop! På populär begäran kommer här en översikt över våra två favoritverktyg för GIF-skapande och vårt arbetsflöde för vart och ett av dem.
Inspelning av din skärm
Det finns några bra verktyg för skärminspelning. Om du använder Mac kan du använda Quicktime, som är helt gratis. I den här artikeln kommer vi att använda ScreenFlow, som är en betalapp från Telestream.
ScreenFlow är ett bra alternativ för inspelning eftersom det innehåller en kraftfull redigerare som ger dig detaljerad kontroll över din GIF. När du öppnar ScreenFlow eller trycker på konfigurera inspelning ser du den här skärmen.
Konfiguration av inspelning med ScreenFlow.
Först ska du se till att du har din prototyp på skärmen. Välj sedan den skärm du ska spela in och tryck på den röda knappen för att börja spela in hela skärmen. I den här handledningen kommer jag att spela in en interaktion som gjorts i Framer, så mitt förhandsgranskningsfönster är inställt på helskärm. Det är möjligt att beskära inspelningen till den perfekta storleken senare.
Skapa en perfekt slinga
En sak som vi alltid strävar efter är en perfekt slingande GIF, och ett bra sätt att utföra detta är att se till att den sista bilden i din GIF är exakt densamma som den första bilden. Detta förhindrar hoppighet, vilket sedan gör att GIF:en flyter på rätt sätt när den spelas upp på repeat.
Om din animation innehåller en muspekare och du har en stadig hand kan du enkelt skapa en perfekt slinga genom att placera muspekaren för hand. Använd visuella ledtrådar för att påminna dig själv om var du började och var du måste sluta.
I mitt exempel har jag använt mig av en animerad pekmarkör för att få det bästa resultatet direkt i den faktiska prototypen som jag ska spela in. Ladda ner det här exemplet för att se hur du kan lägga till en animerad pekmarkör i dina egna prototyper med hjälp av Framer.
Aktiva och inaktiva tillstånd för pekmarkören.
Lägg till effekter för att krydda det hela
Nu när du har gjort din inspelning i ScreenFlow kanske du vill justera den så att den fokuserar på det du vill visa i GIF:en. För att göra detta går du till Fil > Dokumentinställningar. I den här handledningen kommer vi att dela till Dribbble on Web, så 800×600 är den optimala storleken. Du kommer att märka att dimensionerna för inspelningen som gjordes tidigare är för stora. Om du vill mixa med skalan på inspelningen markerar du klippet och klickar på den övre högra delen av ScreenFlow.
Skalera klippet så att det passar dokumentstorleken med hjälp av skalreglaget.
När inspelningen är på plats ser du till att trimma början och slutet genom att dra i klippet (kom ihåg att vi vill skapa den perfekta slingan!).
När det här är klart är videon redo att exporteras som den är, även om vi rekommenderar att du lägger till några finesser. Med ScreenFlow kan du lägga till en jämn zoomningseffekt för att lyfta fram specifika detaljer i din video. För att göra detta placerar du videoskrubben över den punkt där du vill lägga till en zoomeffekt. Klicka sedan på videofunktionsknappen i det övre högra hörnet av Screenflow och klicka på + Action. Välj ett trevligt start- och sluttillstånd för åtgärden med hjälp av skalkontrollerna som vi använde tidigare. Se till att upprepa dessa steg för utzoomningseffekten.
Definiera animationer som zoomning genom att lägga till videoåtgärder.
Pro-tips: När du delar en GIF på webbplatser som Dribbble, tänk på att den första bilden av din GIF kommer att visas som miniatyrbild för inlägget, så se till att använda den visuellt mest intressanta bilden.
Exportera från ScreenFlow
Nu när vårt klipp är polerat och fulländat är det dags att exportera. Screenflow erbjuder en förinställning för att exportera klippet direkt som en GIF, men vi föreslår att du undviker denna väg eftersom din GIF kommer att sluta som en kraftigt komprimerad stor fil.
Istället kommer vi att exportera en förlustfri .mov-fil. Navigera till File > Export > Preset > Lossless – ProRes with Alpha.
Aktivering av rörelseoskärpa kan ofta få din GIF att kännas ännu smidigare, särskilt med zoomningseffekten vi tillämpade.
Blur vs. Ingen oskärpa
Optimering med Claquette
Claquette erbjuder precis som Screenflow möjligheten att spela in hela eller delar av skrivbordet och trimma, klippa och exportera dessa inspelningar till GIF- eller videoformat. Du kan köpa Claquette i Mac App Store för 9,99 dollar
Claquettes största fördel jämfört med Screenflow är att den ger dig granulär kontroll över din GIF-kvalitet och därmed en bättre filstorlek med fantastisk komprimering. Detta gör att du kan skapa högkvalitativa GIF-filer som har en optimal filstorlek.
Samma som vi gjorde i Screenflow väljer du skärmen du ska spela in och trycker på spela in i Claquette. Spela upp videon du just exporterat i QuickTime och tryck CMD + 1 för att spela upp videon i dess faktiska storlek.
Konfiguration för inspelning i Claquette.
När klippet är färdigt att spelas upp, stoppar du inspelningen för att börja beskära och trimma det. Flytta reglaget till vänster och höger om klippet till början och slutet av klippet. När det gäller beskärningsstorlek använder du den storlek som du också valde för klippet i Screenflow: 800 x 600. Flytta beskärningsområdet till mitten x:0 y:0 och tryck på beskärning.
Trimning och beskärning av klipp i Claquette.
Finns den rätta balansen
Här är tre GIF-kvaliteter som har stor inverkan på filstorleken:
- Mängden färger
- Mängden rörelser
- Duration
I de flesta fall, om din GIF endast innehåller en av dessa egenskaper kan du höja kvaliteten. Se till att ställa in bredden och höjden till 100 % och slinga för evigt. När din GIF innehåller många färger rekommenderar jag starkt att du håller färgerna på 256 och skär ner på andra aspekter som FPS eller kvantiseringskvalitet.
Claquettes exportinställningar.
Det finns ingen riktig helig graal för dessa inställningar, så när vi delar till Dribbble (max 8 mb) försöker vi alltid att skruva upp dem till högsta möjliga inställningar, sedan exportera och se vad vi har att arbeta med. Fortsätt upprepa denna exportprocess tills du hittar en balans mellan storlek och kvalitet som passar dina behov.
Pro-tips: Även om Dribbble säger att storleksgränsen är 8mb, är den i själva verket 8,3mb. När du arbetar med stora färgglada gifs kommer du snabbt att upptäcka varför 0,3mb spelar roll.
Nu när du har läst igenom guiden hoppas vi att den hjälper dig att förvandla dina Framer-animationer till bästa möjliga GIF:er för att presentera ditt arbete i din portfölj, på Dribbble och på andra ställen. Vi kan inte vänta med att se vad du skapar, så se till att tagga ditt inlägg med #MadeWithFramer för att ha en chans att bli presenterad i vårt veckobrev. Lycka till med skapandet!
Kolla in slutresultatet på Dribbble