Przez lata dostawaliśmy wiele pytań o to, jak tworzymy GIF-y. Uwielbiamy GIF-y, ponieważ łatwo się nimi dzielić, działają we wszystkich przeglądarkach i można je zapętlać! Zgodnie z popularnym zapotrzebowaniem, oto przegląd naszych dwóch ulubionych narzędzi do tworzenia GIF-ów i nasz tok pracy dla każdego z nich.

Nagrywanie ekranu

Istnieje kilka świetnych narzędzi do nagrywania ekranu. Jeśli pracujesz na Macu, możesz użyć Quicktime, który jest całkowicie darmowy. W tym artykule będziemy używać ScreenFlow, który jest płatną aplikacją firmy Telestream.

ScreenFlow jest świetną opcją do nagrywania, ponieważ zawiera potężny edytor, który daje Ci szczegółową kontrolę nad Twoim GIF-em. Po otwarciu ScreenFlow lub kliknięciu przycisku konfiguruj nagrywanie zobaczysz ten ekran.

Po pierwsze, upewnij się, że masz swój prototyp na ekranie. Następnie wybierz wyświetlacz, który będziesz nagrywał i naciśnij czerwony przycisk, aby rozpocząć nagrywanie całego ekranu. W tym poradniku będę nagrywał interakcję wykonaną w programie Framer, więc moje okno podglądu jest ustawione na pełny ekran. Możliwe jest przycięcie nagrania do idealnego rozmiaru później.

Stwórz idealną pętlę

Jedną z rzeczy, do których zawsze dążymy, jest idealnie zapętlony GIF, a dobrym sposobem na wykonanie tego jest upewnienie się, że ostatnia klatka twojego GIF-a jest dokładnie taka sama jak pierwsza. Zapobiega to przeskakiwaniu, co sprawia, że GIF płynie prawidłowo, gdy jest odtwarzany z powtarzaniem.

Jeśli twoja animacja zawiera kursor myszy i masz pewną rękę, możesz łatwo stworzyć idealną pętlę, pozycjonując kursor myszy ręcznie. Użyj wskazówek wizualnych, aby przypomnieć sobie, gdzie zacząłeś i gdzie musisz skończyć.

W moim przykładzie skorzystałem z animowanego kursora dotykowego, aby uzyskać najlepszy wynik bezpośrednio w rzeczywistym prototypie, który będę nagrywał. Pobierz ten przykład, aby zobaczyć, jak można dodać animowany kursor dotykowy do własnych prototypów za pomocą programu Framer.

Dodaj efekty, aby je urozmaicić

Teraz, gdy dokonałeś nagrania w ScreenFlow, możesz chcieć je dostosować, aby skupić się na tym, co chcesz przedstawić w GIF-ie. Aby to zrobić, przejdź do Plik > Ustawienia dokumentu. W tym tutorialu będziemy udostępniać na Dribbble w sieci, więc 800×600 jest optymalnym rozmiarem. Zauważysz, że wymiary nagrania wykonanego wcześniej są zbyt duże. Aby zmienić skalę nagrania, zaznacz klip i kliknij w prawym górnym rogu ekranu ScreenFlow.

Gdy Twoje nagranie jest już na miejscu, upewnij się, że przyciąłeś początek i koniec, przeciągając klip (pamiętaj, chcemy stworzyć idealną pętlę!).

W tym momencie Twój film jest gotowy do wyeksportowania w niezmienionej postaci, choć zalecamy dodanie kilku elementów wykończeniowych. ScreenFlow umożliwia dodanie efektu płynnego powiększania, aby podkreślić określone szczegóły w Twoim filmie. Aby to zrobić, umieść scrubber wideo nad punktem, w którym chcesz dodać efekt powiększenia. Następnie kliknij przycisk akcji wideo w prawym górnym rogu Screenflow i kliknij + Action. Wybierz ładny stan początkowy i końcowy dla akcji, używając kontrolek skali, których użyliśmy wcześniej. Upewnij się, że powtórzyłeś te kroki dla efektu pomniejszenia.

Pro-tip: Kiedy udostępniasz GIF na stronach takich jak Dribbble, pamiętaj, że pierwsza klatka Twojego GIFa będzie wyświetlana jako miniatura postu, więc upewnij się, że używasz najbardziej interesującej wizualnie klatki.

Eksportowanie ze ScreenFlow

Teraz, gdy nasz klip jest wypolerowany i dopracowany, nadszedł czas na eksport. Screenflow oferuje wstępne ustawienie, aby wyeksportować klip bezpośrednio jako GIF, ale sugerujemy unikanie tej drogi, ponieważ twój GIF skończy jako mocno skompresowany duży plik.

Zamiast tego wyeksportujemy bezstratny plik .mov. Przejdź do Plik > Eksport > Preset > Bezstratny – ProRes z Alpha.

Włączenie rozmycia ruchu może często sprawić, że Twój GIF będzie jeszcze bardziej płynny, zwłaszcza z zastosowanym przez nas efektem powiększania.

Optimizing with Claquette

Claquette podobnie jak Screenflow oferuje możliwość nagrywania całego pulpitu lub jego dowolnej części oraz przycinania, wycinania i eksportowania tych nagrań do formatów GIF lub wideo. Możesz kupić Claquette w Mac App Store za $9.99

Największą zaletą Claquette w stosunku do Screenflow jest to, że daje kontrolę nad jakością GIF, a tym samym lepszy rozmiar pliku z niesamowitą kompresją. Pozwoli Ci to na tworzenie wysokiej jakości GIF-ów, które mają optymalny rozmiar pliku.

Tak jak w Screenflow, wybierz wyświetlacz, który będziesz nagrywać i nagraj w Claquette. Odtwórz wyeksportowane wideo w QuickTime i naciśnij CMD + 1, aby odtworzyć wideo w jego rzeczywistym rozmiarze.

Gdy klip zostanie odtworzony, zatrzymaj nagranie, aby rozpocząć kadrowanie i przycinanie. Przesuń suwak po lewej i prawej stronie klipu, aby określić początek i koniec klipu. Jeśli chodzi o rozmiar kadrowania, użyj rozmiaru, który również wybrałeś dla swojego klipu w Screenflow: 800 x 600. Przesuń obszar kadrowania na środek x:0 y:0 i naciśnij przycisk kadrowania.

Znalezienie właściwej równowagi

Oto trzy cechy GIF-a, które mają duży wpływ na rozmiar pliku:

• Ilość kolorów
• Ilość ruchu
• Czas trwania

W większości przypadków, jeśli twój GIF zawiera tylko jedną z tych cech, możesz podnieść jakość. Upewnij się, że ustawiłeś szerokość i wysokość na 100% i zapętlasz na zawsze. Jeśli twój GIF zawiera dużo kolorów, zdecydowanie zalecam utrzymanie kolorów na poziomie 256 i zmniejszenie innych aspektów, takich jak FPS lub jakość kwantyzacji.

Nie ma prawdziwego Świętego Graala dla tych ustawień, więc kiedy udostępniamy zdjęcia na Dribbble (max 8mb) zawsze staramy się ustawić je na najwyższe możliwe ustawienia, a następnie wyeksportować i zobaczyć, z czym mamy do czynienia. Powtarzaj ten proces eksportowania, aż znajdziesz równowagę między rozmiarem a jakością, która pasuje do twoich potrzeb.

Pro-tip: Nawet jeśli Dribbble mówi, że limit rozmiaru to 8mb, to w rzeczywistości jest to 8,3mb. Kiedy pracujesz z dużymi kolorowymi gifami, szybko przekonasz się, dlaczego 0,3mb ma znaczenie.

Po przeczytaniu tego przewodnika mamy nadzieję, że pomoże ci on przekształcić animacje z Framera w najlepsze możliwe GIF-y do prezentacji twojej pracy w portfolio, na Dribbble i w innych miejscach. Nie możemy się doczekać, aby zobaczyć, co stworzysz, więc pamiętaj, aby oznaczyć swój post #MadeWithFramer, aby mieć szansę na pojawienie się w naszym cotygodniowym newsletterze. Szczęśliwego tworzenia!

Sprawdź efekt końcowy na Dribbble

.