Projektuj Animacje UI z Lottie Files i After Effects: Czyszczenie projektu
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ść, Witam Cię w kolejnej lekcji.
Ja tutaj dokończyłem tą konwersację, czyli tu stworzyłem kolejną warstwę,
na której wpisuje się tekst.
I odpowiedź chatbota.
I w zasadzie to wszystko to zrobiłem poza
nagraniami, czyli w przerwie między lekcjami, używając dokładnie tych
samych technik, które Ci pokazywałem.
Więc całą konwersację mam zrobioną.
Zobaczmy jeszcze raz całą animację od początku.
OK.
Super!
Cała animacja trwa.
Tutaj możemy w zasadzie ją zakończyć na 37 sekundzie.
Więc Work era work era.
sobie gdzieś tutaj ustawimy.
A czym jest ta siódma sekunda porządku?
I to jest ten obszar, który będziemy renderować.
Natomiast co tutaj jeszcze możemy zrobić?
Tak naprawdę jakieś kosmetyczne rzeczy.
Tutaj to co mi się nie podoba to w tym kursowe
to to, że on jakby zatrzymuje się na chwilkę na tej liście asystentów,
zatrzymuje się przy ulicy, ale on chce zmienić tego asystenta, więc tutaj raczej
raczej bym tego kursora nie zatrzymywał.
Przejdźmy do tej.
Warstwy z kursorem wybieram na klawiaturze.
Mamy tutaj wszystkie klatki kluczowe dla pozycji naszego kursora.
OK i widzimy, że on się tutaj zatrzymuje na alias na chwilę, ale
może usuńmy tą klatkę?
I zobaczmy jak to teraz wygląda.
Chyba lepiej.
W porządku.
Mamy jeszcze jedną kompozycję, która wymaga wymiany zamiany w zasadzie
warstw na shape wektorowe.
Tak, żeby nasza animacja była lekka.
Tutaj tak naprawdę tę kompozycję możemy przyciąć.
Mamy kompozycję asystent i ona w zasadzie kończy się tutaj, więc możemy ją.
Możemy ją tutaj przyciąć alt i prawy nawias kwadratowy.
Następnie mamy kompozycję z tym Downem.
Ona też tutaj się zamyka, więc też możemy ją sobie tutaj przyciąć.
W porządku.
No i teraz przejdziemy sobie tutaj jeszcze do kompozycji Empty.
Tutaj mamy kompozycję Conversation.
Ta kompozycja ma w zasadzie tylko klatki kluczowe dla pozycji.
No bo widzimy, że w momencie kiedy użytkownik wpisze wiadomość
i wybierze Enter, to tutaj ta konwersacja się pojawia w formie takich pop upów.
Za każdym razem jak on coś wpisze i odpowie nam czat bot to shout, idzie to do
góry i znowu siup idzie do góry i znowu się upić do góry i do góry.
Więc tutaj tylko zmieniamy pozycję.
Ten tekst wpisywany przez użytkownika jest tutaj.
To są warstwy wektorowe, które wcześniej były tekstem dokładnie
tak, jak to robiliśmy wcześniej.
Zamieniałem tekst na szybko i tutaj ta żmudna praca z przesuwaniem
z przesuwaniem klatek kluczowych dla poszczególnych liter,
tak jak tutaj widzimy.
Ale daje to bardzo fajny efekt wpisywania tekstu z klawiatury.
Więc myślę, że warto było.
Natomiast jeśli przejdziemy do tej kompozycji Conversation, to mamy tutaj
całą masę warstw, które nie zostały jeszcze zamienione na
ścieżki wektorowe i dobrze by było teraz to zrobić, więc sobie
to wszystko zamienimy.
To bardzo fajne.
Fajna rzecz jeżeli np.
mamy tutaj warstwę Adobe Illustrator, która ma już jakieś
klatki kluczowe i zamienimy ją na warstwę wektorową na Shape
Layer, to ona również otrzyma.
Ta nowa warstwa również otrzyma te klatki, więc nic nie musimy robić tutaj od nowa.
Wszystko będzie dokładnie tak samo jak jest.
No i ok.
Zamieńmy teraz te elementy, które powinniśmy zamienić na ścieżki, czyli na
warstwy kształtu Shape Layers, tak zwane poza naturalnie awatarami.
Tak to musi zostać jako bitmap.
Natomiast jeżeli wybierzemy sobie np.
tą warstwę, zaznaczmy np.
tą warstwę wybiorą prawy klawisz myszy, a następnie Create shape from vector layer.
I tutaj obawiam się, że będziemy mieli całą masę różnych śmieci, niepotrzebnych
typu dodatkowe grupy, a w grupach i jeszcze dodatkowo Merge path.
Przekonajmy się o tym.
Mamy tutaj całą masę grup i rozwijam pierwszą z brzegu i mamy grupę 1.
Dodatkowo w tej grupie oraz miecz Paw.
Zwróćmy uwagę, że jeżeli zaznaczę warstwę i wpiszę sobie grup.
To tych dodatkowych grup w grupach jest znacznie, znacznie, znacznie
więcej niż to miało miejsce poprzednio.
I tak samo jeśli ja tutaj wpiszę sobie merge, to też mamy co usuwać.
Możemy zwrócić uwagę jak dużo jest tych elementów.
Zaznaczanie ich ręcznie i usuwanie byłoby bardzo czasochłonne.
Dlatego ja wybieram Command set i mając zaznaczoną tą warstwę przejdę do
oryginalnego pliku źródłowego w Adobe Illustrator, więc wybieram
Edit, a następnie Edit Original.
Pokażę Ci co trzeba zrobić, aby uniknąć tego typu bugów, które oczywiście
będziemy musieli usunąć.
OK, jestem już ilustratorem i zaznaczę sobie teraz jedną z takich
warstw tekstowych.
Rozwinę sobie tutaj jej zawartość i widzę, że mam tutaj.
Masę różnych kształtów wektorowych.
Musimy z tej grupy tak naprawdę stworzyć tak zwany komponent PATH, czyli
jedną ścieżkę złożoną.
W momencie kiedy mam zaznaczoną taką grupę obiektów wektorowych, przechodzę
do menu głównego Ilustratorzy.
Wybieram Object.
Komponent Path, czyli ścieżka złożona i wybieram Make.
To samo zrobimy dla tej warstwy.
Tudzież dla tej grupy obiektów.
Object Command Path Image I to samo zróbmy dla tej grupy.
Komponentów Image.
Zapiszmy teraz zmiany.
I jeżeli ja teraz wrócę do adaptera i zaznaczę sobie np.
właśnie tą warstwę, a następnie wybiorą prawy klawisz myszy Create shape from
vector layers i jeżeli rozwijam tutaj content to zwróćmy
uwagę, że teraz mam tutaj nie setki różnych grup z
mapami wektorowych, ale jedną grupę i ta jedna grupa ma całą masę ścieżek.
ale jeśli wpiszę tutaj merge to mamy tylko dwie merge do usunięcia.
I jeśli piszę sobie grup, to mamy tylko jedną wewnętrzną grupę do usunięcia.
I tak powinniśmy postąpić z wszystkimi tymi warstwami vector owymi.
Musimy je pozamieniać oczywiście na Shape Layers.
Poza przypominam awatarami.
Zobaczmy raz jeszcze.
Jak wygląda nasza animacja w całości.
Worker Ja ustawiłem na 40 sekund.
I wybieram spację, aby zobaczyć preview.
Super! Dokładnie o to nam chodziło w tej lekcji.
To już wszystko.
Myślę, że możemy teraz śmiało przejść do lekcji następnej, w której przejdziemy
już do pluginu Loot I Files.
Zobaczymy co jest ewentualnie do poprawy i będziemy już pracować na to, aby
wyeksportować sobie gotowy plik LOD.
Zanim to zrobimy jednak w tej kompozycji konwersacji musimy pamiętać, żeby
pozamieniać wszystkie warstwy na Shay Players.
Ja to zrobię w przerwie między lekcjami.
A na teraz to wszystko.
Do usłyszenia w lekcji następnej.