Adobe XD: Proste zastosowanie Repeat Grid

CC 2020+

0:00Poprzedniej lekcji obiecałem że pokażę

0:01fajną sztuczkę która pozwoli nam szybko stworzyć menu i pokaże i zaznaczyć pole

0:06tekstowe a mógłby to być dowolny inny element w Adobe xD i przejdziemy do sekcji

0:11Rapid grid czyli to jest taka funkcja która pozwoli nam powielać ten obiekt.

0:15Możesz też wcisnąć Commander to zobacz że

0:18zmienia się on w pewien sposób zmienił się również zmieniła się również ikonki w

0:21panelu warstw jeżeli klik na końcu zobaczysz że jest dostępne ten tekst to

0:26pole tekstowe które się znajduje poniżej w Rapid GRID 1.

0:30A to co mogę zrobić to teraz łapać albo za dolną kulę albo za tą z prawej strony i

0:34zacząć sobie powielać ten element ja w i będę miał cztery elementy więc wystarczy.

0:39I teraz mogę najechać pomiędzy te elementy.

0:41W zasadzie pomiędzy dowolny z nich nie

0:43trzymam dodatkowo żadnego przycisku nic takiego.

0:46I mogę sobie zmienić

0:49to jak wyglądają odstępy pomiędzy każdym z tych elementów więc zobacz tu

0:53automatycznie nie pojawia się ileś pól tekstowych tylko mam jedno pole tekstowe

0:58które jest powielane w tym lepiej gdzie i teraz jak działa ten RIP.

1:02To jest takie można powiedzieć dosyć szczególne jego zastosowanie będziemy

1:06korzystali z wielu innych bardziej zaawansowanych

1:08ale w każdym przypadku zasada i mechanizm działania jest taki sam.

1:11Mianowicie mamy taki master obiekt to jest

1:14warstwa czy grupa coś nadrzędnego co jest tutaj dostępne w Libii.

1:18Jak widzisz te pozostałe warstwy na razie nie są dostępne.

1:21A to dlatego że są po prostu takimi

1:23wirtualnymi ikonami tego Master i teraz Master ma swoje różne parametry czyli np.

1:28wielkość tekstu kolor itd.

1:30Zmiana prawie wszystkich tych parametrów powoduje zmianę tych samych parametrów na

1:34instancjach więc jak widzisz zmiany wielkości czy kroju pisma.

1:38Jeżeli ja zmienię sobie na przykład na medium mają skutek co do wszystkich klonów

1:42o ile pozostaje to cały czas w tym naszym Rapid.

1:46Jeśli zmienił kolor przykładowo na kolor zielony.

1:49Jak widzisz ma to odzwierciedlenie we wszystkich instancjach.

1:53Są jednak dwie takie rzeczy które możemy z

1:54powodzeniem zmieniać na każdej z instancji tak aby stała się unikalna.

1:58Pierwsza rzecz to obrazki ich na razie nie

2:00mamy a druga rzecz to treści pól tekstowych i możemy w związku z tym

2:04przejść do drugiego pola a następnie dwa razy kliknąć i wpisać tutaj np.

2:08to już jest nazwa naszego startu a po

2:11naszej firmy którą tworzymy i w ten sposób napisałem to pole.

2:16Następnie mamy zakładkę Services ja ją

2:18zmienię na blogu i kolejna ostatnia rzecz to będzie kłopot.

2:24OK teraz wyjdziemy na chwilę od kliknij my

2:26się z tego i zobaczmy że cały PIT GRID nam się trochę posypał.

2:29Dlaczego.

2:29Bo oczekiwaliśmy aby odstępy pomiędzy elementami były równe.

2:33Tymczasem niestety Adobe działa w ten

2:35sposób że mimo że mamy dobrze stworzoną ramkę tekstową ponieważ jest to tekst

2:40point czyli de facto każdy z tych elementów się

2:43dostosować do szerokości ramki no i w samym Libicki jeśli go zaznacza

2:46tutaj margines które są ustawiane powinny być ustawione o szerokości ramki.

2:51Niestety tak nie jest być może Adobe poprawi.

2:54Myślę że to jest trochę błąd ponieważ wszystko jest brane z tego.

2:57Z tej szerokości pierwszego elementu i de

3:00facto nawet łatwo to zaobserwować na blogu że nie do końca ramki tekstowej a od

3:04szerokości tego pierwszego Master elementu jest liczony ten margines.

3:09Jak możemy sobie z tym poradzić.

3:11Możemy zaznaczyć dowolny element i

3:13spróbować wygenerować ten tekst jest już zdecydowanie lepiej teraz gdybyśmy

3:17trochę zmniejszyli sobie margines ja tutaj jeszcze dorzuca znak zapytania.

3:22Juz i w tym momencie gdy jest to dane

3:24można powiedzieć że działa to trochę lepiej.

3:27Natomiast często rzeczywiście będzie tak

3:29że nie jest to idealne w tym przypadku ja wolałbym nieco powiększyć rozmiar epidemii

3:33po to żeby się zmieścił jak gwałt ale chciałbym żeby margines od tej

3:39ostatniej litery do pierwszej litery był stałe.

3:41W przypadku bloga tak nie jest.

3:43Nadal jest w centrum i zajmuje po prostu więcej miejsca.

3:46W związku z tym można powiedzieć że w tym

3:48przypadku Rapid GRID mi już się przydał i nie będę z niego więcej korzystał.

3:53I mogę to zgrupowanie.

3:54Jeżeli teraz grupuje czyli wybiera ang.

3:56group no to w tym momencie powinny zadziałać te zdrowo rozsądkowi zasady

4:00tutaj już na pierwszy rzut oka widać że ten odstęp jest inny niż ten odstęp.

4:05W związku z tym mogę teraz posłużyć się postępami czyli tym

4:10elementów o których już wspominałem i dystrybuowane to horyzont.

4:15I w tym momencie jest dopiero dokładnie tak jak chciałem.

4:18Można powiedzieć że w tym momencie Rapid

4:20GRID posłużył mi jako takie narzędzie proxy jako coś po drodze do osiągnięcia

4:24właściwego celu i efektu aniżeli cel sam w sobie zobacz że po zgrupowaniu takiego

4:29robili grilla z tej jednej warstwy zrobiły się już wszystkie warstwy więc teraz mogę

4:33osobno na nich pracować czyli technika pracy z Rapid GRID.

4:37Przy tego typu zabiegach przy tego typu

4:39elementach uważam że jest on bardzo pożyteczne ale do tego żeby szybko

4:43kibicować i rozpracować wiele elementów naraz z kopiowaniem i wklej a nie byłoby

4:48naprawdę trudno xD nie działa to jakoś super.

4:52Oczywiście możemy kopiować wciśnięty

4:54i ewentualnie z Shift mogę aplikować sobie daną warstwę czy obiekt.

5:00Linie mogę też użyć innego skrótu Command.

5:03Jak widzisz dopingową warstwę mogę ją teraz sobie wyciągnąć ale np.

5:08nie działa to tak jakbym tego oczekiwał że z autem i z Shift mogę przeciągnąć teraz

5:13Command D Każdy w odpowiednim miejscu tak jak np.

5:16ilustrator.

5:17Zawsze kopiuj wklej a dokładnie w to samo miejsce więc Rapid Grid ma tutaj naprawdę

5:21fajne zastosowanie pozwala łatwo powiedzieć sporo elementów.

5:24Dzięki temu możemy zobaczyć je w kontekście jak obok siebie wyglądały.

5:27Możemy zmienić teksty.

5:29No i w końcu możemy pracować na jednej

5:30instancji po to żeby widząc już te elementy obok siebie np.

5:33dostosować ich kolory czy rozmiary frontów żeby dobrze to wyglądało.

5:37W momencie gdy skończymy rok grupową możemy to zrobić z pomocą właśnie tego

5:41polecenia które jest tutaj albo wcisnąć Command Shift G żeby to zgrupowań.

5:46I wtedy mamy do dyspozycji już

5:47indywidualne warstwy wizualne elementy rzecz jasna warstwy.

5:51Możemy też edytować razem jeśli z ich mianem klikamy po to żeby zaznaczyć albo

5:56jeśli zaznaczyć iż wszystkie na panelu warstw zmiana koloru wypełnienia będzie

6:00naturalnie działać dla wszystkich tych warstw które zostały zaznaczone.

6:03Niemniej jednak wiele operacji dużo

6:05łatwiej jest zrobić na tym Rapid gdzie ja w kolejnych lekcjach będę pokazywał ci

6:09jeszcze bardziej zaawansowane zastosowania Light GRID.

6:12Będę też pokazywała jak z pomocą sztuczki z komponentów mi możemy napisać na

6:16instancjach wewnątrz Rapid GRID a nie tylko teksty i obrazki ale także np.

6:19kolory.

6:20Więc zrobimy to trochę bardziej zaawansowanej części.

6:23Na razie udało nam się stworzyć menu.

6:25Ja sobie jeszcze ten element po to żeby

6:28stworzyć tutaj numer telefonu mogę wpisać jakiś wymyślony numer telefonu i zacznijmy

6:33od tego a w kolejnej lekcji pracujemy menu i elementy graficzne oraz nasze logo.

6:37Do usłyszenia.