Projektuj Animacje UI z Lottie Files i After Effects: Obrót postaci o 180 stopni
w Praktyce
6 godz. 18 min · After Effects · Grafika motion i 3D
Michał WedlechowiczCzego się nauczysz
- Wprowadzenie do Lottie
- Przykłady animacji na stronach
- Wprowadzenie do After Effects
- Import plików do aftera
- Praca z timelinem
- Pierwsze projekty i kompozycje
- Instalacja pluginu Lottie
- Przygotowanie plików w Adobe Illustrator
- Konwertowanie warstw na ścieżki
- Podstawowe właściwości warstw w After Effects
- Transformacje ścieżek na osi czasu
- Dopuszczalne efekty dla Lottie
- Usuwanie błędów i niepotrzebnych warstw
- Graph Editor
- Optymalizacja wagi pliku
- Eksport do formatu dotLottie
- Import do Webflow
- Dodawanie interakcji i animacji
Konfiguracja i poznanie After Effects
Wystartujemy z wprowadzeniem do After Effects. Poznamy podstawowe funkcje programu, przygotujemy i zaciągniemy do niego pierwsze materiały i zaczniemy wprawiać je w ruch pracując na ścieżkach wektorowych. Zainstalujemy plugin Lottie i skonfigurujemy swoje konto w serwisie Lottie FIles, abyśmy mogli eksportować tam nasze animacje i pobierać je w formatach dotLottie albo JSON.
Praktyczny projekt z After Effects
W drugim rozdziale zaczniemy pracować nad docelowym projektem. Poznasz te funkcje Aftera, które będą istotne dla przygotowania plików Lottie. Poznasz też ograniczenia i najczęstsze problemy, oraz dowiesz się jak sobie z nimi radzić i jak optymalizować pliki importowane do After Effects. Dowiesz się też jakich narzędzi wolno używać, a które nie są wspierane przez format Lottie. Jeżeli natomiast pracujesz już z motion designem i znasz bardzo dobrze After Effects, to dzięki temu szkoleniu będziesz wiedział jak wykorzystać swoje umiejętności na zupełnie nowym polu, jakim jest animacja na potrzeby interfejsów.
Dopracowanie projektów i praca z Lottie w Webflow
Ostatni rozdział kursu to dopracowanie projektu w najmniejszych szczegółach i praca ze ścieżkami wektorowymi oraz z ich animacją. Usuniemy niepotrzebne elementy w kompozycjach i zadbamy o optymalizację pliku oraz o jego wagę. Postaramy się, żeby jego waga oscylowała w granicach od kilkudziesięciu do maksymalnie kilkuset kilobajtów, aby nie obciążać strony internetowej. Dodatkowo zaimportujemy nasz Lottie do Webflow, abyśmy mogli zobaczyć jak w praktyce będzie działała nasza animacja i w jakie interakcje możemy z nią wchodzić.
Zaawansowana animacja z Lottie
Jednym z praktycznych projektów jaki stworzymy w trakcie kursu będzie Bardzo zaawansowana animacja postaci oparta na ruchu węzłów wektorowych. Do stworzenia projektu wystarczą nam podstawowe funkcje Aftera. W kursie dowiesz się, że projektując animację pod Lottie nie możemy korzystać z bardziej złożonych narzędzi After Effects, ponieważ mogą nie być one wspierane przez format Lottie czy JSON. Przejdziemy przez listę funkcjonalności, które możemy stosować, a których lepiej unikać, aby mieć pewność, że nasze animacje będą wyświetlać się prawidłowo na wielu różnych platformach.
Dla kogo jest ten kurs?
Materiał szkoleniowy, to zbiór lekcji wideo, poukładanych w odpowiednich rozdziałach i podzielonych na części tematyczne. Został opracowany z myślą o: projektantach graficznych, UI designerach, motion designerach. Wszystkie lekcje przygotowane są tak, aby osoby początkujące mogły nauczyć się podstaw animacji obsługi After Effects. Natomiast osoby posiadające już doświadczenie z animacją dowiedzą się jak wykorzystać swoją wiedzę dla tworzenia animacji i interakcji w dziedzinach związanych z Digital Designem. Kto jeszcze może skorzystać na wiedzy zawartej w tym kursie? Graficy pracujący w zawodzie od lat - doświadczeni graficy będą mogli wykorzystać swoją wiedzę na zupełnie innym polu, jakim jest motion. Dowiedzą się jak działa After Effects, oraz jak eksportować poprawne pliki Lottie, niezawierające błędów. Zyskają nowe perspektywy i umiejętności, które pozwolą im wyróżnić się na konkurencyjnym rynku pracy. Freelancerzy pracujący zdalnie dla dużych agencji reklamowych - dla nich materiał to droga do poznania nowych technik pracy i wykorzystania swojej wiedzy na zupełnie innych polach, co przełożyć się może na otrzymywanie bardziej zróżnicowanych zleceń i lepsze zarobki.
Cześć. Zaczynamy od zaimportowania pliku.
Wybieram Import file.
Wybieram plik Illustratora portal GUI, który widziałeś w lekcji poprzedniej.
Natomiast oczywiście musimy to odpowiednio zaimportować jako
kompozycję z rozmiarami warstw.
Wybieram Open, klikam tutaj i w zasadzie wszystko się zgadza.
Wybierzmy sobie full rozdzielczość 100%.
I to co oczywiście musimy zrobić to pozamieniać wszystko na mapy.
Zaznaczam wszystkie warstwy.
Prawy klawisz myszy na dole Create shape from vector layer ok.
Te warstwy Illustratora w zasadzie nie są mi potrzebne, więc
możemy je śmiało usunąć.
Pozbędziemy się bitmap z naszej animacji.
OK, i teraz sprawdźmy, czy mamy tutaj Match path.
A znalazło się jedno.
OK.
I sprawdźmy też, czy mamy jakieś dodatkowe grupy.
Ale widzę, że jest całkiem czysto.
W porządku, możemy w takim razie zaczynać i od czego zaczynamy?
Przede wszystkim wybierzmy Position Settings i ustawmy sobie background color.
Może na jakiś jasnoszary będzie nam wygodniej.
I chciałbym zacząć od twarzy naszego bohatera, od jego głowy,
więc możemy sobie zaznaczyć tutaj.
Wszystkie warstwy, które odpowiadają za głowę a będzie to np.
Body Health, Head Glass Nos i Mastiff Mask.
I w zasadzie to wszystko.
I przy tych zaznaczonych warstwach klikam na to białe kółeczko tutaj i dzięki temu
pozostałe warstwy, które nie były zaznaczone zostały wyłączone z widoku.
Super!
Będzie nam się oczywiście lepiej pracowało.
Może to na razie sobie też damy tutaj.
Chciałabym, żeby nasz bohater np.
obracał się przez 3 sekundy.
Zaczniemy np. od okularów.
Wybierzmy sobie pas OK.
I. Mamy tutaj 3 ścieżki.
Morze może niech się obraca przez 4 sekundy.
Ustawmy Play Head na drugiej sekundzie i tutaj.
Klikam na to płaczę.
Dzięki temu tutaj mamy klatki kluczowe na środku całego obrotu.
Zaraz zobaczysz o co mi chodzi.
Klikam teraz dwukrotnie na jeden z lewym klawiszem myszy na jeden z węzłów, a
następnie korzystając z tego Baltic Boxa będę tutaj sterował.
Tymi węzłami.
OK.
W czwartej sekundzie w zasadzie zrobimy to samo, tylko w drugą stronę.
Znowu klikam dwukrotnie na jeden z węzłów.
Oczywiście to działa w momencie, kiedy zaznaczone jest kilka węzłów.
W tym przypadku zaznaczone są wszystkie.
OK.
Okulary działają.
Wybierzmy sobie UP.
Zajmijmy się teraz może nosem naszego bohatera.
Wybierzmy Path.
Mamy tutaj do animowania jedną ścieżkę.
Ustawiam Play Head na drugiej sekundzie.
Tutaj tak będzie wyglądał nasz nos w momencie, kiedy postać jest
na środku frontem do nas.
I i teraz przesuwamy się do pierwszej sekundy.
I tutaj ten nosek przesuniemy sobie tu.
Myślę, że warto tutaj nad nim jeszcze troszkę popracować i np.
troszkę niech on bardziej wystaje w ten sposób ok.
O, widzimy, że teraz już wygląda to na całkiem fajny obrót.
Tutaj zrobimy jeszcze coś innego z tym nosem, ale tu oczywiście
w czwartej sekundzie chciałbym, żeby on się obrócił w tę stronę i naturalnie
zaznaczmy wszystkie te węzły i przenieśmy sobie tu.
Coś takiego.
Tutaj widzimy, że ten nos niezbyt dobrze wygląda w tym momencie, prawda?
Więc ja myślę, że na tej tej środkowej pozycji to obrócimy sobie ten nosek.
np. w ten sposób.
OK.
I zobaczmy jak to wygląda teraz, a widzimy, że tutaj.
Niezbyt dobrze to wygląda.
dlatego tą ostatnią klatkę sobie usuniemy.
Przejdziemy do czwartej sekundy i tutaj zrobimy coś takiego.
Zaznaczam wszystkie węzły, klikam dwukrotnie, odwracam, przesuwam tutaj.
OK.
Tutaj troszeczkę ten nos jest za duży, więc zmniejsz go.
Tutaj myślę, że warto go powiększyć.
Tutaj też wygląda dziwnie, więc spróbujmy zrobić coś, żeby wyglądał
na troszkę większy.
OK.
O i teraz całkiem fajnie.
Co dalej?
Może zajmiemy się policzkami mamy tutaj i włosami?
Mamy tutaj warstwę head i tutaj jest troszkę więcej ścieżek.
Jeśli wpiszemy sobie pas, to możemy zauważyć, że jest ich
tutaj raz, dwa, trzy, cztery, pięć.
Ustawmy Play Head na drugiej sekundzie, czyli tutaj, w tym miejscu i
ustawiamy klatki kluczowe dla wszystkich tych ścieżek.
Wybieram na klawiaturze.
I teraz oczywiście musimy przenieść tutaj policzki oraz fryzurę naszego bohatera.
Może zaczniemy od fryzury, bo wydaje mi się, że będzie łatwiej.
Więc zrobimy sobie coś takiego po prostu.
Wydaje mi się, że działa to całkiem fajnie i.
W.
Czwartej sekundzie oczywiście powinno się to.
Odwrócić.
Odpowiednio tutaj.
Bardzo fajnie.
Co tutaj jeszcze mamy? Mamy naturalnie policzki.
Na nich też musimy odpowiednio poprowadzić węzły wektorowe.
Może spłaszczyć to sobie troszeczkę?
I przeniesiemy w ten sposób.
I może zrobimy ogólnie rzecz biorąc coś takiego.
Troszkę tak jak z okularami.
To, że tutaj te policzki troszkę wystają z twarzy naszego bohatera to w zasadzie nie
jest jakiś problem, bo sobie to normalnie smakujemy.
OK, zróbmy coś takiego.
I teraz w tę stronę.
OK.
Bardzo fajnie.
To teraz co robimy z maską?
Najlepiej będzie, jeśli stworzymy nową warstwę kształtu.
Niech to będzie New Shape Layer i na tej nowej warstwie kształtu
punkt odniesienia ustawimy.
Tutaj narysujemy sobie elipsę.
O dokładnie takim samym rozmiarze jak głowa naszego bohatera.
I to będzie head mask.
OK, przełączam się tutaj i ustawię Track Med.
Korzystając z kanału Alpha warstwy Head Mask.
Działa bardzo fajnie.
Mamy tutaj jeszcze brwi, na przykład.
I Browse.
Wpiszmy Path.
Na drugiej sekundzie ustawiamy.
Klatki kluczowe.
A tutaj klikam dwukrotnie na jeden z zaznaczonych węzłów.
Sprawdźmy to sobie i dajmy np. w ten sposób.
I na czwartej sekundzie również. Również.
Może podnieśmy je troszkę?
OK, bardzo fajnie. Co dalej?
Uszy mamy tutaj.
Powinniśmy przynajmniej mieć.
iOS. OK.
Wpisujemy path.
Powinniśmy mieć cztery ścieżki. Tak jest.
Dwie odpowiadają za owal i dwie za tę linię.
Na drugiej sekundzie naturalnie wszędzie ustawiamy pierwsze klatki kluczowe
i tutaj zrobimy coś takiego.
Zaznaczmy sobie to ucho i dajmy je tu.
Następnie zaznaczmy to ucho i troszeczkę jest płaszczyzny, a
następnie przesuniemy sobie w tę stronę.
Coś takiego.
Te uszy jeszcze nie pracują tak, jakbym chciał.
ale zaraz zobaczysz jak powinniśmy to naprawić.
Teraz oczywiście druga strona, czyli to ucho dajemy tutaj.
A tamto dajemy tu i spuszczamy.
Bardzo fajnie.
Zapiszmy zmiany.
Animację zapiszemy jako portal gay animation.
Wybieram save.
I teraz co jest nie tak z tymi uszami?
Dajmy te uszy nad warstwę head.
I.
Widzimy, że teraz to ucho z tej strony wygląda dobrze, ale
wyświetliło nam się też ucho, które powinno być z tyłu głowy, więc.
Teraz działa to dobrze, poza tym, że to ucho, które powinno być z tyłu głowy,
w zasadzie za głową jest też widoczne.
Ja bym zrobił coś takiego.
Zaznaczmy warstwę z uszami.
To jest ta warstwa i rozwijamy ją sobie.
I to co ja chciałbym zrobić, to w każdej z grup animować opacity.
Czyli np. ustawmy się na środku.
Czyli na drugiej sekundzie.
Zaznaczmy sobie.
Te dwie grupy.
Rozwiniemy je sobie i mamy tutaj Transform.
Klikam Stop, włącz na Opacity, a następnie cofam się o jedną klatkę.
I ustawiam zero. 0.
Teraz pojawia się ucho.
W porządku, nie wygląda to jeszcze dobrze, ale sobie z tym poradzimy.
Teraz zaznaczymy sobie kolejne dwie grupy, czyli te odpowiadające za prawe ucho.
I tutaj też ustawimy Play Head na drugiej sekundzie.
Następnie przechodzę do transform. Transform.
Klikam stop przy opacity i przechodzę o jedną klatkę do przodu
i ustawiam opacity na 0.
W porządku.
Teraz to co chciałbym zrobić to skopiować sobie tą warstwę
z uszami, czyli zaznaczam ją.
a następnie wybieram command D i na tej drugiej warstwie muszę odwrócić
te klatki kluczowe odpowiadające za opacity.
Czyli ja się tutaj przybliżę i dla tych dwóch pierwszych grup
przesuniemy klatki gdzie opacity jest ustawione na 0
w prawą stronę, a dla tych grup gdzie opacity
ustawione jest na 0 po prawej stronie przesuniemy te klatki kluczowe na lewo.
OK, zmieniamy warstwę i tą nową warstwę, którą skopiowali przeniesiemy pod
głowę w stosie warstw i zobaczmy teraz.
Teraz wszystko działa tak jak należy.
Bardzo fajnie. Dokładnie o to chodziło.
Co nam jeszcze tutaj zostało?
Została nam jeszcze buzia, no i oczywiście kończyny.
Broń.
Ten pistolet na wodę.
To wszystko zrobimy oczywiście.
Zapiszmy koniecznie zmiany po każdym jakimś większym kroku.
No i teraz.
Mamy jeszcze tą buzię, czyli Mask Shape i tutaj też.
Wybierzmy pas.
Na drugiej sekundzie buzia wygląda w ten sposób, a tutaj ją spłaszczyć.
I przeniesiemy w ten sposób.
Możemy ją troszkę odwrócić, np. tak.
O, bardzo. Fajnie.
I to samo tu.
OK.
Tylko teraz widzimy, że te policzki trzeba by było poprawić, więc ustawmy się na
warstwie head i wybierzmy u policzek. To będzie ten.
I może przenieśmy go jednak bardziej w tę stronę.
A ten policzek bardziej w tę stronę.
I teraz działa to lepiej.
W porządku, wróćmy teraz do ust naszego bohatera.
Czyli mały schab.
Wybierzmy Command D.
I to będzie tak naprawdę maska, czyli Mouse.
Mask.
A tą warstwę usuniemy z Illustratora.
OK, mamy teraz dwie takie warstwy, które animuje się w ten sam sposób.
Dokładnie.
Tylko, że ta górna posłuży nam jako maska dla zębów.
I teraz po prostu robimy coś takiego.
Zęby dołączamy do kanału alfa.
Warstwy miały maskę. O właśnie.
Wybierzmy sobie tutaj małpę.
Wybierzmy sobie teraz warstwę TS i będziemy ją animować.
Czas.
Na drugiej sekundzie.
Ustawiamy pierwsze klatki kluczowe, a tutaj myślę, że możemy to po
prostu przesunąć w ten sposób.
I na czwartej sekundzie zrobimy też coś podobnego.
A.
No i zobaczmy jak obraca się nasza postać.
Bardzo fajnie.
W międzyczasie chciałbym, żeby przez okulary przebiegną ten błysk.
Czyli zaznaczymy sobie warstwę tutaj z tym glass glow.
Następnie ustawimy to mniej więcej tutaj, u góry i w trakcie tego ruchu, czyli
od pierwszej do czwartej sekundy.
Chciałabym, żeby to właśnie przeleciało tak w dół, więc wybieram na klawiaturze,
aby animować pozycję tej warstwy i na czwartej sekundzie niech
to będzie gdzieś tutaj np.
Chociaż tak naprawdę może w tym miejscu.
Coś takiego.
Tylko że widzimy, że tutaj schodzi to troszeczkę
z tych okularów, więc możemy ewentualnie wybrać dodatkowo i sobie
troszeczkę powiększyć tą warstwę.
O.
Bardzo fajnie, więc teraz wybierzemy sobie warstwę Glass, czyli okulary.
Rzucimy ją na ten glow. Nazwiemy ją Mask.
Glass Mask.
I skorzystamy z kanału alpha tej warstwy podpinając do niego warstwę z tym glow.
Bardzo fajnie.
Super to działa.
Ja zapisuje zmiany i teraz ja się wyciszy i zrobię całą resztę.
Pozostałe elementy będę chciał teraz animować dokładnie w ten sam sposób, tak
jak teraz to widziałeś bez żadnych nowości.
Zrobię to dokładnie za pomocą tych samych technik, ale zrobię to w
przyśpieszeniu i ja się wyciszy.
Tak, żeby też Cię nie zanudzać.
Usłyszymy się ponownie za chwilę.
OK, wracam do Ciebie i animacja wygląda w ten sposób.
Myślę, że całkiem fajnie.
Ja tutaj tylko uprościłem ten element broni w tym miejscu, żeby
łatwiej po prostu się go animować.
No i myślę, że całkiem fajnie wygląda i jednocześnie też dobrze pracuje.
To co tutaj jeszcze jest zrobione?
Przede wszystkim żeby ten ruch wyglądał bardziej
naturalnie, to jeszcze zaznaczyłem te pierwsze skrajne klatki kluczowe po
lewej stronie, jak i te końcowe i nadałem im desing tak, żeby nasz bohater zaczął
płynnie się poruszać i żeby płynnie się zatrzymał, więc wygląda to w ten sposób.
Myślę, że całkiem fajnie.
Natomiast sprawę z jego rękoma rozwiązałem w ten sposób, że
mamy tu jedną ścieżkę wektorową, ale w momencie kiedy chciałbym, żeby ona się
schowała za ciało naszego bohatera to po prostu ją
przeciąłem i tą drugą połowę na linii czasu postawiłem pod łożem, tutaj
pod body, pod tą warstwą z body.
Więc wygląda to w ten sposób.
Nie wiem czy jest to idealne rozwiązanie.
Możemy jeszcze ewentualnie spróbować czegoś innego.
Np.
może usuńmy na chwilkę te ręce, które tutaj sobie stworzyliśmy.
Wszystkie ok.
Teraz nasz bohater jest pozbawiony, pozbawiony rąk.
Zacznijmy może z tej strony. Stworzymy sobie.
Nowy Shape Layer.
I damy tutaj.
Taki element.
OK.
Chciałbym, żeby on posiadał oczywiście obrys.
Nie chcę tutaj wypełnienia, więc wybieram brak.
Dodatkowo kolor tego obrysu to oczywiście zapożyczyłem stąd.
Natomiast to co jeszcze warto zrobić to zaokrąglić zakończenia.
Czyli przejdźmy do ustawień.
content.
Przechodzę do Shape, do grupy wybieram Strong i tutaj.
Włączamy Round Cap.
I to jest pierwszy element ręki, który będzie animowany, ale stworzymy sobie
jeszcze tę warstwę wybierając Command D i tutaj wpiszemy sobie PATH pas,
a następnie zaznaczymy ten węzeł i damy go tu.
Dzięki temu nasza ręka jest zbudowana z dwóch warstw.
I teraz spróbujmy to animować. Tak?
Czyli klikamy na Stop Łotrze.
I tutaj.
Druga sekunda.
Tu chciałbym, żeby ta ręka przeszła w to miejsce i może zrobiła coś takiego.
OK, natomiast ten element niech się przeniesie tu i chwyci broń w tym miejscu.
I to samo tu.
Zacznijmy od tego elementu.
To tutaj, to tu.
Ta druga ścieżka powinna wykonać coś takiego.
OK, no i mamy teraz dwie.
Dwie warstwy i możemy je nazwać np.
niech to będzie lewa ręka, czyli wpiszemy sobie.
ARM L, a to będzie arm lp.
No i teraz w zasadzie powinniśmy zrobić troszkę to samo, czyli np.
ten element sobie tutaj wytniemy.
Chociaż może warto tutaj jeszcze zrobić to, co ja zrobiłem wcześniej,
czyli dodamy sobie tutaj i link.
OK I chodzi mi teraz o to, że powinniśmy
przeciąć te dwie warstwy, czyli dupa kuje je i przecinam w ten sposób, a te które są
tutaj niżej w ten sposób i te przeniosę sobie pod warstwę z body naszego bohatera.
Przy czym jest tutaj jeszcze jedna rzecz, którą warto zrobić.
Ten element.
B.
Powinien jeszcze tutaj być troszkę widoczny.
I zniknąć.
I zniknąć np.
gdzieś dopiero w tym miejscu O.
zobaczmy teraz.
Teraz wygląda to znacznie lepiej.
I myślę, że taką samą operację zrobię z drugą ręką, ale to już zrobię
w przerwie między lekcjami.
A teraz zapraszam Cię do lekcji kolejnej.
Do usłyszenia.