Animacja + Hand lettering, czyli GIF w Photoshopie

Animacja + Hand lettering, czyli GIF w Photoshopie

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.

animowany napis w photoshopie

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 poklatkowa w photoshopie

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ą.

brush lettering instrukcja

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.

animacja liter

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).

animacja w photoshopie
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).

gif w photoshopie
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.

animacja gif w photoshopie

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.

animacja w photoshopie
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.

sekwencja obrazów w photoshopie
Ż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 w photoshopie

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.

photoshop animowany gif
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!

animowany napis w photoshopie

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!

kanal na youtube