Jakiś czas temu wrzucałam na Instagrama i Fanpage gifa z animacją tekstu. Posypały się wiadomości jak to zrobiłam i czy mogę podpowiedzieć, gdzie znaleźć tutoriale na ten temat. A że sama animacja zajmuje mi około 15 minut, to stwierdziłam, że w sumie mogę Wam to po prostu pokazać! Bo w gruncie rzeczy to szalenie prosta rzecz.
Instrukcję znajdziecie też w formie filmu na kanale, dokładnie tu: https://www.youtube.com/watch?v=_alOG08i0g8&t=.
A jeśli wolicie wersję tekstową, to lecimy z tematem.
Animacja ręcznie kreślonych liter
No to zacznijmy. Najpierw musimy stworzyć napis, który chcemy poruszyć. Wystarczy czysta kartka i ołówek, ale dla lepszego efektu polecam jakiś mazak/marker/brushpen. Uzyskacie w ten sposób większy kontrast liter do tła.
Kiedy macie już napis, czas na zrobienie dwóch kolejnych wersji. W moim przykładzie nie różnią się bardzo od pierwowzoru. Mają tę samą wysokość, a litery leżą mniej więcej w tym samym miejscu. Różnice pojawiają się głównie w grubości liter i ich kształcie – kontury też nie są idealnie równe.
Żeby pomóc sobie w kreśleniu podobnych tekstów, możecie wspomóc się kartką w kratkę, kropki albo po prostu kalką techniczną.
Trzy wersje napisu wynikają z faktu, że będzie to animacja poklatkowa, która polega na odtworzeniu sekwencji zdjęć, odrobinę różniących się między sobą. To właśnie te drobne zmiany, puszczone w krótkim czasie, oddają wrażenie ruchu. Im więcej klatek (pojedynczych obrazów) i mniejsze różnice między nimi, tym wrażenie ruchu będzie płynniejsze. Ja celowo chciałam uzyskać lekko pokraczny, niechlujny efekt, stąd tylko trzy klatki. A więc i trzy napisy.
Praca w Photoshopie
A kiedy mamy już gotowe napisy, czas przerzucić je do programu. Jak to zrobić? Albo przez zeskanowanie, albo dużo wygodniej i szybciej – po prostu robiąc zdjęcie. Warto zadbać o dobrą jakość zdjęcia – odpowiednio jasne światło, jednolite tło (mi w tym pomaga aplikacja Snapseed lub VSCO). Zdjęcie przerzucamy do komputera, a następnie otwieramy je w programie Photoshop (na moich screenach widzicie wersję CC).
Jeżeli zrobiliście jedno zdjęcie trzech napisów, będziecie mieć jedną warstwę, którą w następnej kolejności musimy rozdzielić na trzy osobne. W panelu warstw (otworzymy go klikając F7 bądź odnajdując w panelu Okno-Warstwy) możemy zrobić to kopiując trzykrotnie warstwę z napisami (klikając prawym przyciskiem myszy na warstwę i wybierając opcję Powiel warstwę lub używając skrótu Ctrl+J).
Następnie z każdej usuwamy dwa napisy – tak by ostatecznie, na każdej znalazł się jeden inny. Mając rozdzielone napisy układamy je w jednym miejscu – przynajmniej mniej więcej. Możemy zrobić to zmieniając lekko przezroczystość warstw – w ten sposób łatwiej dopasujemy położenie wyrazów. Nie zapomnijcie jednak po ułożeniu przywrócić warstwom 100% wartości.
Tworzenie animacji
Ok. Mamy trzy warstwy, czas je poruszyć. W tym celu szukamy w panelu opcji Okno i Oś czasu, otworzymy w ten sposób nowy panel i klikamy w przycisk Utwórz oś czasu wideo, który znajduje się na samym środku. Dzięki temu, nasze trzy warstwy zamienią się teraz w warstwy ułożone na osi czasu.
Fioletowe paski z nazwami warstw to nic innego jak długość wyświetlania warstw w sekwencji. Jak widzicie w tej chwili wszystkie mają tę samą długość i ułożone są jedna pod drugą. Nie uzyskamy w ten sposób wrażenia ruchu, bo po odtworzeniu sekwencji będziemy widzieć warstwę, która jest na samym wierzchu i zasłania całą resztę. Musimy więc ułożyć warstwy w czasie tak, by każda z nich wyświetlała się jako jedyna widoczna.
Żeby to zrobić wystarczy kliknąć i przytrzymać kursor myszy na końcu paska warstwy i przeciągnąć go w lewo – w ten sposób skracamy długość wyświetlania. Jak to robię możecie podejrzeć na wcześniej podlinkowanym filmie. Kiedy skrócimy warstwy, trzeba je jeszcze rozłożyć, by nie zasłaniały się wzajemnie. Żeby to zrobić, klikamy na fioletowy pasek, przytrzymujemy kursor i przesuwamy cały pasek w prawo. Na screenie powyżej zobaczycie jak wygląda taka prosta sekwencja.
W lewym rogu osi czasu macie mały panel opcji – pod zębatką znajdziecie opcje, w których zaznaczcie zapętlanie animacji. A po kliknięciu w przycisk Play Wasza animacja powinna odtwarzać się zapętlona.
Eksport animacji
No dobra. Mamy animację. Teraz trzeba tylko ją jeszcze odpowiednio zapisać. Możecie to zrobić na dwa sposoby – jako video lub jako gifa. Zacznijmy od video. W prawym górnym rogu panelu osi czasu możemy rozwinąć listę dodatkowych opcji. Znajdziemy tam min. Renderuj video, które otworzy nam okno z ustawieniami video właśnie. Możemy spokojnie zostawić domyślnie wybrane opcje i po kliknięciu Renderuj, będziemy mieć gotowy film.
Dużo częściej jednak korzysta się teraz z gifów, więc aby zapisać taką animację w tym formacie, szukamy opcji Plik, Eksportuj, a następnie Zapisz dla Internetu jako (Starsza opcja). Otworzy nam to kolejne okno, w którym najważniejsze jest by wybrać format pliku jako GIF i ilość kolorów na możliwie największą (256). Na dole, po prawej strony mamy również opcję zapętlenia, którą musimy zaznaczyć, by animacja była faktycznie ciągła. Klikamy Gotowe i… gotowe!
Podsumowując
Jak widzicie – zrobienie takiej animacji jest szalenie proste. I przede wszystkim nie musi ograniczać się do animacji tekstów. Podobne animowane gify przydadzą się do animacji zdjęć, zrobienia automatycznie przewijanej prezentacji czy jako dodatkowy element dekoracyjny w mailingu. Te ostatnie są coraz bardziej popularne i zobaczycie je w formie ruchomych CTA (przycisków Call to Action, jak np. Kup teraz czy Przejdź na stronę) albo drobnych zdobień, które po prostu przyciągają uwagę do najważniejszych elementów.
Dajcie znać w komentarzach czy bawiliście się już prostymi animacjami poklatkowymi. A może planujecie stworzyć swojego pierwszego gifa? Koniecznie podzielcie się efektami!
