Projektuj Animacje UI z Lottie Files i After Effects: Przygotowaniu plików do trzeciej animacji

0:00Skoro drugi projekt mamy już za sobą, to teraz przyszedł czas na projekt

0:04numer 3 w naszym kursie.

0:07Będzie to projekt taki.

0:10Myślę, że można go śmiało nazwać takim projektem bardziej plastycznym,

0:14gdzie będziemy animować postać.

0:17Sama postać nie będzie jakoś animowana spektakularnie, ale całość sprawi, że

0:21animacja będzie wyglądać naprawdę bardzo fajnie.

0:24I co możemy teraz zrobić?

0:27Przede wszystkim musimy skupić się na przygotowaniu, prawidłowym

0:30przygotowaniu plików. Ilustratorzy.

0:33Ja mam tutaj taką postać wektorową, którą.

0:38Będziemy sobie oczywiście animować.

0:40Chciałbym, żeby ta postać obróciła się o 180 stopni.

0:43Ona ma w rękach coś w rodzaju jakiegoś pistoletu na wodę, jeśli

0:49można to tak nazwać.

0:50I być może podejrzewasz, że przyda nam się tutaj plugin do redagowania postaci.

0:56I w zasadzie moglibyśmy z niego skorzystać.

0:59Na pewno byłoby nam łatwiej, ale będziemy musieli to obejść, ponieważ

1:04żaden plugin do linkowania nie będzie akceptowalny przez format LOD.

1:10To znaczy możemy oczywiście zareagować i reanimować taką postać, ale

1:17nie będzie ona odpowiednio wyeksportowane do dolot i finalnie i.

1:24Nie będzie działać tak jak trzeba.

1:26Więc oczywiście będziemy działać na animacji ścieżek wektorowych.

1:31Warto zwrócić uwagę, że pogrupowane są odpowiednio warstwy i po nazwałem.

1:35Mamy tutaj jeszcze taką warstwę, która nazywa się.

1:41Glass glow i to chciałbym, żeby to był taki glow, który gdzieś tam się

1:46przejawi w tych okularach, więc okulary posłużą nam za maskę.

1:52To na pewno będzie nam potrzebne.

1:54Jeśli chodzi o jego buzie to tutaj warto zwrócić uwagę, że mamy warstwę Mouth

2:00Shape oraz TIFF i ta grupa elementów w warstwie Thief jest zamaskowana.

2:07Wybieram prawy klawisz myszy, a następnie Release Cleaning mask i tą maskę usunę.

2:13Nie będzie mi potrzebna.

2:15Mamy tutaj warstwę, na której mamy ząbki bohatera i język.

2:19Będziemy ja animować też.

2:20Natomiast tutaj mam jeszcze taką warstwę Mask i to będzie maska, w którą sobie

2:27wrzucimy te zęby tak, żeby one nam po prostu nie wystawały poza tą

2:30poza ten obszar, poza kształt buzi, poza kształt tych ust.

2:35OK.

2:35No i myślę, że z tak przygotowanym plikiem możemy przejść dalej.

2:40Tutaj też warto zwrócić uwagę na to, jak jeszcze dalsze elementy są porozkładane.

2:44Zwróćmy uwagę, że mam tutaj warstwę o nazwie L2 oraz L1.

2:49To są warstwy, które które oznaczają leg 1 oraz Leg 2, czyli noga 1 i noga 2.

2:55I to są warstwy takie złożone z trzech w zasadzie obiektów wektorowych.

3:00Pierwsza z nich.

3:02Pierwszy z nich to jest właśnie taka nogawka, but i ta kreska Tutaj

3:06to są trzy obiekty.

3:07Natomiast żeby wygodnie nam się pracowało z animacją tych SHAPE ów, to mamy tutaj

3:13bardzo istotną rzecz do zweryfikowania, czyli ilość

3:18węzłów wektorowych, z których zbudowane są nasze kształty.

3:22Im mniej węzłów, tym dużo łatwiej nam się animuje i steruje

3:28całym kształtem w procesie animacji, całym kształtem shape i kształtem

3:32obiektu wektorowego.

3:33Zwróćmy uwagę, że ta nogawka, jeśli wybiorą Direct Selection

3:36Tool, czyli białą strzałkę.

3:38Mogę to zrobić klawiszem A.

3:39Składa się z 2, 3, 4, 5, 6, 5, 6 węzłów.

3:45To samo z tym butem i dzięki temu, że mam tak mało węzłów to będzie mi łatwiej

3:51animować ten bucik w taki sposób, żeby on np.

3:55gdzieś tutaj przeszedł sobie w taki sposób na drugą stronę, żeby się obrócił.

4:01Gdybym miał naprawdę dużo węzłów, to byłoby to dosyć problematyczne dla mnie.

4:06A chodzi nam oczywiście o to, żeby jak najbardziej sobie ułatwić pracę.

4:10Zobaczymy w praktyce jak to wygląda i jakie korzyści

4:14daje zbudowanie kształtów z jak najmniejszej ilości węzłów.

4:18Spójrzmy też na włosy naszego bohatera.

4:20Na tę fryzurkę ona składa się raz, dwa, trzy.

4:25I tutaj mamy czwarty węzeł.

4:27Składa się z czterech węzłów.

4:29I to też sprawi, że będzie mi dużo łatwiej sterować tą fryzurą.

4:33Czy Czy okulary.

4:35Mamy tutaj okular, który jest zbudowany też z 4 węzłów.

4:39Mamy też nos, który zbudowany jest w zasadzie z trzech węzłów.

4:42Zmieńmy kolor warstwy, może na przykład na czerwony.

4:47I teraz widzimy lepiej te węzły 1, 2 i 3.

4:53Dzięki temu, że to jest zbudowane z tak małej ilości węzłów, to mogę np.

4:57chwycić za ten węzeł i sterować nosem.

4:59Czy on może być odwrócony w tę stronę czy w tę?

5:03Bardzo proste rozwiązanie.

5:05OK.

5:05No cóż, myślę, że tak przygotowany plik jest w porządku.

5:11Naturalnie jest dostępny w źródłach.

5:13Tutaj mam jeszcze takie kreski warstwę gun lines, którą będę chciał

5:17maskować w ten pistolet. I tutaj.

5:21dzięki temu też będę miał wrażenie takiego troszeczkę trójwymiaru.

5:25To będzie oczywiście fejk.

5:27Z żadnym trój wymiarem nie będziemy tutaj pracować, ale da całkiem fajny efekt i

5:31zobaczysz oczywiście w praktyce jak to wygląda.

5:35Więc ja zapisuję zmiany i naturalnie udostępniam ten plik w źródłach.

5:40A teraz przechodzę do aplikacji Adobe Illustrator i ściągniemy

5:44sobie tutaj wszystkie warstwy.