Projektuj Animacje UI z Lottie Files i After Effects: Przygotowanie warstw do animacji

0:00OK.

0:01Wracamy do After Effects i zakładamy sobie tutaj nowy projekt, wybierając

0:05File, a następnie New New Project.

0:09Jeśli chodzi o panel LOD i on narazie nie będzie nam potrzebny.

0:13Wybieram close panel, żeby mieć więcej miejsca tutaj.

0:17Wybieram File, a następnie Import File.

0:21Przechodzę do źródeł i wybieram Assets, a następnie.

0:27Drop down menu, czyli plik Illustratora, nad którym pracowaliśmy i wybieram teraz

0:32Competition Retail Large size Create competition.

0:35Oczywiście, jeśli nie widzisz tych opcji, one są schowane, więc trzeba wybrać Show

0:39Options, a następnie upewniam się, że mam composite.

0:43Na pewno upewniam się, że mam od kliknięcia Sequence.

0:49To jest w ogóle niepotrzebne.

0:50Jeśli cokolwiek z tych dwóch rzeczy mamy zaznaczyć, to tylko kredką position i

0:54Composite moon z zachowaniem rozmiarów warstw.

0:56Wybieram teraz Open.

0:58Klikam dwukrotnie na naszą kompozycję i widzimy, że wygląda ona dokładnie tak samo

1:05jak w Ilustrator.

1:07Dokładnie, mamy takie same warstwy, tak samo nazwane, tak samo poukładane.

1:12Dokładnie o coś takiego nam chodziło.

1:13Teraz tylko musimy te warstwy przekonwertować na kształty wektorowe.

1:19Zaznaczmy więc background najpierw, a następnie wybieram prawy klawisz myszy.

1:23I tutaj znowu jest to niestety poza ekranem nagrywania, ale tutaj na dole jest

1:28opcja, która nazywa się Create, a następnie Create shape

1:31from vector layer to.

1:32OK i rozwiniemy teraz tę warstwę.

1:36Zobaczymy co tu mamy wewnątrz ten oryginalny.

1:41Ta oryginalna warstwa z Illustratora jest teraz śmieciem.

1:43Po prostu jest nam niepotrzebna totalnie, więc wszystkie

1:47śmieci i elementy niepotrzebne usuwamy za pomocą delete albo backspace.

1:51I w momencie kiedy rozwiniemy content tej warstwy background, to mamy

1:55tutaj trzy grupy obiektów.

1:57Pierwsza to jest ten napis Action, druga to jest ten background jako wypełnienie

2:03i grupa 3 to jest obrys background.

2:07Natomiast częsty, częsty bug, jaki pojawia się przy

2:12konwertowanie warstw z ilustratora na szyby wektorowe, to tak zwana

2:17dodatkowa grupa w grupie i merge path.

2:21Są to elementy, które są totalnie niepotrzebne, natomiast

2:26After Effects często je stosuje i trzeba po prostu to usunąć.

2:31Najlepszym sposobem na to jest zaznaczenie warstwy, a następnie w

2:35wyszukiwarkę wpisujemy sobie grup.

2:40I widzimy, że w grupie 1 jest kolejna podgrupa 1, więc ją usuwamy.

2:44W grupie 3 też jest podgrupa 1, więc zaznaczamy z klawiszem Command

2:49lub Control na Windowsie te dwie grupy, a następnie wybieramy Delete albo Backspace

2:54i już niepotrzebne ścieżki wektorowe zostały usunięte.

2:57Ale mamy jeszcze tak zwany efekt Match path, który pojawia się w momencie, gdy

3:03mamy jakieś ścieżki złożone.

3:06I to w zasadzie jest niepotrzebne, ale też nie jest dobrze

3:11odczytywane przez LOD I Files przez format lotu, więc to też musimy usunąć

3:17i najprostszym sposobem jest znowu zaznaczenie warstwy, a następnie wpisujemy

3:21Merge i usuwamy wszystkie Merge path.

3:25Możemy je zaznaczyć z wciśniętym klawiszem Command lub Control na Windowsie i

3:29usuwamy i mamy piękną czystą warstwę.

3:35Wektorową. Dokładnie o coś takiego nam chodziło.

3:38W momencie gdyby na tej warstwie były jakieś transparentności albo gradienty,

3:44tutaj w ilustratorzy by były jakieś gradienty transparentności itd.

3:48No to niestety mielibyśmy tutaj dużo więcej rzeczy do usuwania i dużo więcej

3:52gradientów do odtworzenia, tak jak miałoby to miejsce w przypadku tych przycisków,

3:57które w lekcji poprzedniej sobie naprawiliśmy.

3:59I owszem, mamy tutaj jeden z takich przycisków.

4:04Task 1.

4:05Wybieramy prawy klawisz myszy, następnie wybieramy Create Shape from Vector Layer.

4:11I zobaczmy, co tutaj wyszło.

4:15Widzimy, że ten gradient, który tutaj był i tak nie został zachowany.

4:19Na tym obrysie został dodany jakiś domyślny szary gradient,

4:23więc tak naprawdę jeśli stosujemy gradienty, to zawsze przy konwertowanie

4:28warstwy wektorowej na Shape ten gradient zostanie zastąpiony

4:33płaskim szarym kolorem.

4:35Tutaj widzę, że też pojawiły się niepotrzebne elementy w postaci

4:41dodatkowych grup i merge merge path.

4:45Dlatego musimy zaznaczyć tę grupę.

4:47Oczywiście to co jest niepotrzebne usuwamy.

4:50I tutaj wpisujemy merge.

4:51I mamy tutaj raz 2, 3, 4, 5 6.

4:56Usuwamy W porządku i jeśli są jakieś dodatkowe grupy

4:59w grupach, to też je usuwamy.

5:04OK.

5:05I w zasadzie.

5:09Tę warstwę mamy załatwioną.

5:12Jeśli chodzi o Task 2 podejrzewam, że będzie taka sama historia.

5:16Też będziemy musieli usunąć Edge Pass oraz dodatkowe grupy.

5:20Natomiast tutaj już nie mamy żadnego gradientu, żadnej przeźroczystości,

5:23więc wszystkie kolory zostaną zachowane.

5:26Prawy klawisz myszy Create na dole wybieram Create, a

5:29następnie Shape Vector Layer i robimy to samo Group.

5:37Trzy dodatkowe grupy usuwamy, a następnie tu wpisujemy Merge i robimy to samo.

5:49OK, to możemy usunąć.

5:54I teraz ja zrobię taką rzecz.

5:57Włączę sobie wszystkie warstwy tak, żeby były widoczne, a następnie zaznaczę

6:03te wszystkie warstwy, które jeszcze nie zostały zamienione na mapy.

6:06Wybieram prawy klawisz myszy, znowu na dole wybieram Create, a

6:10następnie Shape from Vector Layer.

6:13Warstwy te oryginalne z ilustratora nie są mi potrzebne, więc je zaznaczam z

6:18wciśniętym klawiszem Command i usuwam.

6:21I teraz w tych warstwach mam wszystkie warstwy.

6:24Generalnie mam zamienione na ścieżki wektorowe,

6:27ale na pewno w nich znajdują się jakiś miecz, pas oraz dodatkowe grupy,

6:31więc aby szybko je wychwycić i usunąć nie zaznaczam żadnej warstwy

6:37tylko bezpośrednio wpisuję merge i widzimy, że tych małych psów jest sporo.

6:42Niestety trzeba je usunąć.

6:44Nie mamy takiego narzędzia, które pozwoliłoby to zrobić z automatu, chociaż

6:48przydałoby się i fajnie by było gdyby ktoś taki stworzył.

6:53No ale niestety.

6:56Te elementy trzeba po prostu ręcznie ręcznie usunąć.

7:02OK.

7:03No i upewnijmy się, czy są jeszcze jakieś dodatkowe grupy.

7:06Widzimy, że są.

7:07Czyli wszystkie te kaskadowo ułożone grupy numer 1.

7:11zaznaczam z klawiszem Command i jest zazwyczaj mniej.

7:23Edit albo Backspace.

7:25No i wszystko załatwione i ta kompozycja jest przygotowana już do animacji.

7:30Czym naturalnie zajmiemy się w lekcji następnej.

7:34Zapisz zmiany koniecznie i do usłyszenia!