V průběhu let jsme dostávali spoustu dotazů, jak vytvářet GIFy. GIFy máme rádi, protože se snadno sdílejí, fungují ve všech prohlížečích a můžete z nich vytvořit smyčku! Na základě poptávky vám přinášíme přehled našich dvou oblíbených nástrojů pro tvorbu GIFů a náš pracovní postup pro každý z nich.

Nahrávání obrazovky

Existuje několik skvělých nástrojů pro nahrávání obrazovky. Pokud používáte Mac, můžete použít Quicktime, který je zcela zdarma. V tomto článku budeme používat ScreenFlow, což je placená aplikace od společnosti Telestream.

ScreenFlow je skvělou volbou pro nahrávání, protože obsahuje výkonný editor, který vám dává podrobnou kontrolu nad vaším GIFem. Když otevřete ScreenFlow nebo stisknete tlačítko konfigurovat nahrávání, zobrazí se tato obrazovka.

Nejprve se ujistěte, že máte na obrazovce prototyp. Poté vyberte displej, který budete nahrávat, a stisknutím červeného tlačítka spusťte nahrávání celé obrazovky. V tomto tutoriálu budu nahrávat interakci vytvořenou v programu Framer, takže mé okno náhledu je nastaveno na celou obrazovku. Později je možné záznam oříznout na ideální velikost.

Vytvořte dokonalou smyčku

Jednou z věcí, o kterou se vždy snažíme, je dokonale zacyklený GIF, a dobrým způsobem, jak to provést, je zajistit, aby poslední snímek vašeho GIFu byl přesně stejný jako první snímek. Tím zabráníte přeskakování, díky čemuž pak GIF při opakovaném přehrávání správně plyne.

Pokud vaše animace obsahuje kurzor myši a máte pevnou ruku, můžete snadno vytvořit dokonalou smyčku ručním umístěním kurzoru myši. Pomocí vizuálních signálů si připomeňte, kde jste začali a kde musíte skončit.

V mém příkladu jsem pro nejlepší výsledek využil animovaný dotykový kurzor přímo v rámci skutečného prototypu, který budu nahrávat. Stáhněte si tento příklad a podívejte se, jak můžete přidat animovaný dotykový kurzor do vlastních prototypů pomocí Frameru.

Přidání efektů pro ozvláštnění

Teď, když jste pořídili záznam v aplikaci ScreenFlow, můžete jej upravit tak, aby se zaměřil na to, co chcete v GIFu zobrazit. Za tímto účelem přejděte do Soubor > Nastavení dokumentu. V tomto návodu budeme sdílet na Dribbble na webu, takže optimální velikost je 800×600. Všimněte si, že rozměry dříve pořízeného záznamu jsou příliš velké. Chcete-li si pohrát s měřítkem záznamu, vyberte klip a klikněte na pravý horní roh aplikace ScreenFlow.

Jakmile je záznam na svém místě, nezapomeňte oříznout začátek a konec přetažením klipu (nezapomeňte, že chceme vytvořit dokonalou smyčku!).

V tuto chvíli je vaše video připraveno k exportu tak, jak je, i když bychom doporučovali přidat několik dokončovacích úprav. ScreenFlow umožňuje přidat efekt plynulého zvětšení, který zvýrazní konkrétní detaily ve videu. Chcete-li tak učinit, umístěte scrubber videa nad bod, kam chcete přidat efekt přiblížení. Poté klikněte na tlačítko akce videa v pravém horním rohu ScreenFlow a klikněte na + Action. Vyberte pěkný počáteční a koncový stav akce pomocí ovládacích prvků měřítka, které jsme použili dříve. Nezapomeňte tyto kroky zopakovat pro efekt zvětšení.

Pro-tip: Při sdílení GIFu na webech, jako je Dribbble, mějte na paměti, že první snímek vašeho GIFu bude zobrazen jako miniatura příspěvku, takže nezapomeňte použít vizuálně nejzajímavější snímek.

Export ze ScreenFlow

Teď, když je náš klip vypilovaný a zdokonalený, je čas na export. ScreenFlow nabízí předvolbu pro export klipu přímo jako GIF, ačkoli doporučujeme se této cestě vyhnout, protože váš GIF skončí jako silně komprimovaný velký soubor.

Na místo toho budeme exportovat bezeztrátový soubor .mov. Přejděte na Soubor > Export > Předvolba > Bezztrátový – ProRes s Alfou.

Zapnutím rozostření pohybu může váš GIF často působit ještě plynuleji, zejména s efektem zvětšení, který jsme použili.

Optimalizace pomocí Claquette

Claquette stejně jako Screenflow nabízí možnost nahrávat celou plochu nebo její libovolnou část a tyto nahrávky stříhat, řezat a exportovat do formátů GIF nebo videa. Claquette si můžete zakoupit v Mac App Store za 9,99 USD

Největší výhodou Claquette oproti Screenflow je, že vám poskytuje granulární kontrolu nad kvalitou GIFu a tím i lepší velikost souboru s úžasnou kompresí. To vám umožní vytvářet vysoce kvalitní GIFy, které mají optimální velikost souboru.

Stejně jako jsme to dělali ve Screenflow, vyberte v Claquette displej, který budete nahrávat, a stiskněte tlačítko nahrávání. Přehrajte právě exportované video v QuickTime a stiskněte CMD + 1, aby se video přehrálo ve své skutečné velikosti.

Když se klip přehraje, zastavte nahrávání a začněte jej ořezávat a stříhat. Posuňte posuvník vlevo a vpravo od klipu na začátek a konec klipu. Pokud jde o velikost oříznutí, použijte velikost, kterou jste pro klip zvolili také v aplikaci Screenflow: 800 x 600. Přesuňte oblast ořezu na střed x:0 y:0 a stiskněte tlačítko oříznout.

Nalezení správné rovnováhy

Tady jsou tři vlastnosti GIFu, které mají velký vliv na velikost souboru:

• Množství barev
• Množství pohybu
• Délka

Ve většině případů, pokud váš GIF obsahuje pouze jednu z těchto vlastností, můžete kvalitu zvýšit. Ujistěte se, že je šířka a výška nastavena na 100 % a že smyčka trvá věčně. Pokud váš GIF obsahuje hodně barev, důrazně doporučuji ponechat barvy na 256 a snížit ostatní aspekty, jako je FPS nebo kvalita kvantizace.

Pro tato nastavení neexistuje žádný skutečný svatý grál, takže při sdílení na Dribbble (max. 8 MB) se je vždy snažíme vytočit na nejvyšší možné nastavení, pak vyexportujeme a uvidíme, s čím budeme pracovat. Tento proces exportu opakujte, dokud nenajdete rovnováhu mezi velikostí a kvalitou, která vyhovuje vašim potřebám.

Pro-tip: I když Dribbble uvádí limit velikosti 8 MB, ve skutečnosti je to 8,3 MB. Při práci s velkými barevnými gify rychle zjistíte, proč je 0,3 MB důležité.

Teď, když jste si přečetli tuto příručku, doufáme, že vám pomůže proměnit vaše animace ve Frameru v co nejlepší GIFy pro prezentaci vaší práce ve vašem portfoliu, na Dribbble a jinde. Nemůžeme se dočkat, až uvidíme, co vytvoříte, takže nezapomeňte svůj příspěvek označit #MadeWithFramer, abyste měli šanci být uvedeni v našem týdenním zpravodaji. Šťastnou tvorbu!

Podívejte se na konečný výsledek na Dribbble

.