Projektuj Animacje UI z Lottie Files i After Effects: Przygotowanie plików

0:00Przechodzimy już do naszego praktycznego projektu.

0:03I tutaj ja otrzymałem wszystkie materiały do wykonania tej animacji w filmie.

0:09Ponieważ Sigma jest swego rodzaju standardem dzisiaj

0:13przy projektowaniu interfejsów, więc nic dziwnego, że elementy tego interfejsu

0:19otrzymałem właśnie w firmie.

0:22No i pliki Sigmy nie działają zbyt dobrze z After em.

0:26W zasadzie After nie rozumie tych plików i nie da się ich zaciągnąć do after, a

0:31więc trzeba po prostu przetłumaczyć te wszystkie ekrany na

0:39format Adobe Illustrator.

0:41Więc np.

0:44możemy zrobić w ten sposób, że zaznaczymy sobie ten komponent drop down menu

0:48i wybiorą sobie prawy klawisz myszy, następnie kopii AS i

0:53skupujemy to jako plik SVG.

0:55Ja tutaj w Illustratora już przygotowałem sobie kilka takich ekranów, żeby

1:02nie przedłużać i np.

1:04mamy tutaj ten ekran Select Assistant i to jest dokładnie ten ekran

1:10i wygląda to w ten sposób, że każdy element, który chciałbym, żeby się w jakiś

1:14sposób animować, jest na osobnej warstwie.

1:17No i oczywiście warstwy są podpisane koniecznie.

1:20Czyli w momencie kiedy wysunie nam się ten ekran, to chciałbym, żeby po kolei

1:23wskoczyły te elementy zarówno awatary, jak i te opisy.

1:29Dlatego znajdują się one na osobnych warstwach i to samo zrobimy

1:35właśnie z tym elementem.

1:38Drop down menu przypominam prawy klawisz myszy, następnie kopiuj jako SVG.

1:44Wracam do Illustratora i zakładam tutaj nowy dokument.

1:48Jego rozmiar na razie nie jest jakoś istotny.

1:52Wybierzmy Create, a następnie wybieram Command V i mamy już

1:56to menu tutaj klejone.

1:59Możemy zmniejszyć troszeczkę rozmiar.

2:04Tego art border.

2:06OK, i teraz zastanówmy się co chcielibyśmy tutaj animować w momencie

2:10kiedy to menu wyskoczy.

2:12Wygląda to tak, że kursor kiedy zacznie tutaj wpisać komendę, wpisywać

2:18komendę to pojawia się to menu i kursor.

2:21Następnie wybiera tutaj ten górny element, ale w momencie kiedy kursor przechodzi

2:27przez te poszczególne elementy to chciałbym żeby jakiś efekt hover się tutaj

2:30pojawiał, więc na pewno będziemy musieli w jakiś sposób to tutaj zamaskować.

2:41Dlatego myślę, że rozgrywamy koniecznie całą tą całą tą grupę, weźmiemy sobie

2:49te elementy i będzie to Actions.

2:51Wybieram Command X, a następnie tworzy nową warstwę za pomocą

2:55plusa i wybieram Command V.

2:57Następnie warstwę przenoszę tutaj pod spód.

2:59OK, no i tą nazwę nazwiemy background.

3:05W zasadzie mamy tutaj wszystkie istotne, istotne rzeczy.

3:10OK, możemy sobie zablokować tą warstwę.

3:14Ona nie jest nam potrzebna.

3:15Poprawiamy tylko nazwę BG czyli background.

3:18I teraz zajmiemy się tą warstwą, którą wyłączyłem.

3:21Ilustratorzy po prostu muszę. To rozwarstwia.

3:25Nie ma tutaj żadnego, żadnej innej opcji.

3:29Możemy na przykład zaznaczyć sobie te elementy.

3:37Wybierzmy Command X.

3:39Tworzymy nową warstwę i wklejamy i np. będzie to.

3:46Task 1.

3:49Zaznaczmy teraz kolejne elementy Command x

3:53wycinamy to command v wklejamy task 2 ok.

4:01Następnie znowu tworzę nową warstwę Products co wytniemy i

4:07zaznaczam nową warstwę, a następnie Shift Command V aby wkleić dokładnie to samo

4:11miejsce i wpiszemy tutaj produkty OK.

4:16Następnie wybieramy Create and in voice czyli te elementy Command x.

4:21Tworzymy nową warstwę.

4:22To będzie Task 3.

4:28Command V porządku.

4:30I teraz to wycinamy.

4:37Tutaj będziemy mieli task 4 wklejamy w rządku.

4:42No i tutaj mamy problem, bo w zasadzie musimy.

4:46W zasadzie musimy mieć jakby dwa stany tego tej pozycji, taką normalną, gdzie to

4:51wszystko jest białe oraz w momencie, kiedy kursor kliknie no to chciałbym, żeby to

4:54się podświetli ona biała, żeby tekst, czyli cała zawartość tego była już

4:59na czarno, więc może to sobie wytniemy Command x i wklejamy tu

5:07na nowej warstwie OK i nazwijmy to white.

5:16Button np.

5:18Zablokujemy sobie to, bo nie jest to nam teraz potrzebne i te elementy.

5:23No oczywiście chciałbym żeby były w jakiś sposób animowane, więc muszą

5:28być na osobnej warstwie.

5:30Możemy sobie zaznaczyć to, a następnie wybrać Command X i będzie to Task 5.

5:39Tak sobie to nazwiemy.

5:44Task 5 Command V wklejamy ok.

5:48No i tu mamy jeszcze ten.

5:53Skrót klawiaturowy, który też musimy odpowiednio tutaj sobie.

6:03Oznaczyć I to będzie np.

6:05short cut.

6:11On.

6:12Czyli w momencie kiedy kursor kliknie już na ten task

6:18to tak będzie wyglądał ten przycisk, ale skopiuję go sobie

6:21jeszcze w całości Command Command C i stworzymy sobie nową warstwę.

6:29Nazwiemy ją Short cat.

6:37Off.

6:38Wklejamy tutaj.

6:39To sobie wyłączmy.

6:40I to co chciałbym tutaj zrobić to oczywiście chciałabym, żeby te elementy

6:46miały dokładnie taki sam wygląd jak tutaj.

6:55To sobie wyłączmy w porządku i to zaznaczmy, a następnie biały kolor.

7:09No i ok.

7:12Możemy też zrobić jeszcze taką rzecz.

7:14Zwróćmy uwagę, że tutaj task 5 jest na czarno.

7:17Możemy w aferze zmienić kolor na biały, ale możemy też stworzyć

7:22alternatywną wersję na osobnej warstwie, czyli kopiujemy to i kleimy tutaj Command

7:28V i to będzie task 5 ON, 50 czyli włączony task 5 ON.

7:37OK, a tutaj ten task 5 będzie off czyli wyłączony i powinien być na biało.

7:44Czyli ten napis będzie w kolorze białym.

7:50Klikam dwukrotnie tutaj na kolor for ground wybieram kolor biały

7:55i tutaj dlatego chciałbym zapożyczyć sobie kolor z tąd.

8:02I teraz nie będziemy musieli animować żadnego koloru

8:05tylko po prostu podmieniamy sobie widok warstwy a ten sobie wyłączymy, a ten

8:11a ten sobie włączymy w momencie kiedy zanim użyjemy kursor klikając na

8:17ten element. Tak.

8:20I będzie to wyglądać.

8:23w ten sposób wtedy.

8:25OK, możemy sobie to zapisać.

8:28Plik zapisz jako.

8:32Stworzyłem folder assets i tutaj zapiszemy to jako drop down menu.

8:43Wybieram Save.

8:46OK.

8:48Plik został zapisany.

8:49I teraz to co najistotniejsze to tak należy przygotować wszystkie te

8:54kasety, które potrzebne są do wykonania takiej animacji.

8:57Czyli musimy mieć wszystko rozpisane na warstwach.

9:00Wszystkie te elementy, które mają się w jakiś sposób animować, które mają w jakiś

9:04sposób coś ma się z nimi dziać, muszą być na osobnej warstwie.

9:10Zwróćmy uwagę, że tutaj ten przycisk Actions to napis Actions.

9:13Tutaj się z nim nic nie dzieje, więc wziąłem go na tej samej warstwie

9:16z tłem, czyli z background em.

9:19Jeśli poćwiczymy sobie tą warstwę to widzimy, że to jest wszystko tutaj

9:22zaznaczone i w zasadzie możemy sobie to zapisać.

9:26Będzie to pierwszy element jaki animuje, chociaż nie będzie on wyświetlał się jako

9:30pierwszy w naszej animacji, ale jako pierwszy zaciągnie go

9:36do after i będziemy go sobie animować.

9:40A na teraz w tej lekcji to wszystko.

9:41Wiesz już, jak przygotować sobie poszczególne kasety

9:44i w tej lekcji to w zasadzie wszystko.

9:48W lekcji następnej jeszcze pokażę Ci jedną ważną rzecz, jeśli chodzi o lepsze

9:52odczytywanie plików Illustratora przez After Effects.

9:56Jedna rzecz, dosyć kluczowa, a ułatwi nam sporo pracy.

10:00Ale o tym po przerwie.