Adobe XD: Zaawansowane kształty

CC 2020+

0:00Cześć Witaj w kolejnej lekcji w której chciałbym abyśmy jeszcze trochę więcej

0:03popracować z pędzlem i narzędziami kształtów.

0:05Myślę że każdy dobry designer powinien mieć taki niezły warsztat i wyczucie jeśli

0:10chodzi o skróty klawiaturę i ogólnie pracę z aktorami w Adobe xD.

0:14Dlatego przygotowałem dla Ciebie raczej

0:16pobraniem z witryny logo AST którą wrzucam w komentarzu bo brałem tutaj kształty i

0:22takie darmowe logo które będziemy starali się odtworzyć.

0:25Oczywiście ja pokażę ci może kilka

0:28sposobów na to jak możemy z tym pracować a pracą domową.

0:31Po tej lekcji dla ciebie będzie odtworzenie wszystkich tych głosów i

0:35stworzenie ich własnej we wtorkowej wersji.

0:37Tym samym trenujesz sobie wszystkie narzędzia które się tutaj znajdują.

0:41Która o mówimy.

0:42Jeśli chodzi o te techniki które warto wykorzystać no to gdybyśmy na przykład

0:46robili takie logo łóżkiem od czego zaczniemy w ogóle.

0:50Przede wszystkim powinniśmy się

0:51koncentrować na tym aby mieć jak najmniej punktów sektorowych jeśli wcisnąć tutaj

0:56litery Enter na tym kształcie czyli przejdę do jego edycji.

0:59Zobaczysz że tutaj jest całkiem niewiele punktów.

1:02Możesz w ten sposób sobie pomóc i zobaczyć jak to ogólnie zostało stworzone.

1:06Możesz dotknąć każdego z tych punktów

1:08sektorowych i zobaczyć jak długie ma wąsy a następnie postarać się w miarę wiernie

1:14odtworzyć rzeczywiście w tym ćwiczeniu chodzi o to aby po prostu potrenować na

1:19tym gotowym przykładzie i żeby odtwarzać sobie te różne rzeczy.

1:23Jeśli chcemy mieć jak najmniej linii

1:25warto rozpocząć naszą pracę od korzystania z gotowych narzędzi takich jak np.

1:29elipsy a i takiego łóżka możemy zacząć właśnie od stworzenia np.

1:33tego typu elipsy.

1:35Innym pomysłem byłoby stworzenie prostokąta.

1:38Czyli wybieram sobie narzędzie tango.

1:41I stworzenie mniej więcej właśnie tych

1:43proporcji kształtu a następnie ustalenie dla niego zaokrąglonych krawędzi.

1:48Jak widzisz zaczyna to wyglądać już zdecydowanie lepiej.

1:51Następnie to co potrzebujemy zrobić to

1:54może zmienimy kolor wypełnienia na czarne i obramowanie włączyłem to chcemy w

1:59obrębie tego kształtu umieścić jeszcze inne podobne prostokątne przesłane sobie

2:03obok łóżka bym miał preferencje i teraz korzystam znowu z narzędzia tango.

2:09Tworzę sobie mniej więcej kształt tej wielkości a następnie przesuwamy go tutaj

2:14i znów zaokrąglona w ten sposób usuwamy obramowanie

2:18teraz powiela ten kształt ten i oba te kształty zaznacza mogę wcisnąć

2:24Command aby je skupować i mogę umieścić je we właściwym miejscu.

2:28Gdybym chciał tę grupę teraz umieścić w kontekście kształtu mogę z to znaczyć.

2:33Ponieważ zamknęliśmy kształt w grupie

2:35teraz narzędzia wyrównania będą właśnie działały do tej grupy więc możemy ją

2:39umieścić bardzo łatwo na środku tego oznaczonego kształtu.

2:43Gdybym nie miał grupy to wtedy

2:45działało by to indywidualnie dla każdego ze znaczących obiektów.

2:49No dobra to mamy oczy do łóżka i teraz

2:51pytanie jak stworzyć ogonek do łóżka czyli tą część.

2:56Zobaczmy jak to wygląda tutaj na wektora

2:58czyli przejdę do środka i wciśnij jeszcze raz Enter.

3:01Zobacz że ten punkt dyrektorowi stan

3:02został znacznie przesunięty a dodatkowo doszły nam jeszcze przynajmniej dwa punkty

3:08sektorowe które będziemy musieli uwzględnić w tym kształcie więc Ritter

3:11Enter przechodzę do tego kształtu może odrobinę go obniża.

3:15Tak samo tutaj czyli po prostu klikamy na takim punkcie mogę się tam zaznaczyć

3:19jeszcze jeden punkt i teraz strzałki w górę poruszają te punkty o jeden piksel do

3:23góry a z Shift poruszając będę poruszał o 10 pikseli do góry.

3:28Teraz ten punkt należałoby odrobinę

3:30przesunąć i dodać tutaj jeszcze jeden punkt sektorowe w zasadzie na razie w

3:34dowolnym miejscu ale upewnij się że wyląduje on mniej więcej tutaj.

3:39No i teraz zadbamy o to przejście aby było ono płynne.

3:43Kliknij w ten punkt i zróbmy tutaj ładny zaokrągleniu.

3:47Staram się zwykle z tego punktu wektora owego mieć w jednej linii.

3:51W ten sposób sam kształt będzie wyglądał ładniej i będzie pełniejsze.

3:56I tutaj muszę jeszcze zmienić położenie tego ramienia wektor owego.

4:00Mniej więcej w ten sposób

4:02tak naprawdę mógłbym pewnie jeszcze kilka modyfikacji zrobić ale nie o to chodzi.

4:06Myślę że sama koncepcja jest tutaj najważniejsza i to jak osiągnęliśmy dany

4:10efekt a już reszta modyfikacji będziesz mógł wprowadzić samodzielnie.

4:14Kiedy już mamy taki prawie gotowy kształt

4:17jeszcze należy spojrzeć na to jak wyglądają zależności pomiędzy

4:21poszczególnymi elementami które się na niego składają.

4:24Na przykład w naszym logo te kształty.

4:26Te oczy miałyby być wycięte z tego ogólnie

4:29z tej ścieżki czyli to co powinniśmy zrobić to powinniśmy zaznaczyć sobie te

4:34kształty osobno a następnie ścieżkę i wybrać jedno z poleceń.

4:38Czyli mamy tutaj asa Trakt i tak dalej więc chcemy wyciąć tymi autami

4:44część naszego większego kształtu i możemy kliknąć teraz na drugą ikonkę Save trakt.

4:49I zostało to wykonane.

4:51Teraz mamy taką grupę atrakcji 1 i w niej

4:53znajduje się pierwszy kształt drugi kształt oraz nasza cała ścieżka.

4:58To znaczy że w momencie.

5:00Teraz gdzieś to logo umieszczać jak

5:02widzisz ono ma przezroczyste tą część która została z niego wycięte.

5:07I jeszcze jedna wskazówka przy skierowaniu

5:09zobacz jak zachowują się te zaokrągleniu w prostokąt.

5:13Otóż one nie zmieniają się proporcjonalnie.

5:15Znów tutaj Adobe ma na razie problemy ze skierowaniem proporcjonalnym

5:20więc to co powinniśmy zrobić to po prostu przejść do prostokąt i zamienić je

5:24wcześniej na kształty po to żeby straciły te właściwości tych zaokrąglonych rogów.

5:28Więc jeśli chcemy to zrobić Command 8 i w tym momencie mamy już zwykłą ścieżkę i

5:34na tym kształcie Command 8 mamy zwykłą ścieżkę trzy ścieżki i te ścieżki będą się

5:38dobrze eskalować więc teraz już wszystko jest w porządku.

5:42OK teraz spróbujmy stworzyć jeszcze jedno logo.

5:45Może zrobimy tą linkę chyba tak albo na.

5:49Możemy zatem ją po prostu skopiować i teraz jak odtworzyć najlepiej te kształty.

5:54Zacznę od elipsy i będę chciała narysować jedną Eclipse.

5:58Najłatwiej będzie nam w zasadzie zacząć gdzieś tutaj celować gdzie ona mogłaby się

6:03zaczynać w tym miejscu tylko zacząć od środka ją rysować więc staram się umieścić

6:07kursor na środku i teraz jak zacząć rysować kształt od środka tam gdzie mamy

6:11kursor wciśnięty bądź obszar na maku czy z tym autem możemy zacząć od środka.

6:17Shift. Dodatkowo zrobimy idealne koło i teraz mam

6:20już kształt który mi odpowiada wyłączy teraz wypełnienie jeśli chodzi o

6:24obramowanie wybiorę ten ciemny kolor i klik te obok pola Six.

6:29Jeśli masz wyznaczoną wartość w dowolnym polu xD możesz strzałka na klawiaturze a w

6:33górę oraz w dół zmieniać tę wartość o jeden.

6:35A jeśli do Shift możesz zmieniać tę

6:38wartość o 10 czyli ja wybiorę teraz sobie wartość np.

6:4225 pikseli.

6:44Jak można powiedzieć ten kształt to można powielać głosy te można.

6:48Command and V ale można też Command R

6:51czyli ta ikonkę Rapid Grid i powiesić sobie kształt trzy razy.

6:55Teraz zarządzały tymi odstępy i margines ami takimi.

7:00I chciałbym powiedzieć jeszcze trzy razy w pionie.

7:03I tutaj też przesunąć te kształty bardziej do siebie.

7:05Zobaczymy czy uda mi się wyeliminować tą dziurkę ale wydaje mi się że nie.

7:09Więc na razie zostawmy tak jak jest tylko zależy mi żeby powstało 9 z tych kształtów

7:14przesłane tutaj i teraz Roth grupuje Command.

7:18Albo po prostu klikamy na grę.

7:20Wygląda to tak.

7:21To co będę chciał zrobić to usunąć jeden

7:23element zaznaczyć zaznaczam tak jak foldery w Windowsie.

7:26Te dwa oczka na dole przesuwamy na środek xD mi w tym pomoże.

7:30I teraz mam praktycznie gotowy kształt.

7:33Gdybym chciał usunąć te drobne niedociągnięcia z wypełnieniem mogę

7:37spróbować po prostu ten kształt i ten kształt umieścić ot tak.

7:41No dobra to teraz zostało nam został nam

7:43listek do rysowania i to też będzie dość proste wybieram po prostu Tango tu

7:48i rysuje pierwszą część tego Liska a teraz usuwamy obramowanie jeśli chodzi o

7:54wypełnienie wciskania i wybieram czarny kolor.

7:57I teraz chcielibyśmy zaokrąglone krawędzie

7:59ale w momencie gdy zaokrąglony z pomocą córeczki zaokrąglone są wszystkie więc ja

8:03trzymam opon Alt i mogę w ten sposób sobie tylko wybrane krawędzie.

8:09Czyli to będzie ta krawędź.

8:10I w tym przypadku ta ok to możemy to powiedzieć Command C Command V.

8:16I teraz Bruce ten klarowny kształt.

8:18Z pomocą tej małej ikonki a następnie umieszcza go tutaj.

8:22Jeśli chodzi o ten kształt ma on trochę mniejsze.

8:25Teraz zatem muszę dostosować tę małą trochę mniejsze zaokrągleniu.

8:31No i oczywiście też jest mniejszy czyli szlif ten go zmniejsza.

8:34W ten sposób umieścił go tutaj.

8:37Oczywiście wymaga to jeszcze może jakiegoś

8:39delikatnego dopracowania ale myślę że jest OK.

8:41Możemy teraz to zaznaczyć zgrupowań zaznaczyć te wszystkie kształty zgrupowań

8:45i zaznaczyć te dwie grupy i teraz możemy wyrównać je względem siebie tak.

8:50I kolejne logo przećwiczyć.

8:52Jeśli chodzi o logo naszej strony zamiast na kształcie zbudujemy je na literę C.

8:58Zacznę od narzędzia tekstu czyli te na klawiaturze.

9:01Teraz klikamy raz i wpisuje literki j.

9:04Będzie to warstwa na razie tekstowe ale

9:06muszę zmienić ją na ścieżkę możemy w przypadku warstw tekstowych zrobić to

9:09dokładnie tak samo jak z autami czyli Command 8.

9:13No i mamy już zrobioną ścieżkę.

9:15Teraz chciałbym tą ścieżkę.

9:17Chciałbym ten kształt nieco pogubić i

9:20trochę go zmniejszyć jeżeli wybiorę return Enter to mogę zaznaczyć np.

9:23te dwa punkty sektorowe i je zmniejszyć w ten sposób to już wygląda

9:29całkiem nieźle ale chciałbym żeby cała liderka była grubsza więc jak mogę to

9:33zrobić bez konieczności przesuwania każdego punktu wektor owego border.

9:37Niestety ma tutaj jedną wadę bo gdybyśmy teraz chcieli skasować literę to zobacz że

9:42skazując ją Border w tym przypadku niestety ma jedną

9:46wadę ponieważ gdybyśmy chcieli skasować teraz literę np.

9:49ale ich tam zobaczę Border cały czas pozostaje taki sam więc przy mniejszej

9:53litery C w ogóle już to logo nie wygląda tak jak zamierzali.

9:56W związku z tym może zamiast border.

10:00Opcją będzie rysowanie jednak z kształtów

10:02jak moglibyśmy to zrobić i przygotujemy sobie dwa kształty jeden z pomocą Tango Tu

10:06rysuje i będzie to ten kształt a drugi wybiorę też efekt tango.

10:12Ale spróbuję wzorować kształt który

10:14znajduje się tutaj czyli może zrobimy tak zaczniemy stąd i spróbujemy za okrąg.

10:20Ten narożnik i zaokrąglony ten narożnik powstała po łuku ale które możemy teraz

10:27dopasować pasować ładnie z stworzonym kształtem wcześniej te kształty

10:31będziemy musieli ze sobą połączyć więc z Shift zaznaczam ten drugi a następnie

10:35wybieram polecenie aby w ten sposób wyłączać obramowanie border.

10:39No i jeszcze będę chciał wyciąć tutaj elipsy.

10:41Czyli zaczynam rysować elipsy rysuje sobie najpierw jakąś przykładowo wciska V żeby

10:46zobaczyć jak mniej więcej to powinno wyglądać.

10:49I patrzę na co patrzę patrzę na grubość tej kreski która mi tutaj zostanie.

10:54Chciałbym żeby ona była względnie możemy

10:56nawet delikatnie z płaszczyzny i zrobić takie jajko.

11:00Ale chciałbym żeby ta grubość była względnie równa.

11:03I tutaj i tutaj i tutaj więc wygląda na to

11:07że powinienem trochę tu przesunąć albo jeszcze delikatnie ją zmniejszyć.

11:14OK.

11:14I teraz wygląda to ok nie modyfikując szerokości zbyt mocno szerokości tego

11:20kształtu bo on też chciałem żeby był mniej więcej tej samej szerokości co całość więc

11:24wybieram te dwa kształty i teraz wybieram sub trakt czyli po prostu wycina jeden

11:30kształt drugim powstało tutaj powstał mały problem który

11:34zaraz z adresu mm czyli przejdziemy do pracy i przejdziemy do tej elipsy i

11:39następnie spróbujemy ją odrobinę zmodyfikować albo zrobimy to tak albo

11:44modyfikuje grubość tego elementu i przesunie go w tę stronę.

11:49Właśnie teraz już powinno być OK i

11:51wszystko wygląda idealnie i nasze literki j.

11:54Moim zdaniem jest dużo lepsza od tej która była adresowana z litery bo ta adresowana

11:59z litery ma tutaj jakieś wąsy jakieś ramiona sektorowe ten kształt

12:02nie jest idealnie taki jak chciałem a tu wygląda to już zdecydowanie lepiej.

12:07Teraz jeszcze muszę zadbać aby to logo dobrze skierowało się w xD czyli nie mogę

12:10mieć kształtów które mają jakieś swoje właściwości jak np.

12:13obramowanie czy zaokrągleniu więc zamiast elipsy będę potrzebował po prostu

12:18ścieżkę wybieram Control 8 i zamknięto ścieżkę to samo z tym prostokąt Control 8

12:23i to samo z tym prostokąt Control 8 w ten sposób upewnij się że taki kształt poza

12:28oznaczeniu będzie się dobrze skasował w proporcjach jest OK.

12:32I żeby przećwiczyć spróbujmy jeszcze pod

12:34tym kształtem zrobić sobie taki zupełnie Free Form kształt za pomocą pędzla

12:38klik na w tym miejscu gdzie mamy linię pomocniczą.

12:41Tu gdzie zaczyna się literki klik może punkt sektorowe z Shift.

12:45Po to żeby mieć kąt 45 stopni zrobię sobie tego typu schemat dokończy ten kształt.

12:51O właśnie w tym miejscu tak aby był równy i proporcjonalne.

12:55Teraz spróbuję postawić dodatkowe punkty sektorowe na środku tego kształtu

12:59zaznaczyć je i umieścić trochę niżej kliknąć dwa razy aby je za okrąg lić.

13:06Stworzymy jeszcze tutaj trochę większe zaokrągleniu.

13:09Chciałbym aby cały ten kształt wybieram

13:11Escape wzorował łuk który znajduje się tutaj i wygląda że jest całkiem nieźle.

13:16To co ewentualnie mogę zrobić to trochę

13:18dopracować to zaokrągleniu i to aby optycznie wyglądało to jak najlepiej.

13:23Wybieram teraz jako wypełnienie dlatego kształtu kolor czarny bez obramowanie.

13:28No i tutaj też wybiorę sobie wypełnienie koloru czarnego.

13:32Wydaje mi się że jest OK.

13:33Może jeszcze trochę popracuje nad tym właśnie żeby było troszeczkę większe.

13:38Teraz możemy lekko przez celować pamiętaj że jesteśmy cały czas teraz w dużej skali.

13:43Natomiast rzeczywiście powinniśmy postarać się żeby tutaj było.

13:47Więc możemy jeszcze trochę popracować z punktami wartościowymi.

13:51Zostawiam Ci to do zrobienia w wolnej

13:53chwili w przerwie po tej lekcji podobnie jak trenowanie rozmaitych kształtów które

13:58możesz obserwować na podstawie logotypu które tutaj są.

14:01Ja tymczasem

14:03kopiuje ten kształt i umieszcza go w odpowiednim miejscu obok logo.

14:06Zróbmy z tego grupę i spróbujmy tę grupę przez malować.

14:10Teraz umieszczamy logo we właściwym miejscu może jeszcze trochę je

14:14przekazujemy i wybieram i wypełnia je tym kolorem granatowym który mamy.

14:19Wygląda to moim zdaniem ok przejdźmy do widoku 100 proc.

14:22. Mamy gotowe menu a w kolejnej lekcji

14:25możemy zająć się importowany grafik w to miejsce.

14:28Do usłyszenia.