Projektuj Animacje UI z Lottie Files i After Effects: Praca z animowanym tekstem
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.
Nasza animacja wygląda moim zdaniem naprawdę fajnie
i warto tutaj jeszcze troszeczkę nad nią popracować, żeby wyglądała jeszcze lepiej.
Wszystko jest bardzo miękkie i ten ruch bardzo mi się podoba.
Natomiast musimy teraz tutaj wprowadzić jakieś dane w ten panel, w tę sekcję, w
której mamy send message.
Przechodzimy do kompozycji Empty.
I.
Tu w zasadzie ten set message powinien zniknąć.
Jak to powinno wyglądać?
W zasadzie to wyłączmy te kompozycje, z którymi już nie pracujemy.
Zostawmy sobie tylko Empty alias Main Animation.
Tu, w tym miejscu chciałbym, żeby kursor nacisnął Send message Send message znika i
mamy możliwość wpisywania custom tekstu, czyli własnej wiadomości.
Mamy tutaj kursor.
Mamy tutaj play head ustawiony na ósmej sekundzie i dwudziestej pierwszej klatce,
więc w momencie w takim ustawieniu przechodzimy do kompozycji Empty Cursor.
Tutaj dalej jest ósma sekunda, dwudziesta pierwsza 21 klatka.
I teraz ten send message nam znika, czyli wybieramy te
na klawiaturze w momencie kiedy jest warstwa zaznaczona warstwa
text wybieram Opacity. Klikam na stop.
Mamy pierwszą klatkę kluczową.
Przeniesiemy się powiedzmy kilka klatek do przodu i tutaj nam to znika.
W zasadzie możemy teraz tak naprawdę uciąć tą tą warstwę alt i
prawy nawias kwadratowy.
Teraz stworzymy sobie nową warstwę tekstową.
Wybieram więc Layer New, a następnie Text Layer.
I możemy tutaj wpisać cokolwiek.
Na razie przynajmniej ustawmy sobie tę warstwę tutaj.
OK, i teraz przejdźmy do Sigmy, ponieważ chciałbym zobaczyć jakim fontem
powinno być to wpisywane.
Więc wracam do Sigmy.
Klikam z wciśniętym klawiszem Command lub Ctrl na konkretny element
Send message to jest to.
Jest to ustawione jakimś stylem tekstowym, więc zobaczmy ustawienia tego stylu.
Jest to font z San Francisco Pro Regular.
Tutaj mamy też tą komendę slash C i to jest chyba dokładnie to samo.
Tak jest w San Francisco.
Więc wracamy do After a.
Powinienem mieć ten font zainstalowany. Zaraz się okaże.
Przechodzę do panelu Properties.
W momencie kiedy mam włączoną zaznaczoną warstwę z naszym tekstem,
mogę przejść do panelu Properties i widzimy tutaj, że jest to tekst.
Mamy dostępne wszystkie ustawienia tekstowe.
Dokładnie wyglądają one tak samo jak w Photoshopie czy Illustrator.
Tutaj możemy sobie wybrać font.
Jeśli nie widzisz tego panelu Properties, to naturalnie trzeba go wywołać z menu
głównego, wybierając Window, a następnie Properties.
OK. Ten panel tu jest.
Wybierzmy sobie S.
F Pro.
To jest s F Pro Regular.
OK, nie chcę, żeby to było wpisane w wersję plikami, więc wyłączam tę opcję.
Tutaj zero.
Krój pisma troszeczkę powinniśmy zmniejszyć naturalnie
i też możemy zapożyczyć kolor z tego oryginalnego tekstu, bo to jest tutaj.
Więc kolor wypełnienia możemy sobie zapożyczyć stąd ok.
I to co tutaj powinien wpisać użytkownik to slash C.
A tak to powinno wyglądać.
To powinno być tutaj. Tak naprawdę.
Znika nam ta warstwa Send message.
Pięknie. I teraz wpisujemy slash C.
Jak z animować wpisywanie tekstu?
To jest tak naprawdę dosyć proste.
Przechodzimy tutaj do zawartości tej warstwy, a następnie wybieram tekst
i wpisuję sobie.
I włączam sobie Stop watch.
Przy Source Text ustawimy.
Ustawiliśmy tutaj klatkę kluczową, która jest tak naprawdę klatką Halt
I jeżeli ja np.
tutaj przesunę się powiedzmy dwie klatki do przodu,
kliknę na nasz tekst i wpiszę tutaj np.
literkę M, to pojawia nam się tutaj nowa klatka kluczowa.
Przeniesiemy się na dwie klatki do przodu i wpiszemy teraz i
znowu przeniesiemy się dwie klatki do przodu i wpiszemy teraz C i tak dalej.
I w ten sposób możemy sobie napisać Michał.
I to jest bardzo fajnie animowane, tak jakby było wpisywane.
Natomiast my chcemy tutaj wpisać slash C.
Więc tutaj w tym miejscu tak naprawdę nie będzie nic.
Dwie kratki do przodu.
Klikamy i wpiszemy slash i dwie klatki do przodu.
Wpisujemy sobie C.
A tak to wygląda slash C.
Teraz tylko musimy tą warstwę zamienić na Shape.
Prawy klawisz myszy.
Create i mamy tutaj Create shape from text.
Ja tutaj może przesunę.
Ten panel z warstwami.
Prawy klawisz myszy Create shape from text.
No i mamy warstwę wektorową.
Z tym, że problem jest taki, że w żaden sposób nam się to nie animuje tutaj.
I jest to swego rodzaju kłopot, ale możemy sobie z nim poradzić.
Jeżeli sobie rozwiniemy tą warstwę, przejdziemy do content.
To mamy tutaj dwie grupy.
Pierwsza grupa to slash, a pierwsza grupa to C.
I każdą z nich możemy sobie osobno sterować.
To co ja chciałbym zrobić, to dla każdej z tych grup.
ustawić sobie opacity.
I.
Zobaczmy, że każda z tych grup ma swój własny własną sekcję Transform, gdzie mamy
rotation, opacity, scale position itd.
Włączmy sobie stop stop, włącz na opacity chociaż ewentualnie możemy zaznaczyć
tą warstwę i tutaj wpisać opacity.
I możemy sterować zarówno opacity dla
stroke, czyli dla obrysu, dla wypełnienia i dla sekcji transform.
Mi chodzi właśnie o tą sekcję transform i będzie to zarówno dla
znaku slash oraz dla znaku C.
I teraz wybieram sobie na klawiaturze po to tylko, żeby wyświetlić sobie te
wartości, przy których są klatki kluczowe, żeby nie mieć całego tego
gąszczu tych wszystkich ustawień.
OK.
I tutaj chciałbym, żeby Opacity na początku było ustawione na 0.
W ten sposób.
Tylko, tylko, że najpierw nam się wyświetla slash, a dopiero później np.
po dwóch klatkach wyświetla nam się C.
Więc to przesuniemy sobie dwie klatki później.
O.
Dokładnie o coś takiego mi chodziło.
I teraz jeśli wrócimy do Alias Main Animation, czyli tutaj mieliśmy sobie
panel z warstwami i widzimy, że tutaj pięknie nam ten kursor zaczyna wpisywać i
dopiero kiedy wpisze tę komendę slash C, to chciałbym, żeby.
Pojawiła się. Pojawiło się dopiero to drop down Menu.
Tak?
A ten sposób. I.
Te klatki kluczowe dla kursora możemy przesunąć tutaj.
Możemy je troszeczkę opóźnić.
A fajnie.
Super!
Zapiszmy zmiany.
Mamy pierwsze 15 sekund naszej animacji.
Tak naprawdę gotowe.
To co teraz będziemy robić, to będziemy pracować z animacją samego czatu, czyli
wpisywania wiadomości przez użytkownika i dodatkowo jeszcze
będziemy wyświetlać odpowiedzi od czat botami.
Na filmie mamy przygotowaną całą tą konwersacje.
Ona jest składa się z jakby tutaj kilku takich właśnie wiadomości.
Te na ciemniejszym diagramie to są wiadomości wpisywane przez użytkownika,
a te to są te najjaśniejszym.
Gdzie To są wiadomości, które zwraca nam sztuczna inteligencja.
I taki czat zrobimy.
Może nie wszystkie te wiadomości.
Może nie będziemy animować wszystkich tych wiadomości, bo jest to cały czas proces
pracy z dokładnie takimi samymi narzędziami, więc skupimy
się może na trzech.
I też mam to przygotowane w ilustratorzy podzielone na warstwy tak
żeby nam było wygodnie.
Więc myślę, że pójdzie nam to sprawnie.
A teraz to wszystko.
Nasza animacja wygląda bardzo fajnie, Jeszcze podejmujmy ją.
Super!
OK.
Zapraszam Cię teraz na krótką przerwę.