Projektuj Animacje UI z Lottie Files i After Effects: Kanał Alpha dla kompozycji
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.
Trzy rzeczy w tej lekcji zrobimy.
Pierwsza z nich to prędkość naszego bohatera, druga kanał
alfa i trzecia, czyli to co o czym wspomniałem już wcześniej.
Fajnie by było, żeby z tego jego pistoletu pojawił się jakiś wystrzał,
który następnie zmodyfikuje się nam w ten portal i myślę, że możemy zacząć
od prędkości naszego bohatera.
Zobaczmy.
Zwróćmy uwagę na to, że on tutaj rusza się dosyć jednostajnie.
Generalnie mógłby też troszeczkę szybciej przelecieć z jednego portalu do drugiego.
Myślę, że wyglądałoby to wtedy lepiej.
Ale docelowo chciałbym, żeby tą animacją prędkością tej animacji sterował
użytkownik, ponieważ dodamy tutaj taką interakcji,
która sprawi, że ta animacja będzie postępować po scroll w momencie
kiedy użytkownik będzie skanował.
Stroną to animacja będzie się odtwarzać.
Kiedy użytkownik zatrzyma scroll, animacja też się zatrzyma.
Im szybciej użytkownik będzie królował, tym ona szybciej będzie postępować.
OK, ale to zostawimy na później.
Naturalnie więc to, że działa to dosyć długo,
dosyć długo przechodzi ten nasz bohater z jednego portalu do drugiego.
Tym bym się nie przejmował.
Raczej tutaj popracował bym.
z tym, żeby zlikwidować ten ruch jako taki jednostajny.
Myślę, że byłoby fajnie, gdyby on tutaj szybko wyleciał.
Tutaj troszeczkę zwolnił i następnie przyspieszył.
Już przy samym końcu.
Jak możemy to zrobić?
Ustawimy tutaj mniej więcej na środku tego ruchu klatkę kluczową dla pozycji.
OK, to co tutaj warto zrobić to.
Wybierzemy sobie jeszcze Convert Vertex Tool i dam sobie wąsy, żeby ten ruch był
taki bardziej, żeby ta ścieżka ruchu była właśnie taka bardziej zrobiona.
W porządku.
I teraz tutaj do tej klatki dodamy sobie i using czyli function F9,
ale przejdziemy do Graph Editor.
Możemy zauważyć, że w tym momencie stworzyliśmy coś takiego, że tutaj ten
nasz bohater się na chwilę zatrzyma.
Zwróćmy uwagę, jak to działa teraz.
Nie, nie o to mi chodziło.
Przede wszystkim tutaj chciałbym, żeby nasz bohater szybko wyleciał
i szybko wleciał do tego portalu.
Czyli w ten sposób i tu zwalnia do zatrzymania i tu znowu przyśpiesza.
Ale nie chciałbym, żeby on tutaj zwolnił.
Na pewno ten ruch powinien być mniej więcej taki,
ale nie do całkowitego zatrzymania.
Co możemy z tym zrobić?
Podnieśmy te węzły.
Na przykład w ten sposób.
I teraz żadnego zatrzymania tu nie będzie.
Nasz bohater po prostu zwolni.
I przyspiesza.
Możemy jeszcze te węzły sobie odpuścić, troszkę by bardziej zwolnił,
ale nie zatrzymał się.
Bardzo fajnie. Teraz wygląda to lepiej i wyraźniej.
On się tutaj nie zatrzymuje, on dalej cały czas leci.
Tylko że po prostu w tym miejscu troszeczkę zwalnia, ale nie ma już
tego całkowitego zatrzymania się.
Jeżeli te węzły przeniesiemy tutaj na sam dół, to oczywiście on się zatrzyma.
Ale nie o to nam chodzi wieszczy komandos.
I teraz wygląda to lepiej. Super!
To jedna z rzeczy załatwiona. Teraz druga.
Stwórzmy sobie maskę dla naszego bohatera.
Kanał Alfa, który będzie go zakrywał tak aby nasz bohater faktycznie wyglądał jakby
wylatywał z tego portalu i wylatywał tutaj.
Jak to wygląda?
Dokładnie wiemy co trzeba robić.
Wybierzmy sobie Layer New Shape Layer i stworzymy sobie maskę.
Za pomocą narzędzia Pen Tool dopasujemy jej kształt mniej więcej
do kształtu tych portali, czyli tutaj.
Tutaj w tym miejscu postawimy sobie kolejny węzeł.
Ciach.
Ciach.
Ciach i zamykamy.
Zamykamy ścieżkę.
Zmieńmy kolor.
Może taki?
OK, tutaj może sobie troszeczkę poprawimy.
W porządku.
I nazwiemy to.
Gay.
Mask.
Obie te warstwy myślę, że dobrze by było, gdyby miały ten sam kolor np.
czerwony.
Teraz możemy sobie tutaj przełączyć się na kanał Alpha Track Med i ten kanał alpha.
Właśnie zapożyczył sobie z tej maski.
Więc zobaczmy jak teraz działa nasz bohater.
O właśnie.
Super!
Tutaj może poprawimy troszkę tę maskę.
Przejdźmy do.
Więzów Węzłów wektorowych to do kształtu ok.
A.
Bardzo fajnie.
I teraz kolejna rzecz, nad którą chciałbym tutaj popracować,
czyli ten wystrzał, który będzie, który wygeneruje nam ten drugi portal.
Czyli w tym miejscu chciałbym, żeby nasz bohater jakoś wystrzelił z tego swojego
pistoletu Q i ten pocisk przelatuje sobie tu i bach tworzy nam portal.
Jak to możemy zrobić?
Stworzymy sobie oczywiście nową warstwę kształtu Shape Layer i może ten wystrzał
niech następuje tutaj, w tym miejscu.
Byłoby też fajnie, gdyby nasz bohater widział i patrzył, gdzie strzela.
Więc możemy jeszcze przejść do naszego naszego bohatera tutaj.
A następnie weźmiemy sobie wszystkie warstwy, które
odpowiadają za głowę naszego bohatera.
OK.
Wybierzmy prawy klawisz myszy.
Następnie tutaj na dole wybieramy plikom pause.
A może olać Blues Competition?
A kompozycję nazwiemy sobie Head.
OK i Anchor Point ustawimy dokładnie tu i wybierzmy R na klawiaturze.
I np.
tutaj niech nasz bohater spojrzy w tę stronę troszeczkę.
Czyli fajnie by było, gdyby on tutaj patrzył gdzie strzela.
I tutaj Może niech tą głowę obróci sobie w tę stronę.
I tutaj koniecznie F9.
No właśnie, może jeszcze zróbmy tak.
Wróćmy naszej kompozycji.
Teraz wygląda to znacznie, znacznie lepiej.
Więc tutaj nasz bohater będzie strzelał.
Narysujemy sobie pętle i narysujemy sobie właśnie tutaj
jakąś formę takiego wystrzału.
Tu. To.
Dosyć prosty wektorowy kształt.
OK.
Możemy sobie jeszcze popracować nad tym jak to ma wyglądać.
Np. w ten sposób.
Tutaj myślę, że fajnie by było, gdybyśmy przyjęli tą warstwę, czyli alt albo option
na maku i lewy lewy nawias kwadratowy.
I następnie przechodzimy do PAF i animuje tą ścieżkę.
Tutaj np.
myślę, że ten pocisk powinien przelecieć.
Oczywiście on powinien troszkę inaczej wyglądać.
On powinien dolecieć.
Tu.
OK.
Tylko powinien wyglądać zupełnie inaczej.
Powinien troszeczkę się tutaj.
przekształcić.
On nie musi być prosty.
Może być właśnie taki pokrzywdzony, bo to jest pocisk, taki laserowy.
Natomiast ten sam kształt.
On powinien mieć już tutaj.
Tylko inną pozycję.
Tutaj możemy już tą warstwę uciąć czyli alt albo na maku i prawne jest kwadratowy.
Bardzo fajnie.
Ot, stwórzmy sobie jeszcze raz całość tutaj wybierzmy fit tak aby abyśmy
widzieli całą całą kompozycję i spacja.
Czyli mamy troszeczkę zamiast takiej wodnej spluwy pistolet na wodę,
coś w rodzaju takiego Portal gun.
OK, wygląda to dobrze.
Koniecznie, koniecznie zapiszmy zmiany tutaj jeszcze w kompozycji Portal musimy
przekonwertować te warstwy na kształty wektorowe, ale to naturalnie
nie jest żaden problem.
Create shape vector layer.
Ciach to usuwamy, co jest nam niepotrzebne.
Tutaj sprawdzimy, czy mamy jakiś merge paf.
Mamy jeden.
Sprawdzimy też, czy mamy jakieś niepotrzebne grupy, ale
wszystko jest w porządku.
OK.
Przechodzimy do.
Kompozycji Portal.
Kompozycję Splash możemy usunąć Portal Portal.
Portal Gay też możemy.
Może nie usunąć, a wyłączyć po prostu.
Natomiast tutaj też musimy sobie przekonwertować te warstwy na Shape.
To usuwamy to co jest niepotrzebne.
Naturalnie musimy tutaj z tą maskę sobie jeszcze raz podpiąć.
A.
Działa bardzo fajnie.
Wszystko bardzo dobrze się wyświetla.
Kompozycję oczywiście musimy odpowiednio nazwać Competition Settings i np.
portal grupy Final.
Wybieram przycisk OK.
Tutaj na samym dole jeszcze dodałem warstwę kształtu, na której umieściłem
prostokąt w jasno fioletowym kolorze jako background i może
nazwijmy sobie właśnie tą warstwę background.
OK, zapisujemy zmiany i widzimy się po przerwie w lekcji następnej, w której
wyeksportowane już gotowe sloty.