Adobe XD: Proste operacje na kształtach

CC 2020+

0:00Cześć tej lekcji chciałbym stworzyć Love dla naszego serwisu zrobimy ją od podstaw.

0:04Będę chciał pokazać kilka fajnych narzędzi

0:06w kontekście pracy z sektorami z Adobe Excel.

0:09Zacznijmy od tego że powiela znowu sobie

0:11ten jeden z elementów który jest w menu i wpisze nazwę naszej firmy.

0:16Na końcu zrobię kropkę zaraz zrobimy do tego jakieś sprytne logo zaznacza z

0:20Company i z Shift pociskami Command Shift i zaznacza elementy które już nie są mi

0:25potrzebne dla pozycjonowania po to żebym miał trochę lepszą orientację

0:29w terenie i teraz mógł zobaczyć nawet mogę sobie wyłączyć niespodzianki.

0:32Jak prezentuje się aut już będę chciał

0:36finalnie ściągać te rzeczy i umieścić je we właściwym miejscu.

0:39Jednak zanim jeszcze to zrobię to najpierw robię obok Services strzałę a ja chciałbym

0:44żeby znalazła się tutaj mała strzałka która pozwoli mi rozwijać menu.

0:48Jak zrobić ją najprościej.

0:50Możemy to zrobić na wiele sposobów możemy skorzystać z narzędzia linii i

0:54spróbować zrobić linię w ten sposób a następnie ją powielać.

0:58Mogę wcisnąć Command D i posiada taką fajną opcję obracania

1:02możemy obrócić w pionie albo w poziomie i w tym momencie możemy to

1:07spróbować wygenerować a następnie zarządzać właściwościami tej linii.

1:11Jak widać nie jest to takie proste żeby pasować te dwie linie ze sobą.

1:14W związku z tym odrzucam ten pomysł.

1:16Alternatywnym pomysłem mogłaby być praca z narzędziem poligon stworzenie sobie

1:20jakiegoś poligonu z szefem go stworzyłem żeby zachować proporcje.

1:23Teraz jeżeli na jeden na jeden w narożniku

1:26zmienił się kursor na charakterystyczną strzałę która pozwoli na obracanie teraz z

1:30szefem i z obrazem żeby zachować kąt i mam coś co zaczyna mniej więcej

1:36przypominać to strzałka ale musiałbym jeszcze dostać się do środka to nie jest

1:40takie proste i edytować punkty sektorowe które tutaj są.

1:43Myślę że też porzuca ten pomysł pokazuje ci specjalnie te różne interakcje bo jak

1:47widzisz pomysłów jest wiele ale najlepszy jest zwykle jeden taki który pozwala nam

1:52najszybciej wykonać zadanie które przed nami stoi.

1:54Takim narzędziem w tym przypadku będzie to jak z niego skorzystamy.

1:58To klikamy raz po to żeby stworzyć punkt i

2:02po kliknięciu będę mógł wyprowadzić od niego linię.

2:05Chciałbym żeby ona była pod kątem 45 stopni więc wciska mi otrzymuje Shift i

2:09wprowadza ją właśnie pod tym kątem 45 stopni.

2:13Teraz klikamy raz i również pod kątem 45 stopni czyli

2:17również wciśnięty Shift prowadzę drugą linię i zobacz że dzięki narzędziem

2:21przylega uda mi się postawić ją w idealnym miejscu.

2:25Fajnie to wszystko wygląda.

2:26Tylko że teraz może z tego wyjść.

2:27I jak to zrobić wcisnąć Escape Escape

2:29zatwierdzić kształt ja mogę teraz poruszać się i klikać w zasadzie po każdym punkcie

2:33wektora owym w jaki sposób go modyfikować i zmieniać.

2:36Mogę też kliknąć dwa razy na takim punkcie żeby wyciągnąć z niego takie włosy ramiona

2:41sektorowe i to edytować ale nie będę tego robił.

2:44Mogę kliknąć dwa razy raz jeszcze aby

2:46stworzyć taki punkt ostry i w ten sposób powstało mi coś co nazywa się ścieżką.

2:50Ba mogę zaznaczyć taką całą ścieżkę i umieścić ją we właściwym miejscu.

2:54Teraz chciałbym jeszcze zmienić kolor

2:56obramowanie a więc przejdę do sekcji Border klik na małą ikonkę Opera a

3:00następnie wybiorę kolor który mi odpowiada.

3:02Co ciekawe mogę go wybierać z interfejsu

3:05Adobe xD i mogę nawet wyjechać sobie na jakąś inne jakieś inne miejsce.

3:09Jakiś inny kolor inną kartę przeglądarki

3:11którą mam obok otwarte czy gdziekolwiek i też pobrać ten kolor.

3:15Skrót do aparatu i natomiast niestety w tym przypadku jak i w innych przypadkach

3:20na razie xD i będzie domyślnie zmieniało kolor wypełnienia nawet jeśli w

3:25tym momencie ten kolor jest nie włączony kliknij na coś.

3:29No to wtedy nieszczęśliwie wypełnia to tym kolorem granatowym wyłącza to w związku z

3:32tym na chwilę i jeszcze inne opcje które warto tutaj sprawdzić.

3:36Opcje dotyczące tego jak dana ścieżka się zaczyna jak ścieżka się kończy.

3:41Pozwólmy to trochę przybliżyć i zobacz że mamy ostre krawędzie.

3:45W tym miejscu mamy też ostre krawędzie tutaj i tutaj.

3:49No ale przede wszystkim niebieska linia

3:51czyli ta ścieżka pojawia się mniej więcej w środku a nawet bardzo w środku i

3:55generalnie jest kilka ustawień które pozwoli nam to zmieniać.

3:58Po pierwsze chciałbym spróbować zmienić jej rozmiar.

4:00Może nie od razu na dwa ale tutaj możemy wpisać również po kropce np.

4:061 i 5 dziesiątych piksela

4:08i kolejno mamy tutaj ciekawe opcje dotyczące tych krawędzi.

4:12Czyli tu mamy coś takiego jak Budka Apps i

4:15można to zmienić na raty albo można zmienić na projekt.

4:18Jeżeli zmienimy to np. na Rand.

4:20No to widzimy co się dzieje z są

4:22zaokrąglone krawędzie to jest tylko błąd oderwania xD jak zaczniemy trochę zmieniać

4:28jeśli chodzi o rozmiar to się okaże już jest w porządku.

4:30Podobnie jak tutaj teraz jest OK.

4:33I widzisz czym się różnią te opcje jeśli

4:35mamy punkt zerowy to trochę nad punktem startowym tutaj kończy się ta prosta.

4:41A jeśli mamy zaokrąglone krawędzie to wygląda to właśnie tak.

4:44Pozostałe ustawienia te które mamy tutaj

4:46dotyczą tego jak się prezentują te łączenia punktów

4:51gdzie mamy jeden punkt ostre i teraz jest on połączony ostrą linią ale możemy to

4:55zmienić tak żeby ta linia była zaokrąglona albo ścięta.

4:59Zostawmy.

5:00Linie.

5:02Jeżeli nie my teraz elitarny Enter to

5:05będziemy mieli możliwość modyfikacji ich parametrów na poziomie każdego z punktów

5:09więc jak widzisz można wybrać sobie dowolny punkt albo coś tam zaznaczyć

5:12więcej niż jeden punkt i też ewentualnie zmieniać rozmaite parametry.

5:17Warto się pobawić i eksperymentować ale

5:19tym tymczasem mamy wszystko to co chce i chcieliśmy osiągnąć w przypadku tej

5:22małej ikonki i jeszcze można zwrócić uwagę na jedną rzecz mianowicie na to że ona

5:28teraz jest ustawiona na współrzędnych które są po przecinku i

5:33tak samo jej rozmiar szerokość i wysokość jest po przecinku.

5:37Mamy tutaj też jeden i pół jeśli chodzi o wielkość czy to wszystko ma znaczenie bo w

5:41starej szkole tworzenia ikon mogli by wam powiedzieć że tak naprawdę

5:45trzeba było też to wyrównać do siatki pikseli.

5:48Można to zrobić w Adobe xD klikając prawym przyciskiem myszy i wybierając polecenie

5:52Pixel GRID no i zobacz co teraz się stanie.

5:54Co prawda mamy szerokość i wysokość teraz

5:56pełnych pikseli ale niestety cały kształt nam się rozjechał.

6:01Czy jest to konieczne.

6:02Otóż nie nie jest to konieczne ponieważ te

6:04wszystkie ikony będziemy zapisywali do wektorów czyli do plików S V g i naprawdę

6:09dla procesora nie ma znaczenia to jak on wygeneruje czy wędruje

6:13część po przecinku czy nie wędruje części po przecinku.

6:15Problem o którym tutaj mówimy raczej dotyczy grafiki bit masowej która jest

6:19generowana na siatce pikseli i wtedy jeśli mamy jakieś dziesiąte części piksela

6:23to ona rzeczywiście będzie trochę rozmycia natomiast w przypadku grafiki wektor owej

6:28będzie to wszystko bardzo ładnie przeliczone przez procesor i

6:31wyreżyserowane więc po prostu nie przejmujemy się takimi rzeczami.

6:34Mógłbym w zasadzie już o tym w ogóle nie

6:36wspominać ale być może są jeszcze tacy którzy pamiętają starą szkołę.

6:40W związku z tym to co możemy tutaj jeszcze

6:42zobaczyć to jak ta strzałka wygląda w kontekście w kontekście całego menu.

6:46Przy skali 100 proc.

6:47czyli Command 1 i sprawdzamy czy to jest OK.

6:49Wydaje mi się że teraz chyba nawet bardziej by mi się podobała grubości 2.

6:54I jeszcze należałoby ją troszeczkę odsunąć

6:57od tej sekcji Services i chyba teraz przy stu procentach wygląda całkiem nieźle.

7:03Zaprojektuje mi jeszcze teraz jeden

7:04element skorzystam z narzędzia a następnie rysuje prostokąt który obwody

7:11telefon numer telefonu natomiast teraz zmieni kolejność warstw.

7:14Po prostu po to żeby ten telefon znalazł się na górze.

7:17Zostawię tutaj trochę przestrzeni na

7:19słuchawkę telefonu którą będę chciał dorobić przybliża się do tego elementu i

7:24przy tworzeniu kształtów mamy kilka fajnych narzędzi.

7:26Najpierw wyłącza order nie będę chciał

7:27obramowanie a teraz chciałbym skorzystać z tej małej

7:31córeczki która pojawia się przy dowolnym narożniku a następnie pociągnąć za nią aż

7:36do końca po to żeby w pełni zaokrąglone kształty.

7:39Jeżeli chciałbym zrobić to tylko dla

7:41jednej krawędzi mogę wycisnąć Alt i w ten sposób zmieniam krzewienie tylko jednej

7:45krawędzi jeśli chcę wszystkie mogę to zrobić tak.

7:48Rzecz jasna mogę również ten parametr

7:50dopasować w tym miejscu więc to jest dla wszystkich krawędzi 22 zaokrągleniu.

7:55Gdybym chciał dla każdej osobno również

7:57mogę to zrobić w ten sposób przyłączając się między tymi dwiema opcjami.

8:00To co teraz potrzebuję to wyrówna do środka a następnie

8:06dodam do tego kształtu jeden z efektów mianowicie efekt shadow cień i chciałbym

8:11żeby to był taki dosyć duży rozbudowany cień czyli np.

8:15użyje 10.10 Blur a wartość 30.

8:19I wygląda to już całkiem nieźle.

8:21Możemy kliknąć zawsze na taki kolor i

8:22ewentualnie zdjąć jeszcze z niego trochę przez uroczystości opasek.

8:27I to już wygląda całkiem nieźle.

8:28A my teraz możemy zacząć trening z ikonami.

8:31Czy jest ktoś jeszcze na tyle niepoważne aby tworzyć samemu ikonkę telefonu.

8:35Trudno powiedzieć ale nam posłuży to jako

8:37naprawdę niezły przykład trenowania walki z bólem bo tak prawdopodobnie będzie można

8:41nazwać swoje pierwsze doświadczenia z tym narzędziem.

8:44Ale zakładam że te doświadczenia już może zdobywała gdzieś wcześniej.

8:47W związku z tym spróbuję narysować telefon

8:50wybiorę pętla i klasyczny telefon którego oczywiście już nikt nie używa

8:54ale wszyscy rozumieją konwencję z jaką mamy tutaj do czynienia.

8:58Rozpocznę od kliknięcia raz teraz drugi

9:00raz stworzyłem sobie kolejny punkt trzeci i tworzę czwarty punkt w ten sposób

9:07prowadzę linie tutaj teraz będę chciał skończyć w tym miejscu i domknąć.

9:13Ta słuchawka nie jest idealna aczkolwiek mam i schemat jej szkic.

9:18Teraz chciałbym użyć jak najmniej linii

9:21jak najmniej punktów sektorowych żeby wyglądało to w miarę fajnie.

9:24W związku z tym klikamy dwa razy na tym

9:25punkcie i tak jeśli chodzi o modyfikację teraz gałęzi które mam już

9:31możemy je modyfikować osobno od siebie jeżeli wcześniej trzymamy.

9:36W związku z tym chciałbym zmodyfikować

9:37pierwszą w ten sposób aby mieć linię ostrą ale już tę linię słuchawki chciałbym mieć

9:43zaokrąglone ładnie i tak samo zrobimy to dwa razy klikamy tutaj.

9:47Zatem będę chciał mieć ostrą linię.

9:50W ten sposób ale tutaj spróbujemy tą linię dopasować do tej poprzedniej.

9:57Jeżeli już skończymy prace z kształtem mój

9:59co prawda nie jest jeszcze może jakieś idealne pewnie.

10:02Jeszcze trochę nad nim popracować

10:03ale generalnie nie mam już na to za dużo czasu.

10:06W związku z tym jeśli już kończymy prace z tak przygotowanym kształtem a raczej jego

10:10połową to możemy wcisnąć Escape ale pamiętaj że zawsze możesz wrócić do edycji

10:14wciskając elitarny Enter i wszystkie te opcje pozostają do zmiany więc teraz

10:21i raz jeszcze i to co będę chciał zrobić to po prostu powielać taką słuchawkę a

10:25może jeszcze wcześniej dostosuje ustawienia i zaokrąglone narożnika.

10:29Np. tutaj będzie to ładnie wyglądało i teraz

10:32pobieramy taki kształt wciśnięty latem następnie obraca go w tej osi

10:38w taki sposób no i próbuje połączyć te dwa kształty razem aby to zrobić.

10:43Po prostu zaznaczam razem z szefem albo na

10:45warstwach albo właśnie i przechodzę do opcji łączenia kształtów.

10:50Tutaj mamy zwykłe łączenie.

10:52Tutaj możemy wyciąć jednym kształtem kawałek drugiego.

10:55Tutaj możemy stworzyć kształt który będzie tylko na połączeniu dwóch kształtów

10:59które się ze sobą łączą a tutaj wyciąć środek tego czyli wyciąć wszystkie miejsca

11:04gdzie się ze sobą łączą i na zewnątrz będą dostępne kształty.

11:07Nam chodzi oczywiście o opcje at więc to robimy.

11:11No i teraz mamy taki specyficzny twór

11:13który pozwala nam jeszcze tutaj wejść i coś edytować.

11:17Czyli jeśli to się kiepsko łączy możemy

11:19zawsze wcisnąć enter i dopasować punkty sektorowe tak aby to

11:24połączenie z jednej i z drugiej strony było trochę lepsze.

11:27Nie chcę jakąś tutaj może super dużo czasu

11:29nad tym spędzać aczkolwiek pamiętaj też teraz że jesteśmy w naprawdę dużej skali.

11:34To co potrzebowaliśmy zrobić to

11:35zdecydowanie po pierwsze zmniejszyć naszą ikonkę

11:39i pamiętamy że właśnie xD ma taką opcję że będzie cały czas zachowywało

11:45dla nas właściwości rozmiaru obramowanie dla odpowiednio małej skali możesz

11:50spróbować też zmienić tę opcję czyli krawędzie na zewnątrz wewnątrz tego wektor

11:55owego w tym przypadku to jest moim zdaniem lepsza opcja.

11:59Możemy też zatem obrócić i szlif po to żeby zachować kąt 45 stopni.

12:04Gdzieś tak mniej więcej pasować ten

12:06kształt ikony aby pasował do tego okrągłego kształtu który

12:10tu mamy i jeszcze możemy po pierwsze zmienić jego obramowanie na kolor

12:15granatowy skorzystam jeszcze z zielonego koloru wypełnienia wybierzemy sobie taki

12:19czas na zielone i chciałbym to robić tutaj jeden element wybiorę narzędzie linii i za

12:23pomocą narzędzia linii zrobię najpierw taką linię zaokrąglone krawędzie a

12:28następnie wcisnąć Ritter ENTER aby dostać się.

12:30Chodzi o to że chcę wejść do edycji tej

12:32linii czyli zaznaczam ją return jedna z kulek się zapali i przejdę automatycznie

12:36do konsula będę mógł dodać tutaj punkty sektorowe dodaje punkt 2.

12:40Na środku powinno

12:42zadziałać i mi się uda a następnie go wyciągam i teraz dwa razy w niego klikamy

12:47aby go zaokrąglona mogę teraz wybrać jakiś rodzaj zaokrągleniu.

12:53I mam taką pierwszą linię takich linii

12:55chciałbym mieć trzy albo dwie zaraz zobaczymy od klik się po wiele.

13:00To zatem zaskakuje w ten sposób.

13:04Wydaje mi się że dwie będą OK zaznaczam

13:06OBIE z autem i z tym znów po to żeby zachować kąt 45 stopni.

13:12ładnie to sobie przesuwamy skanuje

13:16i teraz jeszcze będę chciał ustawić dla tego kolor obramowanie a w ten sposób

13:20i Command 1 zobaczymy jak to wygląda przy stu procentach.

13:24Jak widzisz już nie widać tych malutkich

13:26niedociągnięć a jest całkiem OK jak na dosłownie dwie czy trzy minuty pracy.

13:31Zawsze warto trochę czasu poświęcić na to żeby stworzyć jakiś swój element.

13:35Na pewno fajniej i bardziej indywidualnie.

13:38Ten lot będzie wyglądał zaznaczam z Commander.

13:40I tam wszystkie te elementy wciska Command g po to żeby zgrupowanie ze sobą.

13:45Teraz mogę całą taką grupę przesunąć i ustawić tak aby optycznie wyglądało to

13:50dobrze więc lepiej już na tym etapie pracować w powiększeniu 100 proc.

13:54No i możemy przejść do kolejnej lekcji gdzie będziemy robili jeszcze trochę

13:57bardziej skomplikowane operacje z kształtu ami na potrzeby naszego logo.

14:01Do usłyszenia.