Projektuj Animacje UI z Lottie Files i After Effects: Przygotowanie finalnej 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.
Kompozycja z portalem jest zduplikowane.
Mamy dwa takie portale, jeden pojawia się po drugim.
Natomiast chciałbym jeszcze dodać tutaj troszeczkę magii do tego portalu,
bo mało się tutaj dzieje.
Chciałbym, żeby był taki troszeczkę bardziej magiczny,
bardziej taki plastyczny.
Myślę, że możemy to tak nazwać.
Dlatego stworzymy sobie jeszcze jedną kompozycję.
Wybierzmy sobie New Competition.
Niech ona trwa 6 sekund.
Jej rozmiar to np.
800 800.
W porządku, myślę, że wystarczy.
Nazwijmy ją sobie może splash i wybieram przycisk OK.
Tutaj zrobimy coś takiego.
Narysujemy sobie elipsę, przy czym kliknę na nią dwukrotnie
i zobaczmy, że pojawia mi się warstwa kształtu z elipsy o
rozmiarach naszego dokumentu.
Zmieńmy tutaj ten strąk i stworzę sobie jeszcze jedną elipsę tutaj.
W tym miejscu np. taką.
I teraz wybiorą sobie te na klawiaturze, a następnie opacity zmniejszę do około
50 i zablokuję sobie tą warstwę.
Nie jest mi teraz ona potrzebna do niczego.
I to co teraz będę chciał zrobić to ręcznie.
Narysujemy sobie kilka SHAPE ów, stworzymy sobie nową
warstwę kształtu New Shape Layer i np.
narysujemy sobie tutaj coś takiego.
Tu postawię pierwszy węzeł, tutaj postawię drugi i może tutaj kolejny.
Tu kolejny i tutaj jeszcze jeden.
Niech to składa się z kilku węzłów.
Kolor.
Kolor na razie może taki, ale może zrezygnujmy z obrysu.
Wybierajmy, wybierzmy brak, a wybierzemy wypełnienie.
Płaskie, ale nie zielone, tylko jakieś takie bardziej fioletowe.
No ok.
I co teraz zrobimy z tym obiektem? Wybierzmy tutaj.
Wpiszmy tutaj pas.
Dajmy.
stop watch i np.
może przy przy może trzeciej sekundzie, czyli tutaj
będę chciał to w jakiś sposób sobie zmodyfikować.
Czyli np.
możemy sobie to przenieść tu w ten sposób, ale zrobimy sobie coś takiego.
OK. Zobaczmy jak to wygląda.
W porządku.
Nawet w zasadzie możemy tutaj jeszcze zrobić tak, żeby to było
praktycznie niewidoczne.
Przy czym tutaj dodamy sobie F9 i stwórzmy sobie coś takiego.
Może.
OK.
To jest jakby jeden z elementów, który stworzymy, ale.
Stworzymy też jeszcze tutaj kilka, np.
kolejny stworzymy sobie tutaj.
Niech to będzie nowa warstwa kształtu.
Porządku.
I zrobimy mniej więcej to samo.
Ja teraz znowu się wymiotuje i zrobię to na przyspieszeniu, bo jest
to cały czas ten sam proces.
Cały czas korzystam z pen toola.
Zrobię taki splash efekt.
Zrobię go ręcznie po prostu za pomocą wektorów, bo i tak musimy tutaj pracować
na ścieżkach wektorowych, więc robię cały czas to samo.
Tutaj klikniemy na PAF, przeniesiemy się do trzeciej sekundy i
tutaj sobie to wyciągniemy.
Więc ja się teraz wymiotuję na chwilę i słyszymy się za moment.
OK, wracam do Ciebie.
Chciałbym troszeczkę przyspieszyć ten efekt splash, więc może zaznaczmy te
końcowe klatki kluczowe i przenieśmy tutaj bliżej początku, tak żeby to działo
się szybciej, Chociaż wygląda fajniej.
No i teraz to co możemy zrobić to ten pierwszy Shape Layer, który
stworzyliśmy właśnie w ramach takiej jakby stworzenia takiej granicy.
Możemy sobie usunąć, bo w zasadzie nie będzie nam to potrzebne.
OK.
I mamy coś takiego.
Teraz przejdźmy do naszej głównej kompozycji i ten splash
sobie tutaj dodamy. Naturalnie.
OK, musimy to spłaszczyć mniej więcej tak i oczywiście obrócić
tak, żeby to było dopasowane tutaj.
OK, wygląda to całkiem fajnie, ale jeszcze jedna rzecz mnie tutaj martwi.
Mianowicie to oczywiście musi się zmniejszyć, bo jest za duże, więc może
dotkniemy.
Ten splash tutaj zapamiętujemy, do tej warstwy tej kompozycji portal
i teraz powinno to urosnąć razem z nią.
O, bardzo fajnie.
I to samo zrobimy z drugiej strony.
Może to sobie tutaj przekonujemy np.
na Yellow, to sobie kopiujemy, dajmy to tu.
Te dwie kompozycje prze koloruje my sobie może na Pink.
OK, to sobie na razie odetniemy.
Odepnij. OK.
I teraz to musimy sobie.
Przekopiować tu.
Obudźmy sobie w ten sposób.
Dajmy to tu.
OK?
I zapamiętujemy sobie do tego drugiego portalu tak, żeby to się
zaskakiwało razem z nim.
Bardzo fajnie.
I teraz, kiedy ma się pojawić ten drugi portal, chciałbym, żeby nasz bohater
wystrzelił z tej swojej, z tego swojego wodnego pistoletu jakiś
pocisk, z którego właśnie pojawi się ten portal.
Chciałbym, żeby ten jego pistolet pełnił formę takiego portal gun troszeczkę.
Zapiszmy sobie zmiany.
I myślę, że możemy to zrobić w kolejnej lekcji.