Adobe XD: Zaawansowany Repeat Grid cz. 1

CC 2020+

0:00Cześć Witaj w kolejnej lekcji.

0:01Mam nadzieję że nie masz mi za złe że

0:02praca nad naszym autem nie postępują w jakimś zawrotnym tempie

0:06ale uwierz mi znając te metody które objaśnia będziesz mógł naprawdę bardzo

0:10szybko w rekordowym czasie tworzyć projekty xD chciałbym teraz trochę

0:15powiększyć te kafelki dlatego że pozwala na to lekki oddech który zrobiliśmy dzięki

0:20przesunięciu całego menu i wszystkiego co jest na górę.

0:23Można by było jeszcze skonfrontować to z

0:25tym naszym klimatem i sama nie chciałbym ciągnąć do tej strony.

0:30Nie można było umieścić trochę wyżej

0:32natomiast tę całość rzeczywiście chce mieć trochę odsunięte czyli może umieścić np.

0:38tutaj.

0:39Chcę żeby nie było to idealnie równo z logo i z kawałkami które będą pod spodem.

0:45Możemy już na moment wyłączyć i sprawdzę jeszcze jak to się rozkłada

0:49na play out gra idzie wygląda całkiem spoko tutaj mamy ten element na trzy

0:54kolumny i auto jeśli chodzi o guzik to jeszcze upewnij się tylko że on jest

0:58wyrównany wyłączy na moment play out że jest wyrównany że jest w jednej linii z

1:03napisami które mamy jest OK takie rzeczy łatwiej też podejrzeć na grę.

1:08Tutaj wszystko wygląda w porządku no i

1:10teraz jest ok jeśli zaznacza jeden z kafelki bo w

1:14zasadzie trzy pozostałe mi nie będą potrzebne a będę pracował na tym jednym.

1:17Zobaczmy jak ten kawalek też się rozkłada

1:20na grę gdzie może umieścić go w ten sposób i zmieńmy jego wielkość na 140 pikseli.

1:26Upewnij się że wszystko jest ok jeśli

1:28chodzi o ten play out grid jest w porządku.

1:30No i teraz to co chciałbym zrobić to zmienić zaokrągleniu na np.

1:3512 pikseli zastosujemy takie zaokrąglone jak tutaj na przycisku.

1:38Chcę żeby to trochę wystarczało.

1:41Poniżej folderu dlatego żeby sygnalizowała że da się królować.

1:45Ale z drugiej strony żeby większość

1:46kontentu była powyżej to co się znajdzie tutaj

1:50to zaczerpnięte też najpierw stąd umieszcza się taką ramkę tekstową tutaj

1:55no i poniżej będę chciał mieć drugą bramkę tekstową.

1:57Mogę w zasadzie ją sobie pożyczyć z tego

2:00tekstu i skopiować i umieścić w tym miejscu a następnie

2:06dostosować te ustawienia tutaj myślę że będziemy potrzebowali jeszcze mniejszego

2:09tekstu czyli zamiast dwunastu wybierzemy 10.

2:13A tutaj z kolei będę chciał trochę większy

2:15tekst czyli wybiorę wielkość 20 wyrównany to do lewej krawędzi

2:21i będę przygotowywał takie podwaliny pod komponent który tworzę z tego pierwszego

2:26kawałka tylko po necie chciałbym aby jeszcze znalazła się ikona zajmie ostatnie

2:31to jeszcze przejdę do właściwości tła i wybiorę tutaj Shadow wybiera sobie na

2:36przykład 15 i 35 Blair czyli taki cień który chciałbym

2:42jeszcze trochę zmniejszyć jeśli chodzi o pass it.

2:45W ten sposób taki delikatny cienie pod tym kawałkiem sam Biały kawalek wyróżnia się

2:50trochę z tła ale niedostatecznie więc możemy jeszcze wróci do niego fajny cień.

2:53No i możemy teraz zaprojektować to pod RIP

2:57GRID moglibyśmy właśnie skorzystać z Rapid GRID.

3:00I mam przygotowane ikonę w folderze

3:03do tej akcji które są w grze i również mam do nich warianty PNG.

3:08Chciałem Ci pokazać dwie wersje to co moglibyśmy zrobić to nasz kibicować.

3:12Przejdźmy do palety warstw to tutaj taki oto np.

3:17place Holder na te ikonki kwadracie mogę na razie zostawię jego Border i

3:22wypełnienie żebyś zobaczył dokładnie gdzie on jest teraz.

3:25Zaznaczam całość mogę to zgrupowanie

3:27będzie mi łatwiej tym pracować będę miał jedną grupę to powiedzmy będzie

3:32i teraz to co robię to korzystam z Rapid grid czyli dostałem sobie Rapid GRID.

3:37Włączam jeszcze leje out żeby wszystko ładnie widział.

3:40Włączam tutaj cztery takie kafelki i ustawiamy dla nich margines takie żeby się

3:44ładnie zmieściły i ustawiły na tym play out gdzie w ten sposób.

3:51I teraz co nam daje Ten Rapid Grid który stworzyliśmy daje nam m.in. to że teraz

3:56jeśli pójdziemy do plików źródłowych do tej lekcji i np.

4:00przejdziemy do text to mam tutaj pliki do hejterów a także pliki zawartości.

4:06Tutaj są Here a tutaj będziemy mieli to co znajduje się w karcie.

4:09Jeśli rozdzielić to sami czyli każdy.

4:12Każda treść każdy tekst będzie w nowej linii to możesz przerzucić to po prostu na

4:16odpowiednie miejsce i zostanie zastosowane do wszystkich elementów Rapid Guide się

4:21oczywiście nie wystarczy jak nie to będzie powielane.

4:24Teraz wejdziemy do dowolnego w zasadzie elementu i zmienimy to pole tekstowe tak

4:28aby było to pole które może którego rozmiar możemy ustalić.

4:33No i powiększyć dla wszystkich elementów

4:35jak widzisz teraz wygląda to zdecydowanie lepiej.

4:38To samo zrobili byśmy dla kart Henderson

4:41czyli przerzucili w ten sposób zostały też automatycznie

4:44wypełnione dlatego że są znowu w nowej linii.

4:48No i moglibyśmy podobną sztuczkę

4:50wykorzystać w przypadku obrazków czy ikon które tutaj się znajdują.

4:55Wróćmy więc do katalogu z plikami źródłowym dla tej lekcji i mam tutaj

4:58folder account i w tym folderze znajdują się pliki ale także jest tutaj katalog z

5:03BIG mapami czyli plikami png i teraz magiczną właściwością orbit.

5:07Jeśli chodzi o współpracę z mapami czy to są JPG czy Belgii jest to że można np.

5:11zaznaczyć ich wiele.

5:13Mógłbyś zaznaczyć to obrazków a następnie

5:15przerzucić je w określone miejsce opuścić i zostaną one kolejne pliki

5:20ustawione w kolejne elementy instancje w rep.

5:23Gdzie w naszym przypadku.

5:24Dlaczego to nie zadziała z dwóch powodów.

5:26Po pierwsze dlatego że chcemy mieć wektory

5:28dla ikon ale drugi powód jest taki że ikony są różnych rozmiarów a

5:33ten kontener do którego mamy ma jednakowe rozmiary.

5:37Czy moglibyśmy to naprawić w ramach Rapid GRID.

5:40Moglibyśmy spróbować wrzucić po prostu ten

5:42komputer do tej pierwszej instancji ale zauważ że on wtedy jest taką domeną i

5:47kłopot z komputerem i tą ikonkę nie bardzo możemy zmienić.

5:51Czyli jakby tutaj nie możemy je łatwo

5:53odmienić bo znowu mamy rozmiar który trzeba by było dostosować.

5:56Teraz zmiana tę ikonę powoduje zmianę wszystkich innych.

5:59No i w praktyce w Rapid gdzie rzeczywiście będzie to bardzo trudne.

6:03Co prawda możemy zmieniać pojedyncze

6:05obrazki ale warunek jest taki żeby miały one jednolite rozmiary.

6:10No dobrze a jak ma tutaj się sprawa z

6:12plikami S V g które tak naprawdę są nam potrzebne.

6:15Otóż wielu plików

6:17na razie przynajmniej nie można xD po prostu tak przeciągnąć tak samo.

6:21Mimo że przeciągają wszystkie to do Rapid wstawi się tylko jeden.

6:24Więc to po prostu nie działa to działa w przypadku bit map.

6:28Co moglibyśmy zrobić możemy zaznaczyć taki

6:30plik wcisnąć Command chce wejść do środka do tej kartki i wcisnąć

6:35upewnić się że jesteśmy w xD i wcisnąć Command V w ten sposób.

6:39Natomiast zastąpienie tych kolejnych

6:41instancji innymi ikonami nie będzie już aż takie proste.

6:45Natomiast my mamy na to pewien sposób.

6:47Ten sposób jest związane bo pokaże ci jak

6:50mogłoby to wyglądać gdybyśmy próbowali coś przeciągnąć jedną ikonę na drugą.

6:54Zupełnie nie jest to efekt o który nam chodziło.

6:57Natomiast tak jak wspomniałem możemy rzeczywiście to zrobić pod warunkiem że

7:01stworzymy sobie wewnątrz Rapid GRID a komponenty jeśli teraz zaznacza taką ikonę

7:07a następnie wybiorę Command a czyli stworzy z nich komponent

7:10to okaże się teraz że taki komponent znajduje się tutaj jako

7:16pojedyncze instancje w tych elementach Rapid GRID

7:21a komponenty i ich instancje mają to do siebie trafiają oczywiście tutaj ale mają

7:25to do siebie że można je złapać po odmienić.

7:30I wtedy Adobe ich nie bierze pod uwagę rozmiaru.

7:33Zdaję sobie sprawę że możesz już w tym

7:34momencie nic nie rozumieć więc najłatwiej jest to pokazać w praktyce.

7:38Wezmę sobie wszystkie te elementy i po prostu przerzuca je do xD w ten sposób

7:42komputer już mam zrobiony z niego komponent więc mogę go usunąć.

7:46Co oznacza kolejny element Antka i zrobił się kolejny komponent.

7:50Co znaczy następne Antka mam następny komponent Save Box i następne Antka.

7:55Mam smartfona mogę równie dobrze już sobie to wyrzucić Master komponenty.

8:00No właśnie gdzie teraz są Master

8:01komponenty to też jest ciekawa sprawa jeśli na prawym przyciskiem myszy na

8:04smartfon wybiorę polecenie Epic Master komponent okaże się że

8:08on gdzieś tam jest to znaczy że Adobe ich zdejmij teraz go przywołał z

8:12jakiejś pamięci podręcznej i po prostu utworzył go tutaj wstawił.

8:16Czyli generalnie nie zginął nawet gdybym go w ten sposób usunął.

8:19Naturalnie tak jak wspomniałem to Master

8:20komponenty zdecydowanie lepiej jest trzymać po prostu wszystkie w jednej

8:24sekcji komponenty i właśnie stąd ewentualnie później edytować.

8:28Natomiast to co jest dla nas najważniejsze

8:30teraz to to że jeśli ja zaznaczył sobie taki komponent

8:33widział zieloną ramkę to mogę teraz przejść do panelu as a następnie wyciągnąć

8:38sobie inne komponenty i przeciągnąć go na ten komponent on zostanie automatycznie

8:42odmieniony i nieważne jaki będę miał rozmiar ten komponent będzie jak widzisz

8:47wyświetlany ikonkę jest wyświetlana prawidłowo.

8:50Jaki jest problem.

8:51Jest dalej w tym że jesteśmy w Rapid gdzie Rapid GRID dowolny element jeśli zastąpi.

8:57I nie jest on albo tekstem albo bity mapą czyli pędem albo JPG em.

9:02To odmienia się we wszystkich elementach.

9:04Dwie rzeczy które w Rapid się mogą być różne.

9:08To są właśnie jpg png czyli grafiki bit masowe i teksty natomiast grafiki S V

9:14przynajmniej na razie w związku z tym nadal mamy problem ten

9:18problem rozwiąże zaginięcie tego jeszcze bardziej w komponenty tzn.

9:23Możemy teraz pokusić się o to aby cały taki kafelki przejdźmy do panelu warstw

9:29cały ten kawalek był osobnym komponentu czyli wszystkie te elementy.

9:34Ja mogę teraz zgrupowań sobie grupa i np.

9:38nazwać go singlu kart a następnie stworzyć

9:41w całości komponent Command a teraz się okazuje że Adobe xD takie skomplikowanie

9:46tej struktury czyli jeżdżenie jednego komponentu w drugim i to dopiero w Rapid

9:51powoduje że będziemy mogli bezpiecznie zmieniać sobie komponenty które znajdują

9:55się w środku czyli możemy teraz przejść do panelu Asseco i np.

9:58zaznaczyć komponent marketing automatyczny a następnie przerzucić na tę robotę ARM.

10:03I to się zmieni

10:04następnie model development wybierzemy sobie smartfona i blok czy Development

10:09wybierzemy ostatnią ikonkę którą mamy czyli Save Box.

10:12No i teraz połączyć

10:13wszystkie rzeczy które chcieliśmy mieć czyli po pierwsze mamy wektory.

10:17Po drugie możemy bez problemu sobie

10:19zmieniać instancje jest łapać instancje za pomocą komponentów.

10:23No i po trzecie mamy zachowanego Rapid GRID.

10:27No i wszystkie te

10:28elementy mają jakieś swoje magiczne moce to znaczy że teraz będziemy mieli np.

10:32możliwość wyciągnięcia z pomocą RIP Green

10:34Day jeszcze większej ilości tych kafelki i zrobienia tego w ten sposób

10:38ale jednocześnie możemy stworzyć z dowolnego elementu który normalnie jest

10:42nie odmieniony w Rapid gdzie kolejny komponent i wtedy pod zmieniać go na

10:45zasadzie słabo mógłbym oczywiście od razu Ci pokazać tworzenie tego Master

10:49komponentu wewnątrz Rapid Grid i jeszcze zagęszczenie tej ikony

10:53ale myślę że nie byłoby to aż tak zrozumiałe starają się odwrócić cały ten

10:56proces i wyjść od tego jak Rapid GRID został zaprojektowany.

11:00Co można w nim mieć a później jak można trochę spakować jego działanie i

11:03dostosować je do naszych konkretnych potrzeb.

11:05Ja akurat z tego korzystam bardzo często żeby umieszczać komponenty i

11:09komponenty wewnątrz Rapid Trident i wiąże się z tym jeszcze jedna sztuczka którą

11:13można dzięki temu osiągnąć pokazać ją w kolejnej lekcji.

11:16Zatem do usłyszenia.