Projektuj Animacje UI z Lottie Files i After Effects: Duplikowanie 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.
Stwórzmy sobie teraz nową kompozycję wybierając New Competition.
Niech ona trwa 6 sekund, ok.
Background color.
Na razie może jakiś szary.
Jeśli chodzi o rozmiar to ustawimy sobie może tutaj 1920, ale nie na 1080 tylko np.
na powiedzmy 800.
I wybieram przycisk OK.
I tutaj wrzucę sobie dwa takie portale.
Wybierzmy sobie tutaj fit, tak żebyśmy widzieli cały obszar.
To jest portal 1, ale spłaszcza go, więc wybieram S na klawiaturze, a następnie
rozłączam proporcje i zrobimy coś takiego.
I teraz wygląda to bardzo fajnie.
Kopiemy go sobie np.
wybierając Command D i obrócimy sobie np. w tym miejscu.
W ten sposób.
Dajemy tu.
Ten może też sobie troszkę obrócimy. Wybierzmy R.
O coś takiego.
No i mamy dwa takie portale.
Chciałbym, żeby nasza postać przyleciała z jednego do drugiego, przy czym
one muszą się też w jakiś sposób animować, jeśli chodzi o ich pojawienie się np..
Zacznijmy od tego. Wybierzmy sobie S.
Niech on tu w pierwszej sekundzie ma tą swoją aktualną skalę, ale tutaj np.
chciałbym, żeby to wszystko było poustawiane na 0.
zero.
Teraz możemy te proporcje zablokować.
OK, dodajmy teraz leasing, a następnie przenieśmy
się do Graph Editor.
Pracujemy z prędkością.
Może zróbmy coś takiego?
OK, bardzo fajnie.
Przy czym też fajnie by było, gdyby ten portal zniknął np.
gdzieś powiedzmy tutaj.
Stawiamy klatkę i tu wszędzie ustawmy na 0.
Bardzo fajnie.
Wyjdźmy Graph Editor, zaznaczmy te klatki kluczowe Command C
i wklejamy je tutaj do tego drugiego portalu dla skali naturalnie Command V.
Tylko, że ten drugi portal pojawi się troszeczkę później.
OK, a ten niech zniknie jako pierwszy.
Czyli powinniśmy mieć coś takiego.
Ciach i ciach.
I teraz jeżeli wrzucimy sobie portal gay, którego naturalnie musimy zmniejszyć,
to chciałbym, żeby teraz on po prostu sobie wyleciał z tego portalu.
Obrócimy go.
Czyli on powinien wylecieć stąd.
Możemy dać pozycję tutaj.
I tu powinien wlecieć.
Tylko że naturalnie musimy też ten ruch jakoś.
Ustawić jako bardziej naturalny.
Więc proponuję, żebyśmy sobie wybrali Convert Vertex Tool i np.
tutaj tą ścieżkę ruchu możemy sobie zedytować w ten sposób.
OK, tylko że też musimy sobie zedytować jego obrót.
Czyli wybierzmy jeszcze Shift R i tutaj wybierzmy sobie rotację.
I w tym miejscu nasz bohater powinien troszeczkę się obrócić.
W ten sposób np..
OK.
I zobaczmy tutaj na początku.
O coś takiego.
Zapiszmy zmiany i przejdziemy do lekcji następnej, w której też dodamy odpowiednią
maskę i jeszcze dodatkowo jakieś fajne efekty przy pojawianiu się tego
portalu, bo troszkę słabo to wygląda.
Chociaż sam sam w sobie portal jest bardzo fajny.
Musimy też dodać maskę dla naszego bohatera.
A na teraz to wszystko zapiszmy zmiany i do usłyszenia po przerwie.