Projektuj Animacje UI z Lottie Files i After Effects: Częste błędy w przygotowaniu plików

0:00Jak wspomniałem poprzednio, chciałbym teraz pokazać Ci

0:03istotną rzecz, która wpływa na to, jak After Effects odczytuje pliki

0:09Illustratora.

0:11Mimo, że są to, że oba narzędzia są narzędziami ze stajni Adobe, to oczywiście

0:15współpracują ze sobą bardzo płynnie i możemy nadpisać jakieś zmiany w

0:20Illustratora, a After wykryje te zmiany i sam update plik.

0:25Natomiast jeżeli zamienimy taką warstwę z Illustratora na

0:32warstwę lipową w papierze, to nie zawsze mamy gwarancję,

0:37że zostanie ona dobrze odwzorowana.

0:40Zwłaszcza jeżeli taki element wektorowy w ilustratorzy ma

0:45jakąś transparentność albo tryb mieszania.

0:50Zwróćmy uwagę na ten element.

0:54On jest właśnie transparentny.

0:56Kiedy sobie na niego klikniemy.

1:03To on domyślnie ma kolor czarny, ale posiada swoją transparentność.

1:10I teraz musimy pozbyć się tej transparentności, bo niestety

1:15w momencie kiedy przekonwertować mamy to na

1:19ścieżkę wektorową to będziemy mieli masę tutaj

1:22niepotrzebnych elementów, które będziemy musieli usunąć, co oczywiście wpłynie

1:27na czas pracy jaki musimy poświęcić na ten projekt.

1:32I teraz jak możemy?

1:36Jak możemy to zrobić?

1:39Potrzebny nam jest do tego panel właściwości, który w zasadzie jest tutaj,

1:42ale na tym w tym panelu nie ma żadnych informacji o transparentności.

1:47Jest oczywiście Opacity, ale jest ustawiony na zwróćmy uwagę 100%.

1:52Jeżeli natomiast przejdziemy tutaj do tej do tego przycisku z trzema ikonkami,

1:59otworzymy sobie panel Appearance.

2:01I tutaj widzimy, że fill.

2:02W momencie kiedy rozwiniemy Fill, to faktycznie jest on.

2:07Ma on opacity ustawione na 25%.

2:12Tak więc możemy tutaj zaznaczyć ten element, a następnie wybrać sobie Select

2:20sam i wybierzemy Appearance a Tribute.

2:25I w tym momencie.

2:29Zostały zaznaczone wszystkie elementy, które posiadają takie same właściwości

2:34w panelu Appearance, a w zasadzie w naszym przypadku jest tutaj jeden taki.

2:39Ale jeżeli np.

2:40zaznaczymy sobie już może odblokujemy sobie warstwę ten element

2:45to też widzimy tutaj opacity ustawione na 10%.

2:49Kolor wypełnienia jest biały, ale on jest taki właśnie tutaj wyrażony, ponieważ jest

2:54transparentność dużo mniejsza, 10 procentowa.

2:57Więc znowu wybierzmy może.

3:02Więc znowu wybierzmy może Select Sejm, a następnie Appearance Ad

3:06Tribute i widzimy, że obiektów o takim samym wypełnieniu i z

3:11taką samą wartością Opacity jest więcej.

3:14Więc to opacity musimy sobie ustawić na 100%.

3:19Natomiast ten kolor wypełnienia on musi być ciemniejszy.

3:23Czyli np. wybierzmy z panelu tło.

3:25Czas może właśnie taki będzie powinien być odpowiedni moim zdaniem.

3:30I tutaj jeszcze mamy to wypełnienie, które ustawione jest na 25%.

3:36Tutaj oczywiście musimy mieć 100. Nie ma wyjścia.

3:40Natomiast to musi być jaśniejszy kolor wypełnienia, ale z

3:45opacity ustawionym na 100.

3:49I teraz będzie to działać lepiej.

3:50Natomiast mam tutaj jeszcze jedną rzecz, na którą warto zwrócić uwagę.

3:54Ten przycisk ma tutaj obrys w tym miejscu, który jest obrysem gradientu.

4:02Widzimy, że jeśli przejdziemy do opcji gradientu

4:06opcji gradientu, to To on jest tutaj transparentny, więc

4:11to też może wpłynąć negatywnie na to, jak zostanie odczytany ten plik.

4:17Ja staram się unikać właśnie takich elementów transparentnych.

4:23Ponieważ źle to później w tym after wygląda i ja to symuluje.

4:28Pokażę Ci jak taki przycisk będzie wyglądał, dobrze, jeśli

4:33zostawimy tutaj transparentności.

4:35Natomiast ja wolałbym, żeby jednak ten obrys był

4:39jednolity, czyli na przykład powiedzmy taki albo może troszeczkę ciemniejszy.

4:45Może w ten sposób tak, o teraz będzie, będzie to wyglądać znacznie

4:50lepiej w aferze i to samo zróbmy z tym obrysem.

4:55Możemy wybrać np.

4:57Select Sejm, a następnie Strong color.

5:02No i zostały zaznaczone wszystkie obiekty z takim samym właśnie obrysem.

5:07Wybierzmy dla tych obiektów ciemniejszy obrys.

5:11I na pewno będzie to wyglądać lepiej.

5:13Może dla tego obiektu zostawmy sobie taki obrys oryginalny, żeby pokazać jak później

5:18after After poradzi sobie z tłumaczeniem tego obrysu,

5:23a zapewniam Cię, że sobie nie poradzi.

5:26No i cóż, wydaje się, że reszta chyba jest w porządku.

5:29Zobaczmy jeszcze ten background.

5:30Czy on tutaj tak, Opacity.

5:34Grant jest ustawiony na 95, więc ustawmy na sobie na 100 koniecznie.

5:43OK.

5:48Mamy tutaj też jakiś obrys transparentny, więc też spróbujmy

5:54upewnić się, że jest on raczej nie transparentny, tylko jednolity właśnie z.

6:01Opacity ustawionym na 100.

6:03Jest to problematyczne czasami, ale jest konieczne do tego, żebyśmy właśnie

6:09sprawnie później pracowali sobie w aplikacji Adobe After Effects.

6:13OK. I myślę, że możemy zapisać zmiany.

6:16Zobaczmy, czy tutaj jeszcze coś nam zostało.

6:18Tu jeszcze mamy stroik, taki właśnie transparentny,

6:23więc zmienimy go sobie w ten sposób i włączmy jeszcze.

6:36Task 5.

6:41OFF ok.

6:43I tu też mamy.

6:48Opacity ustawione na 10, więc może za pożyczymy sobie krople niż

6:53za pożyczymy sobie wypełnienie stąd i mamy też tutaj dodatkowy obrys.

7:00Który też jest transparentny.

7:02Jego kolor kroplą zapożyczyłem stąd.

7:07W porządku, te panele możemy sobie wyłączyć.

7:14Koniecznie zapisujemy zmiany.

7:16I teraz przechodzimy do aplikacji Adobe After Effects, gdzie zaczniemy?

7:21Zaczniemy projektować naszą animację tego panelu.