Projektuj Animacje UI z Lottie Files i After Effects: Elementy kompozycji w Illustrator
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.
Na chwilkę odstawiamy aplikację.
After Effects Przejdziemy do ilustratora, ponieważ tutaj chciałbym, abyśmy
wykonali prostą ilustrację, którą później z animuje w grze.
Dlaczego wybrałem do tego celu Adobe Illustrator?
Ponieważ Illustrator i After Effects.
Jako że obie aplikacje pochodzą od Adobe i obie są w pakiecie Creative Cloud,
świetnie ze sobą współpracują.
Zobaczysz to za chwilę.
Stworzę sobie nowy dokument w After i niech to będzie 800 na 800 pikseli.
Mogę to wpisać również tutaj.
Wybieram Create i to co teraz stworzymy to niech to będzie elipsa z Shift.
Narysujemy sobie idealne koło w ten sposób.
Następnie.
Wypełnimy sobie tutaj kolorem.
Wybierzmy tutaj może jakiś.
jasno pomarańczowy kolor.
Nie chcę obrysu, więc mogę przełączyć się na edycję obrysu tak aby
rozświetlił nam ten czarny prostokąt. Wybieram brak.
Ewentualnie mogę wybrać na klawiaturze.
I teraz skopiuję sobie ten element, a następnie wkleję.
Czyli wybieram Command C.
Ewentualnie jeśli pracujesz z Windowsem z Windowsem będzie to Ctrl+C
I wklejam dokładnie w to samo miejsce.
Mogę wybrać Edit, a następnie Path in Place albo ewentualnie Shift
Command V lub Shift Ctrl+V.
Wklejam i mam teraz dwa obiekty.
Ten drugi zmniejszę z wciśniętym klawiszem Alt, aby skalować do środka i jeszcze
dodatkowo wcisnę sobie shift po to aby skalować proporcjonalnie.
OK, tutaj wypełnimy to troszeczkę ciemniejszym kolorem.
W ten sposób.
Teraz wybiorę narzędzie Type Tool, czyli tekst Klikam i mogę po prostu pisać, ale
to co chciałbym wpisać to po prostu znak dolara, więc będzie to Shift oraz czwórka.
OK, mamy ten znaczek.
Teraz tylko wybierzemy sobie odpowiedni krój pisma.
Chciałbym żeby to był np..
Montserrat Black z Shift em.
Troszeczkę to zwiększę, a następnie jako że chciałbym żeby to był wektor, po prostu
zamienię to na krzywe tak aby nie było to już więcej tekstem.
Prawy klawisz myszy, następnie Create outline
color Myślę, że możemy sobie zapożyczyć stąd więc możemy wybrać krokomierz
ewentualnie i na klawiaturze.
A no i mamy taką prostą, prostą monetę zanim użyjemy ją w After Effects.
Ale najpierw musimy tutaj podzielić elementy na warstwy.
Myślę, że ten znaczek dolara sobie stąd wytniemy.
Wybieram więc Command X, aby wyciąć.
I tutaj w panelu z warstwami w ilustratorzy wybiorą ten
kwadracik z ikonką plusa.
Stworzy mi to nową warstwę.
I tutaj na tej nowej warstwie, jako że jest teraz zaznaczona wybiorą Shift
Alt Command V i wklejam naszą deskę dokładnie w to samo miejsce.
Nazwiemy tę warstwę dolar.
A tą drugą nazwiemy Coin.
Klikam dwukrotnie i wpisujemy coin czyli moneta.
Następnie stworzymy jeszcze jedną warstwę, więc klikam znowu ikonkę plus
i nazwiemy ją Coin.
Site albo koń profil może.
OK.
Teraz wybieram narzędzie Elipsa.
Przytrzymuję lewy klawisz myszy, a następnie wybieram narzędzie Prostokąt
i rysuję prostokąt o takiej samej wysokości jak nasza moneta.
To co chciałbym tutaj zrobić, to może zapożyczyć sobie kolor stąd ok?
A teraz narysuję jeszcze jeden prostokąt.
Mniejszy kolor wezmę sobie stąd, ustawię go tutaj u samej góry,
następnie kolejny dam.
Tu zaznaczę z Shift oba te małe prostokąty, a następnie wybiorę obiekt.
Object.
Blend i Make.
Następnie wybieram ponownie Object Blend i wybierzmy Blend Options.
Tutaj przechodzę do Specific Steps i wpisuję np.
mniejszą wartość, powiedzmy 15 O.
I teraz wygląda to lepiej.
Jeśli wpiszę jeszcze mniejszą np.
10 to będzie tych małych prostokątów mniej, ale myślę, że lepiej
będzie jeśli wybierzemy sobie 15.
A wybierzmy Blend Options i wpiszmy tutaj 15.
OK, teraz wybierzmy Object, następnie Blend i wybierzmy Expand, aby zamienić
ten efekt na obiekty wektorowe.
No i teraz mamy tych obiektów tutaj sporo.
One są zgrupowane jako jedna grupa kilkunastu obiektów wektorowych.
W porządku.
To co chcę, będę chciał zrobić w after, to po prostu obrócić naszą monetę o
360 stopni tak, żeby ona po prostu kręciła się w nieskończoność.
To co teraz zrobimy, to oczywiście musimy zapisać ten dokument.
Więc wybieram sobie File, a następnie Save.
Zapiszę to jako coin.
czyli moneta.
Następnie wybieram Save albo Enter OK i nasz plik jest zapisany.
Przeniosę się na chwile do Adobe After Effects, gdzie za importuje naszą monetę
i pokażę Ci, że mimo że After Effects dobrze odtwarza te obrazy
projektowane w ilustratorzy.
To jednak w momencie, kiedy zamienimy to na wektorowe, czasami
pojawiają się pewne błędy.
Więc wybiorę File, a następnie Import File i znajdę naszą monetę.
Następnie zaimportować ją do After Effects.
Tutaj ważna rzecz, o czym będziemy mówić w lekcji następnej, że importujemy to zawsze
jako kompozycję z zachowaniem rozmiarów warstw.
Jeśli nie widzisz tego w tej sekcji, to po prostu jest ona
ukryta, więc trzeba wybrać Show Options.
Wybieramy teraz Open i mamy już naszą kompozycję.
Klikam dwukrotnie i faktycznie mamy tutaj wszystko dokładnie to samo, co
zaprojektowaliśmy w ilustratorzy, również z rozbiciem na warstwy,
które są tak samo nazwane.
Jak wspomniałem wcześniej, w tym kursie wszystkie animacje loty są lekkie,
ponieważ są zbudowane głównie z SHAPE ów wektorowych kształtów.
Dlatego te elementy również będziemy musieli przekonwertować tutaj w aferze na
warstwy kształtu warstwy wektorowe i np.
jeżeli zaznaczę sobie tą warstwę profil to będę musiał wybrać prawy klawisz myszy.
A następnie tutaj wybieram Create i Shape from vector Layer
No i widzimy, że są tutaj kształty wektorowe, które
jakby zbudowały zbudowały tą warstwę.
Ale mamy tutaj pewien bug, pewien błąd, bo pojawiło się tutaj więcej obiektów
wektorowych, nawet takich, których nie projektowaliśmy np.
ten jasno pomarańczowy building box.
Nie chcemy tego tak.
Musielibyśmy znaleźć odpowiednią grupę, która odpowiada za ten element
i po prostu to usunąć.
To jest chyba grupa numer 17, jeśli włączy sobie oczko.
Nie, nawet to nie jest grupa 17.
W każdym bądź razie są to wektory, którym możemy przestawiać węzły tak samo jak w
ilustratorzy.
Ale widzimy, że mamy tutaj całą masę obiektów.
Dodatkowo jeszcze mamy jakieś dodatkowe ścieżki, więc
nie za dobrze sobie poradził After Effects z odtworzeniem tych wektorów.
Wybierzmy Command set aby cofnąć i teraz.
I teraz wrócę do Illustratora.
Mogę to zrobić w taki sposób, że w momencie kiedy mam zaznaczoną jedną z
naszych warstw, wybieram Edycja, a następnie Edit Original.
Co sprawi, że przeniosę się z powrotem do Illustratora i zostanie
uruchomiony nasz plik.
I to, co muszę zrobić na warstwie koń profil, to muszę rozwinąć jej zawartość.
I mam tutaj nasz ciemno pomarańczowy prostokąt.
Czyli to.
I również mamy naszą grupę obiektów wektorowych, które
stworzyliśmy za pomocą funkcji blend.
To co musimy zrobić to spłaszczyć tą grupę tak, żeby to był.
Tak, żeby After Effects rozumiał to troszeczkę bardziej jako jeden obiekt.
I w tym celu przejdziemy do panelu Properties, a następnie
do sekcji Pathfinder.
Jeśli nie jest widoczny u Ciebie panel Properties Illustrator, możesz wybrać
Window, a następnie z listy wybrać Properties albo
Pathfinder jako osobny panel.
I w momencie kiedy mam zaznaczoną tą grupę tych jasno żółtych prostokątów to
wybieram sobie ikonkę Unit czyli połącz.
OK, teraz Teraz zamykam to wybieram Command S lub Control S jeśli
pracujesz z Windowsem, aby zapisać zmiany.
Te zmiany zostały z update opisane tutaj w aferze, więc nie muszę jeszcze raz ładować
ilustracji z monetą i to co teraz zrobię to znowu wybieram
Coin Profile prawy klawisz myszy na tej warstwie, a następnie na dole znowu
wybieram Create Shape from Vector Layer.
Możesz teraz nie widzieć tej opcji, ponieważ znajduje się ona poza ekranem
nagrywania, więc ja po prostu będę musiał podnieść sobie ten panel z warstwami
Create Shape wektor layer I teraz widzimy, że zostało to dużo lepiej
zamienione bez jakichś dodatkowych kształtów wektorowych, które nie
są nam w żaden sposób potrzebne.
Możemy sobie rozwinąć tutaj tą warstwę i mamy content oraz transform
content czyli zawartość tej warstwy.
I mamy tutaj nasze grupy wektorowe.
Każda z takich grup to zarówno ścieżka wektorowa jaka buduje
kształt, wypełnienie kształtu czyli fill oraz obrys czyli stroke.
I jeszcze dodatkowo mamy możliwość animacji transformacji takiego kształtu.
Kiedy sobie to rozwinę, widzimy, że mamy tutaj PATH.
Czyli ścieżkę wektorową, która definiuje kształt tego obiektu.
W każdej chwili możemy ją zmienić, tak samo jak w Illustrator.
Mamy Fill, czyli wypełnienie w jasno pomarańczowym kolorze.
To jest to! I transform, gdzie możemy np.
animować pozycję, skalę rotacji czy opacity.
OK.
Tak skonstruowany jest nasz plik Illustrator.
Tak powinien być skonstruowany nasz plik wektorowy,
aby później łatwo pracować, aby później było nam łatwo pracować z nim w aferze.
A teraz w tej lekcji to wszystko.
Przechodzimy do lekcji następnej, gdzie za importujemy sobie jeszcze raz naszą monetę
i zaczniemy już wprawiać pierwsze elementy w ruch.
Oczywiście zaczniemy od konwertowania wszystkiego na
ścieżki wektorowe, na kształty.
A na teraz to wszystko.