Adobe XD: Sekcje z partnerami i FAQ

CC 2020+

0:00Cześć Witaj w kolejnej lekcji w której

0:02przygotujemy najpierw sekcję z typami naszych partnerów.

0:05Umieszczenie logotypu na play out.

0:07Ale skorzystamy z elementu który już mamy

0:09czyli z tego tła białego tła z cieniem i zrobię to w taki nieregularny sposób tzn.

0:17Przykładowo pierwsze logo umieszcza sobie tutaj następnie zrobimy taki lay out Great

0:22który później będzie można odtworzyć w CSS i na którym będą nieregularnie rozłożone

0:28kafelki z logo typami różnych branż z którymi współpracujemy.

0:32Możemy np. wysunąć trochę do góry.

0:35Zrobimy sobie kolejny który

0:37będzie wyglądał w ten sposób może go trochę zmniejszymy

0:41za to zrobimy większe trochę ten znów go kopiuje w to miejsce.

0:47Może zróbmy jeszcze jeden tutaj.

0:50I podejrzenie to bez lay out gra wygląda OK.

0:54Natomiast cienie są trochę zbyt mocne jak

0:56na małe odległości odstępy pomiędzy tymi elementami.

0:58Więc to co mogę zrobić to np.

1:00zmniejszyć trochę cień powiedzmy do 6 i 25 zobaczymy.

1:05Myślę że jest trochę lepiej ale możemy jeszcze zmniejszyć jego opaski odrobinę.

1:10No i teraz spróbujmy znaleźć logo logotyp które umieścił tutaj oczywiście już sporo

1:16ich zrobiliśmy w jednej z poprzednich lekcji więc możesz wykorzystać te które

1:20zrobiłaś które udało się odtworzyć albo te z logo Dust.

1:24Ewentualnie możemy spróbować sprawdzić

1:26jeden z plastików który dodam teraz i flagi.

1:31Szukajmy Go może znajdę.

1:33Logo to jest logo wybieram polecenie

1:37Instal i teraz już w genach mam coś takiego jak logo to co zrobię to zaznacza

1:41wszystkie kształty i powiela je w ten sposób mam te kształty zaznaczone

1:45i mogę teraz wybrać logo i flagę Black logotyp czyli użyć czarnych logotypu.

1:51Jeżeli te logo mi się nie podobają mogę

1:53jeszcze raz to zrobić zawsze Black logotyp i w ten sposób generować sobie kolejne

1:59różne logo które teraz mogę chwycić i po prostu nawet wszystkie może naraz przez

2:05celujemy na początek żeby były trochę mniejsze.

2:08Ok.

2:10Teraz próbujemy je wrzucać do odpowiednich

2:12kafelki upewnij się że są na górze w stosie warstw.

2:17I teraz jeszcze we właściwe miejsce czyli np.

2:21to logo mogłoby w miarę fajnie pasować

2:23tutaj zmniejsza mnie dopasowuje umieszczamy w

2:27ten sposób kolejne logo jest kwadratowe więc mogliby się umieścić np.

2:32w tym dużym kwadratowym kafelki.

2:35Tu może trochę zmniejszymy aby się upewnić że jest na środku po

2:38prostu linie pomocnicze pomagają ale mogę też zaznaczyć oba te kształty i oczywiście

2:43to wyrównać do środka następne logo które mamy

2:47powiększy to trochę ale też jest kwadratowe więc mniejszy jest mniejszy w

2:52całości i umieść w kolejnym kwadratowym kafelki który mamy tutaj OK teraz kolejny

2:57kształt najpierw go powiększyły tak żeby się ładnie malował.

3:01Teraz mogę już zmniejszyć z szlify i umieścić w odpowiednim miejscu i jeszcze

3:08trochę mniejsze super kolejne logo spróbujmy je dopasować.

3:13Jeśli nam się to logo jakoś niespecjalnie

3:14podoba albo nie możemy sobie z nimi do końca poradzić.

3:17No to po prostu klikamy jeszcze raz

3:20logo i patrzymy jakie jest nam potrzebne w tym przypadku.

3:23Mamy dwa podłużne potrzebujemy właśnie

3:26jedno kwadratowe więc jest OK trochę jest mniejsze.

3:31Kolejna to lider umieścił w tym miejscu.

3:36No i jeszcze mamy też możemy je zmienić na przykład na jakieś inne.

3:40To wygląda całkiem nieźle

3:42pod warunkiem że będzie dużo mniejsze i chyba rzeczywiście trochę zmniejszamy logo

3:48możemy albo zaznaczać i zobaczyć jak będą optymalnie pasowały.

3:53Teraz są zbyt nieco zbyt prominentny więc

3:57można by było zaznaczać je i fajnym skrótem do zmiany opasek czyli tego

4:03przesunięcia tego suwaka przez uroczystości.

4:05Są skróty klawiatur owe które możemy

4:07wcisnąć po prostu na klawiaturze numerycznych.

4:09Jeżeli istniejemy np.

4:105 to będziemy mieli wszędzie opaski od 50 proc.

4:13Jeśli dziś nie 8 będziemy mieli 80 proc.

4:16a jeżeli szybko dwa klawisze czyli 4 5 na przykład będziemy mieli 45.

4:20Ja tutaj sobie zrobię np.

4:23te 75 i teraz wygląda to całkiem nieźle

4:27no to mamy już gotową tą sekcję i udało nam się bez wychodzenia kiedyś do

4:30przeglądarki i ściągania jakichś logo i zastanawiania się czy możemy w ogóle ich

4:34użyć wypełnić to w miarę przyzwoitym i danymi które prezentują następna sekcja

4:39którą zrobimy ta sekcja czyli najczęściej zadawane pytania.

4:43Mogę wpisać efektu i flagi Panthers albo z Google shit albo po prostu

4:48wpisać teraz jeszcze całe Art Board pomoże jeśli chodzi o wysokość przez dwa.

4:53Po to żebym miał tutaj zdecydowanie więcej miejsca i mógł sobie wygodnie pracować.

4:57Wracam do sekcji i będę chciał użyć np.

5:01tego kształtu aby znowu za modelowanie jakieś pytania.

5:05Teraz leje od GRID bo on nam pomoże w tym żeby zrobić element który powielane

5:10dwukrotnie dokładnie ładnie wypełni na szerokość leja.

5:12Ale tego drugiego na razie nie będę potrzebował zaraz powiem ci dlaczego.

5:15Upewnij się tylko że wysokość tego elementu ładnie nam tutaj

5:19siedzi na mikro grodzie i ma dokładnie 100 pikseli wysokości.

5:24Teraz chciałbym skorzystać z tego stylu a tego kroju pisma i nie jest on jeszcze

5:29dodany do setów więc mogę przy okazji go sobie dodać mogę powiedzieć że jest to

5:33head AIR 2 i stylami możemy zarządzać w taki sposób że przenosimy je np.

5:39pod HDR pierwszy żeby to było dobrze zorganizowane teraz

5:42umieścić to też odpowiednio i też postaram się od razu tym zarządzić

5:47na robicie wycenę w pionie w kontekście tego elementu

5:52i umieszcza w ten sposób na mikro Blidzie żeby miał właściwy odstęp a następnie

5:58skorzystam jeszcze ze strzałki która chyba ma w menu zrobioną dokładnie mogę wybrać

6:04matka aby z niej stworzyć komponent nazwać go odpowiednio np.

6:08. I teraz będę mógł w dowolnym miejscu

6:11skorzystać z tego elementu strzałki się tutaj mogę wybrać Command 3.

6:16Zaznaczenie się ładnie z tego elementu i w ten sam sposób

6:20staram się umieścić wyrównać oczywiście w pionie żeby było w centrum i umieścić cię

6:25w podobnym odstępie tutaj co jest ten tekst w porządku.

6:29Można powiedzieć że mam jakiś szablon który mogę teraz powiesić.

6:32Więc spróbujmy zaznaczyć cały ten.

6:35Wszystkie te elementy i mógłbym z grupą z pomocą komend G ale mogę w zasadzie od

6:39razu stworzyć z tego komponent z pomocą Antka.

6:41Dlaczego uważam że tutaj komponent będzie lepszy dlatego że m.in. będziemy mieli np.

6:45stan rozwinięty i rozwinięty i łatwo to zrobić na komponent.

6:49Więc będę miesza z orbit GRID a ale warto.

6:52Właśnie przed stworzeniem Rapid GRID da

6:54zrobić sobie z tego komponent żeby po wyjściu z grilla też mieć komponenty więc

6:58Command ka tworzy komponent powiem że jest to.

7:03A następnie będę mógł z pomocą Rapid GRID Command r publikować ETA pokaż maleje.

7:08Od teraz stosujemy jeszcze odstępy tak żeby ładnie to się działo na siatce.

7:13Teraz tworzymy jeszcze może dwie kopie.

7:16Dbamy o to żeby odstępy pionowe też były w porządku.

7:19No i w takiej sytuacji możemy już teraz zgrupowań Command Shift g i zobaczyć teraz

7:25powstałymi powstał Master komponent i instalacja komponentu.

7:29Te które są niepotrzebne oczywiście mogę zaznaczyć i usunąć

7:32wyłącz ale ja GRID może zrobię to trochę nieregularnie zostaje w ten sposób.

7:36No i teraz gdybym miał zastawione Rapid GRID mógłbym po prostu z komendy miejskiej

7:40w tym zaznaczyć wszystkie pola tekstowe i wypełnić je

7:43treścią którą miałem przygotowaną flagi na szkice następnie Public link.

7:48Mamy tutaj cały czas zapamiętany ten link

7:49i taką sekcję zwłaszcza z którą mogę zastosować niestety w przypadku

7:53komponentów to nie zadziała przynajmniej jeszcze może przetestowania swojej wersji

7:56xD A może już to poprawili i będziemy musieli to po prostu przerzucić

8:00ręcznie ale to nie jest żaden problem bo dosłownie zajmie nam kilka sekund.

8:04Jeśli chodzi o Master komponent oczywiście

8:05wszystkie instancje dziedziczą ale kiedy zmienimy tekst na instancji no to już

8:11zostaje on właściwie dla tej konkretnej instancji możemy napisać sobie instancja

8:15właśnie w ten sposób że modyfikuje jej dowolne właściwości.

8:18Przypominam w Libii gdzie można tylko tekst i obrazki wpisywać w instancjach

8:23komponentów będziemy mogli wszystko włącznie z kolorami itd.

8:26Więc szybko sobie rzuciłem te pytania i

8:28teraz jaka jest zaleta komponentów które stworzyliśmy.

8:31M.in. to że jeśli będę zmieniał coś w Master komponentu to będzie zmieniać się

8:34wszędzie ale poza tym możemy też przejść do Master komponentu i stworzyć sobie

8:39Stany czyli obok The World State możemy kliknąć i stworzyć nowy stan.

8:43I będzie to stan another.

8:46Będziemy go pokazywać po kliknięciu na

8:48takie pytanie będziemy musieli teraz w tym stanie za modelowa rozwiniętą odpowiedź

8:52zanim to zrobię zrobię sobie porządek jak zwykle z komputerami.

8:55Czyli mogę zrobić Command X wycina ten komponent Master i wrzucam go sobie do

9:01sekcji komponenty tutaj właśnie chcę mieć wszystkie ma stery

9:04natomiast tu po prostu powiela sobie jego instancje i wrzucają w ten sposób czyli

9:09mamy same instancje tutaj a tutaj będzie Master komponent Master komponentu.

9:14Możemy z tego The Street przenieść się

9:16dostaną szansę a następnie zaprojektować wygląd.

9:20Takiej odpowiedzi możemy rozwinąć sobie to

9:22teraz na klawiaturze rysuje ramkę tekstową.

9:24Mniej więcej w ten sposób a następnie wpisuje do niej cokolwiek pisałem jakiś.

9:29Wygląda na to że biały tekst zmienił jego kolor po to żeby nie zniknęła.

9:33Przy okazji mogę zaznaczyć ten element i wrzucić do setów kolor ten nasz domyślny

9:40granatowe i teraz chciałbym zaznaczyć ramkę tekstową oraz ten element i ten

9:47element chciałbym zmienić jego kolor na białe wybieram kolor biały.

9:51Tutaj akurat Border będę musiał zmienić na białe natomiast wypełnienie tego

9:56tła wybiorę sobie na kolor który już mam w pakiecie czyli granatowy.

10:01Teraz będę chciał skorzystać rzeczywiście tutaj chodziło mi o tekst Mode tyle że

10:05właśnie chciałem żeby był biały więc jeszcze upewnił się że te zmiany zostaną

10:09zastosowane i wypełnia ten tekst z pomocą paulinów Public link z Google shit.

10:14I tutaj znajduje się jakaś Przykładowa treść odpowiedzi Ansar wybieram plik.

10:18No i jest OK.

10:20Teraz ramka tekstową dwukrotny klik na dopasowuje wysokość tego elementu.

10:25Skoro już to jest komponent to staramy się

10:28żeby był porządnie zrobiony możemy go zaznaczyć Command 3 następnie Command

10:32cudzysłów i ustawić wszystko odpowiednio na grę.

10:36Czyli jeśli chodzi o tekst możemy ustawić go w ten sposób.

10:40Tutaj mamy 40 punktów odstępu tutaj zrobimy też 40 punktów.

10:45Od mniej więcej tej ramki tekstowej mając zaznaczone taką ramkę tekstową możemy

10:50sprawdzić te odległości przede wszystkim najpierw patrzymy na to żeby wyglądało to

10:53dobrze żeby linia po prostu grała i żeby było OK.

10:56W drugiej kolejności możemy zatem kliknąć i zobaczyć jakie są odstępy.

10:59Tutaj mamy 36 do 38.

11:01Tutaj 40 moglibyśmy zmienić tą ramkę w ten sposób już mamy prawie wszędzie 38.

11:06Też nie przejmujemy się tym aż tak bardzo

11:08żeby to było 38 a 39 tak naprawdę później w Development.

11:14Gdy będziemy to przekazywać po prostu ustawiamy parking dla całego tego

11:17kontenera na 38 i będzie naprawdę w porządku.

11:21Więc tutaj ważne żeby rozłożyć tę dobrze

11:23optycznie żeby rozłożyć to dobrze jeśli chodzi o tę odległość i z grubsza.

11:29I w tym momencie myślę że mamy kolejny

11:31komponent prawie przygotowano ostatnią rzeczą którą zwykle robię jest

11:35zastanowienie się jak taki komponent będzie się skandował możemy zobaczyć to

11:38teraz już z włączoną opcją Response Force czyli patrzymy jak to wygląda.

11:43No nie wygląda to zbyt dobrze co chcielibyśmy zgrupowań ze sobą.

11:47Chcielibyśmy żeby te dwa elementy przynajmniej poruszały się razem.

11:50Czyli może przeszkadzać w Anglii.

11:52Zaznaczam ramkę i jedną i drugą a

11:55następnie wybieram Command 2 po to żeby je zgrupowań.

11:58I teraz już przy skierowaniu tego będą te dwa elementy razem.

12:03Przy czym w tym momencie one zostają są ściągnięte do lewej górnej krawędzi.

12:08Ja natomiast chciałbym i łatwiej mi będzie

12:09zaznaczyć na warstwach znaczy po prostu całą grupę poza znaczeniem grupę upewnić

12:14się że jest ona nie przyciągnie do górnej krawędzi.

12:17Oznacza to lewa i prawa może nawet zostać

12:19teraz zobaczymy jak to będzie się zachowywać.

12:20I rzeczywiście jest w porządku jest zawsze na środku tak jak powinno być.

12:25Jeśli chodzi o strzałę czapkę to ona powinna być zawsze wyciągnięta.

12:30Ustawiamy sobie eliksir X chwyt i

12:31wyciągniemy ją zawsze do prawej górnej krawędzi.

12:34W ten sposób cały komponent jest

12:36przygotowany do tego listu Flisa jest i zachowuje się całkiem nieźle.

12:40Przy okazji jeśli przyszło Ci do głowy wcześniej że ten zabieg jeśli mamy taki

12:43nierówny można było ustawić go na 40 zgodnie z naszym gradem.

12:46Z pomocą tej opcji w sekcji leja Bing.

12:49Niestety ona nie jest dostępna dla

12:50komponentów które są trochę bardziej złożone.

12:52Tak to już jest xD trochę bardziej złożony komponent ponieważ posiada elementy które

12:57są obok siebie pod sobą już nie stanie dlatego dobrze jest tłem a co nie.

13:03W związku z tym ten link jest na takim

13:05komplecie niedostępny jeśli będzie kiedyś dostępny.

13:07No to jak najbardziej warto żebyś

13:09spróbował skorzystać z tego parkingu bo wtedy zapewnić sobie zawsze równe odstępy.

13:13To tyle w tej lekcji.

13:14Do usłyszenia już za chwilę.