Adobe XD: Przygotowanie Artboardu

CC 2020+

0:00Cześć Witaj w kolejnej lekcji.

0:01Teraz klikamy na Art Board i upewnij się

0:03że ma on dobre ustawienia a także ustawia pewne linie które pomogą mi projektować.

0:08Przede wszystkim z kronik stawiam na werdykt i.

0:11Zwykle stawiam sobie na 750 czyli tworzę

0:15właśnie taki port gdzie będziemy projektować główną stronę.

0:18Na razie no i mamy lay out GRID mam ustawiony ja od Square GRID na 10 pikseli.

0:24Natomiast jeśli chodzi o leje out GRID to

0:27w zasadzie ja z niego praktycznie nie korzystam aczkolwiek może ci się przyda

0:31może też warto nauczyć się go dobrze ustawiać.

0:34W przypadku wariantu desktop owego zwykle korzystam z dwunastu kolumn.

0:38Dobrą praktyką w przypadku desktop owych jest pozostawienie marginesu takiego

0:43oddechu dla całej strony i od lewej i od prawej oraz od górnej krawędzi.

0:48Trochę inaczej będzie na ekranach

0:49mobilnych ale o tym powiemy we właściwym czasie.

0:52Natomiast tutaj chciałbym odstawić się od

0:53lewej i prawej strony i chciałbym żeby to była równa wielkość.

0:57Zwykle ustawiamy ją na około 60 pikseli czyli 60 62 4 8.

1:02To będą dobre wartości.

1:04I teraz jak to nic z tymi kolumnami.

1:05Chciałbym ustalić stały odstęp od lewej i od prawej nie wielkości 46 tylko np.

1:1160 czy 62.

1:14Ale jeśli to zrobię przy tych ustawieniach

1:16kolumn niestety nie mogę takiego stałego marginesu ustawić chcę zostać przy

1:20dwunastu kolumnach i też chciałbym żeby w miarę wszystko

1:24dawało się podzielić przez 10 bo taki jest mój duży

1:29i tak jest ustawiony ten miał mikro GRID więc można powiedzieć że na ogół

1:35staram się ustawić aby był wielokrotności dziesiątki czyli np.

1:3820 albo 30:30 jest OK desktop.

1:42I w tym momencie staram się właśnie mieć jednakową odległość od lewej od prawej.

1:48Przy takim ustawieniu kolumn wyszedł mi na 76 pikseli.

1:52Myślę że jest OK może zostać nigdy nie

1:55zrobimy tak nie uda się tak zrobić żeby to się odgrywało co do jednego i było np.

2:00implementacją 5 czy 10 zostawiamy takie ustawienia.

2:03Dla mnie trochę ważniejsze jest to żebym mógł wysunąć sobie z pomocą komend

2:06średnich to robię wysunąć sobie teraz linie podziału które

2:09mi się przykleja do tego 60 tego drugiego piksela tutaj i do 1300 czwartego piksela.

2:17W tym miejscu dzięki temu Command Shift cudzysłów mogę teraz ukryć.

2:23Ale nadal wiem o ile mam się odstawić od górnej krawędzi zrobię to w ten sam sposób

2:28czyli też tutaj wybierzemy 62 piksela odstępu.

2:32Kolejna decyzja już stricte decyzja

2:34projektowa dotycząca głównego Art boru to jest wypełnienie go jakimś kolorem.

2:39Oczywiście zależy to od Twoich preferencji

2:41od Brent kolorów i od tego co chcesz osiągnąć.

2:44Natomiast moja wskazówka jest taka ja bardzo często staram się nie bazować na

2:47jednolitym białym tle chociażby dlatego że takie jednolite białe tło daje mi trochę

2:53mało możliwości decyzyjnych w przypadku gdy mam jakiś element np.

2:57kafelki i teraz chciałbym kafelki z tego

2:59tła wyróżnić w pewien sposób można to zrobić właśnie operując kolorem tła.

3:03No ale jeśli moje tło jest białe ja mam

3:06możliwość tylko właśnie wyróżnić taki element mijając go czasem nie jest mi to

3:11na rękę czasem nie chcę mieć elementów szarych czy coraz coraz ciemniejsze.

3:15Czasem fajnie by było żebym miał przynajmniej do dyspozycji taką możliwość

3:18aby coś wyróżnić z tłem które jest idealnie białe.

3:21No i przy oznaczeniu art i

3:24danie mu wypełnienia na jakiś delikatny nawet kolor szary a ja w naszym przypadku

3:29będę chciał nawet iść bardziej w kolory rajdowe czyli kolory niebieskie

3:33to taki wybrane niebieski i będzie bardzo fajnym podkład do tego aby umieścić na nim

3:38jakiś element który przykładowo będzie kafelki i zobacz że teraz samo wypełnienie

3:43białym kolorem w pewien sposób pozwoli nam go wyróżnić na wszystkich innych rzeczy.

3:48A jeśli dodamy jeszcze do niego delikatny cień.

3:50Ten element zaczyna już teraz fajnie wyglądać.

3:52Nie wiem czy to będzie docelowy końcowy kolor który wybrałem ale będę chciał iść

3:56trochę w te nasze branżowe kolory one będą niebieskie.

3:58Ten kolor niebieski nie jest też

4:00przypadkowy on mocno kojarzy się z nowymi technologiami jest też kolorem który budzi

4:04zaufanie a nasza firma to software house technologiczne.

4:08W związku z tym

4:09jednym z naturalnych wyborów jest pójście trochę w ten kolor niebieski.

4:13Teraz co chciałbym zrobić na mojej głównej

4:15stronie mogę spróbować kibicować to jakimiś gotowymi elementami w jakiś zwykły

4:20kwadrat może bez obramowanie z białym wypełnieniem pozwoli mi tutaj zrobić

4:23przestrzeń którą mniej więcej będę chciał poświęcić na logo.

4:27Później jakaś kawałek jakiś kawałek

4:29przestrzeni będę chciał żeby było poświęcone na menu.

4:31I w końcu zatem po prostu sobie wyciągam te elementy.

4:35Tutaj będzie jakaś przestrzeń na kontakt czy numer telefonu.

4:39Następnie chciałbym

4:41to miejsce trochę może nawet się odsłonę poświęcić na tablicę czyli

4:47główny taki akapit mówiący o naszej firmie o tym czym się

4:50zajmujemy umieścić gdzieś pod spodem przycisk taki a główny koloru Action.

4:56No i w tym miejscu chciałbym żeby znalazła się grafika.

5:00Jakiś jakaś fajna ilustracja Nowoczesna.

5:02No i to pozwoli mi też planować miejsce na

5:05dole na cztery takie topowe elementy oferty którą ma nasza firma mogę wspomóc

5:12się tym autem ponieważ w sytuacji gdzie mamy dwanaście

5:17teamów w aucie no to ja mogę na trzy po prostu zrobić szerokość tego elementu

5:22za mogę przesuwać tutaj kafelki tak żeby je powielać.

5:26Teraz mając taki ogólny zarys szkic tego co chcę wykonać mogę zaznaczać sobie te

5:32elementy i je między sobą gdzieś tam jeszcze dopasowywać pozycjonowanie

5:37dlaczego mi zależy na tym żeby przygotować taki wstępny szkic bo chcę widzieć to jak

5:42mniej więcej będą się składały wielkości na głównej stronie.

5:45To jest istotne dlatego że po pierwsze

5:47chcę zasygnalizować użytkownikowi że coś jest jeszcze niżej czyli nie chcę np.

5:53zrobić tego dokładnie tak moim zdaniem lepiej będzie nawet w ten sposób żeby

5:57zostawić trochę oddechu może pokazać tę główną myśl która jest na tych

6:02kawałkach ale jednak żeby użytkownik widział że strona mu się kończy.

6:05Ale jeszcze coś jest pod spodem więc warto zacząć królować w

6:09ten sposób mogę rozłożyć sobie też ten ciężar wizualny co chcę żeby zajmowało

6:13mniej więcej miejsca no i też pozycjonowanie elementów które

6:17bierze mi się z tego prototypu lub dodatkowe ćwiczenie które ja tutaj robię

6:22bo w gruncie rzeczy jest to kurs xD a nie stricte projektowania jachtów

6:26jest takie że chciałem żebyś zobaczył jak bardzo fajnie xD podpowiada nam różne

6:31rozmiary odległości i pojawiają się dodatkowe linie przy legalnie.

6:35Są to linie które pozwalają nam równo z pozycjonowania względem innego elementu

6:40dany element jak również pokazany jest margines 16 15 17 pikseli.

6:45Ja nie docisku absolutnie nic tu Adobe xD

6:48po prostu samo działa i wyświetla mi odpowiednie rozmiary marginesem i pozwala

6:55ulegać jakby znajdować do tych właściwych odległości to jest bardzo fajne.

6:59Czy można to wyłączyć.

7:00Można to wyłączyć po prostu wciskając

7:02Command i wtedy możemy co do piksela ułożyć listę nic tam nigdy nie przylega

7:08natomiast dodatkowych fajnych rzeczy które chciałem to pokazać jeśli zaznaczenie

7:11jakiś element wciśnięty i trzymamy na klawiaturze czyli Alt na PC

7:15to alt to teraz pozwoli nam zmierzyć rozmaite odległości.

7:19Tutaj w kontekście całego dokumentu.

7:21Ale jeśli trzymam Alt i teraz jadę nad

7:23inny element to pozwoli nam to zmierzyć odległości do tych innych elementów np.

7:28tu mamy z jednej i z drugiej strony 30

7:30pikseli do górnego elementu mamy 103 piksele.

7:33Tutaj też możemy to zobaczyć w momencie

7:35gdy przetrzymuje Alt i wjeżdża na te inne kafelki.

7:39Chciałem żebyś próbował.

7:41Rysowanie takich prostych kształtów ich pozycjonowanie.

7:44Dzięki temu zobaczysz jak proste to jest xD jak można bardzo łatwo ułożyć elementy

7:48względem jednej linii jak również względem siebie.

7:51Natomiast gdybyś chciał zastosować jakiś

7:53trochę bardziej skomplikowana operacja gdyby nie był niewystarczająca przykładowo

7:57jeśli masz stworzone kilka elementów i teraz też je wyrównać możesz zaznaczyć te

8:01elementy a następnie przejść do opcji wyrównania w tej części tutaj mamy

8:05dystrybucję werdykt mamy tutaj horyzont realną to znaczy że teraz gdybym chciał

8:09ułożyć wszystkie do jednej linii górnej krawędzi mogę to zrobić w ten sposób

8:14następnie mogę te elementy wyrównać jeśli chodzi o odstępy pomiędzy nimi odstępy

8:18poziome ikonki a tutaj mogę wyrównać odstępy pionowe bądź też

8:24dystrybuowane to w pionie właśnie do środka do lewej do prawej czy do innej

8:29krawędzi domyślnie ta opcję dla danego elementu działają w kontekście art.

8:32bardo czyli jeśli zaznacza pojedyncze elementy i chciałbym go wyrównać na całym

8:36Art w poziomie mogę kliknąć na tą opcję i teraz jest dokładnie na środku w poziomie.

8:41Natomiast gdybym chciał wyrównywać

8:43elementy względem siebie przykładowo stworzył tutaj kolejny kształt np.

8:48elipsy którą chciałbym wyrównać względem tego prostokąta to muszę teraz upewnić się

8:55że oba te elementy są zaznaczone jak to się robi xD wystarczy że do CIS Shift i

9:00teraz mogę zaznaczyć więcej niż jeden element.

9:02Mogę to robić też na aparacie warstw mogę

9:05wcisnąć kliknąć na jednej warstwie wcisnąć sobie Command i kliknąć na innej warstwie.

9:11W ten sposób obie zostaną zaznaczone.

9:13Jeśli chciałbym zaznaczyć całą sekwencję warstw mogę kliknąć na pierwszej warstwie

9:17przytrzymać Shift i kliknąć na ostatniej i wszystkie po drodze zostaną zaznaczone.

9:23Najprościej jednak robi się to tak że klikamy na jednej warstwie a następnie

9:27docisku Shift i klikamy na kolejnej warstwie.

9:30Jeżeli te warstwy były w jakiejś

9:32skomplikowanej strukturze zagęszczenia czyli np.

9:35w jakichś różnych grupach wtedy żeby zaznaczyć taką docelową warstwę

9:39najlepiej jest wcisnąć Command czyli Commander klikamy na jednej warstwie.

9:45Mam pewność że właśnie to co było obliczone zostało zaznaczone a nie np.

9:49grupa która jest wyżej w hierarchii na

9:51warstwach i teraz dodatkowo z Commander i stricte oznacza drugą warstwę.

9:57Dzięki takiemu znaczeniu te opcje.

10:00Względem tych dwóch elementów.

10:01Czyli jeśli chciałaby wyrównać elipsy

10:03centralnie w pionie i w poziomie to wyrównuje ją z pomocą tych dwóch opcji i

10:08teraz jest ona wyrównana względem tego drugiego oznaczonego kształtu.

10:13Proszę potrafią sobie tworzenie tych

10:14prostych kształtów zaznaczają oznaczanie do oznaczania jest blisko.

10:17Tandem jak również dystrybucję zarówno

10:20dzięki automatycznym akcjom Adobe xD jak też zaznaczenie wielu kształtów naraz i

10:25korzystanie z tych opcji alimenty czyli z opcji dystrybucji horyzont.

10:30I to wszystko w tej lekcji. Do usłyszenia.