Adobe XD: Sekcja Quote i elementy graficzne

CC 2020+

0:00Część Witaj w kolejnej lekcji w której przygotujemy już ostatnią sekcję dla

0:03strony głównej zrobimy nagłówek a następnie zmienimy go wrócimy

0:08tutaj w treści Get Out a na górze zrobimy NEXT PROJECT.

0:13Teraz pożycza sobie znowu to tło z plikiem

0:16Command C i odblokuje się żeby nie w klatce był jeszcze raz.

0:19Do tego komponentu do instancji i tylko klikamy na tekście żeby było to możliwie

0:23blisko jeśli chodzi o warstwę blisko tekstu wyrównuje w ramach Art mordu.

0:27Jest w porządku a następnie tworzy sobie tango.

0:30Będzie to ramka testowa która będzie miała zaokrąglony narożnik 12 żeby być płynem.

0:35Teraz Border zostawimy szare ale ustawiamy go na trzy piksele i na czwórkę na

0:40klawiaturze po to żeby zrobić go przezroczyste.

0:43W 40 procentach wyrówna to do środka.

0:47Jest OK teraz zróbmy pole tekstowe piszemy

0:53Junior i mięso a następnie upewnij się że jest to może

0:59zrobimy Body kopii ale jeszcze dodatkowo zmienimy kolor na kolor z tego obramowanie

1:05teraz jest w porządku i robimy krótką sekcję informacyjną tutaj

1:10w tym miejscu w aleje z którym miałem już wcześniej przygotowane niech będzie

1:13wyrównany do środka i zrobimy go też Body kopii.

1:16W ten sposób nabrałem dwa razy klik i to umieścił troszeczkę wyżej.

1:22Chciałbym zrobić mogę w zasadzie skorzystać z gotowego przycisku ale wydaje

1:26mi się że jakiś taki fajny Custom owy całkiem nieźle zadziałał.

1:30W związku z tym skupiłem może sobie to

1:31pole do lewej i ASK Rising zmienimy to pole na Point.

1:38Tekst wrzucamy je tutaj i dodatkowo zróbmy jakiś jeszcze fajny element Przykładowo

1:44element graficzny który będziemy mogli później fajnie zajmować.

1:47Włączymy może obramowanie zróbmy wypełnienie na razie tym kolorem zielonym.

1:51Później chyba globalnie go zmienimy dla projektu pokażę ci jak to zrobić.

1:55Jeżeli podkreślił że taki tekst to będzie wiadomo że jest to przycisk a dodatkowo

1:59możemy jeszcze dać tutaj strzałki strzałki zrobimy sobie sami i w ramach praktyki.

2:05Czemu nie.

2:05Teraz jeszcze trochę to przedłuża i kombinuje tutaj strzał.

2:08Teraz jak robi strzałka FX okazuje się że wcale nie jest to takie proste bo

2:12moglibyśmy kombinować z linii pola moglibyśmy kombinować też z tego gotowego

2:16narzędzia do kształtów gdzie możemy zrobić np.

2:19trójkąt ale możemy też zarządzać ilością kątów i zrobić sobie np.

2:23osiem kont.

2:24Dodatkowo jeśli zmniejsza wartość to zrobię gwiazdkę.

2:28Mogę też zarządzać teraz tymi właściwościami i całkiem fajnie mogę

2:32jeszcze za krawędzie natomiast gotowej strzałki niestety nie ma.

2:36Nie ma też serduszka aczkolwiek serduszko można zrobić za pomocą dobowego i starego

2:40wpisując tutaj na was 3 czyli serduszko i mamy gotowe.

2:44Natomiast z beczki niestety nie.

2:46W związku z tym przechodzę z pomocą z kolejnym klipem.

2:49Działa to nie tylko w xD w różnych programach.

2:51Jeżeli wciśnięty r na klawiaturze i stworzyć sobie kwadrat idealny kwadrat

2:55czyli Shift teraz ten kwadrat Command D i obracać go o 45 stopni.

3:01Tak właśnie w ten sposób puszczane jeszcze jeden kwadrat będzie nam potrzebny czyli

3:05jeszcze raz Command D jeszcze raz obraca się o 45 stopni.

3:08Mamy trzy kwadraty pokażę ci na panelu

3:10warstw to są trzy kwadraty dwa prawie tak samo ale odwrócona i 1 pod

3:14kątem 45 stopni teraz zaznaczone wszystkie 3 3 m i korzystamy z opcji dodawania czyli

3:20po prostu łączymy te wszystkie kształty w jeden.

3:22Następnie musimy wejść do środka do tej grupy i zaznaczyć te wszystkie kształty

3:27albo wcisnąć Command a jak jesteśmy w środku.

3:29Wszystkie trzy kwadraty są zaznaczone mają szerokość i wysokość 18.

3:34Upewnij się proszę że kłódkę masz otwartą żeby wysokość i szerokość razem się nie

3:38zmieniały i teraz Shift możesz strzałka w górę zacząć zmieniać wysokość.

3:42I proszę bardzo ale zaczynała się tworzyć strzałka.

3:46Będzie ona idealna jeśli zaokrąglone

3:48krawędzie czyli przejdźmy do zaokrąglonych krawędzi i np.

3:52wartość 40 Shift i kilka razy strzałka w górę jest OK.

3:56Dlaczego to jest fajne dlatego że możemy

3:57teraz wejść do indywidualnych elementów i je np.

4:01powiększyć wydłużać sobie tę krawędź mojej strzałki.

4:04Rzecz jasna możemy wyłączyć Border a

4:06włączyć sobie wypełnienie Phil i wypełnić to kolorem granatowym.

4:11Teraz już mogę taką strzałę obrócić a

4:13następnie ją zatem zmniejszyć i umieścić we właściwym miejscu.

4:19Może trochę większa a w jednej z kolejnych

4:22lekcji jeszcze dodatkowo zajmujemy zanim przejdźmy do widoku 100 proc.

4:25. Myślę że tak jest w porządku teraz warto

4:28by było na chwilę zamknęła czyli Command i Hill po to żeby mógł łatwo zaznaczyć

4:33wszystkie elementy tutaj Command grupuje i upewnić się że w kontekście tej grupy

4:38którą mogę co prawda zaznaczyć że zamknięta będzie środkowa.

4:41Problem całkiem w porządku.

4:42Może trochę brakuje tu jakiegoś elementu tła jakiegoś elementu graficznego

4:46moglibyśmy jeszcze taki element dołożyć zaraz to zrobimy a tymczasem jak zaznaczył

4:49sobie Word on jest dosyć wysokie a zostało nam do zrobienia tylko jeden element czyli

4:54futer więc możemy spokojnie sobie ten art Board zmniejszyć.

4:58Zostawimy to miejsce na fotel.

5:00Jakiś element jakiś akcent graficzny.

5:02Fajnie było tutaj stworzyć.

5:04Chciałbym przy okazji jeszcze pokazać ci różne integracji.

5:07W zasadzie to dlaczego korzystać z xD a nie np.

5:10zyskać trzeba część filmu.

5:11Oczywiście jest to kwestia twojego

5:12indywidualnego wyboru i indywidualnych preferencji.

5:15Natomiast niewątpliwą zaletą pracy xD jest

5:18to że możemy połączyć je z innymi aplikacjami Adobe oczywiście w zasadzie

5:22każde programowanie się da ale tutaj są pewne uproszczenia.

5:26Jeśli mamy xD Na ogół mamy też cały ekosystem narzędzia Adobe.

5:29No i ta największa umiejętność takiego

5:31współczesnego designer a to jest właśnie umiejętne kombinowanie tymi aplikacjami

5:35i to nie jest tak że trzeba być fanem bowiem jednego rozwiązania.

5:38Ja korzystam bardzo dużo Swing ma sporo

5:40zyskać trzeba trochę xD ale wykorzystuję właśnie tam

5:43gdzie czuję że będę miał dodatkową korzyść np.

5:47z tego że mogę połączyć z nim łatwo Photoshopa.

5:49W związku z tym teraz przejdziemy do

5:51ilustrator i będę chciał stworzyć jakiś prosty element graficzny ilustrator.

5:55Zaczniemy od rysowania

5:57drobnego elementu takiego jak przykładowo Phillipsa wybieram sobie narzędzie elipsy

6:02tworzę jeden kształt będę teraz chciał wybrać tylko wypełnienie do tego kształtu

6:08więc wybierzemy sobie Morze Czarne wypełnienie.

6:11Przejdźmy teraz do górnego menu i z mniej efektów.

6:13Wybierzmy resortem transportu a następnie opcję Atlas form.

6:17Teraz z pomocą transformacji włączymy

6:19Preview a następnie przesuwamy w poziomie o np.

6:2340 pikseli taką córeczkę a następnie jeszcze wybierzmy ilość kopii.

6:29Tutaj mamy kopię np.

6:3210 wybieramy polecenie OK I.

6:34Efekty zostały zastosowane jest trener owalny.

6:38Teraz w poziomie możemy to samo zrobić w pionie.

6:40Czyli jeszcze raz wejść w efekty

6:42i zrobić dokładnie to samo czyli Transformers z Orlen Transport

6:46planu i efekt bo mamy już jeden nadany ale robimy sobie jeszcze jeden kolejny.

6:51Tym razem będziemy mieli werdykt.

6:53Też spróbujmy przykład o 40 pikseli i też

6:56spróbujmy 10 kopii sobie włączyć wybieram polecenie OK.

7:00I tak wygląda jakaś siatka którą przygotowaliśmy.

7:04Fajnie by było tę siatkę stworzyć nieco nieregularne.

7:08Czyli można by było teraz przejść jeszcze

7:10do panelu Window i i z tego panelu można było tutaj widzisz że są dwa

7:16Transformer zastosowane teraz można by było ewentualnie spłaszczone.

7:21Czyli wybrać obiekt i Expander.

7:24I teraz mamy do dyspozycji każdy indywidualny kształt możemy go

7:29możemy wejść do środka kliknąć parę razy i go przesuwać w ten

7:32sposób możemy po prostu Command C and V wrzucić to do xD ponieważ xD to

7:38interpretuje w momencie gdy to chwalimy jako jedną dużą grupę ale w środku

7:42będziemy mieli teraz w każdej w każdym rzędzie dodatkową grupę S z lipca.

7:49Możemy rzecz jasna to łatwo xD też

7:52zgrupowań czyli zaznaczyć sobie to wszystko i Command Shift G.

7:56W tym momencie mamy same elipsy więc w zależności od tego jak byś mocno chciał

8:01zgrupowań możesz też zaznaczyć sobie wszystko Command Shift.

8:04Raz drugi raz już mamy same elipsy i te elipsy teraz możemy.

8:10To też możemy powołać elipsy możemy teraz dostosować indywidualnie do

8:15naszych potrzeb możemy je sobie po zaznaczać z komandorem możemy np.

8:19te dwie usunąć i możemy oczywiście też manipulować ich właściwościami.

8:24Jeśli chodzi o kolor wypełnienia możemy je zmienić.

8:27Możemy zmienić teraz przez ruch czystość.

8:31Możemy rzecz jasna je jakoś zmniejszyć

8:33powiększyć w sumie to nawet mógłbyś powiedzieć że można było to przecież

8:38przygotować bardzo łatwo też z pomocą Rapid GRID.

8:40Narysować sobie kółko i je powielać jasno

8:42możemy tak zrobić ja chciałem Ci jedynie pokazać że masz do dyspozycji cały

8:46wachlarz narzędzi które są w aplikacjach bardzo często np.

8:48ikony wygodnie będzie ci się tworzyło ilustrator.

8:51Jeśli go znasz więc chciałam żebyś o tym pamiętał.

8:55Niektórych rzeczy po prostu xD Nie da się

8:57zrobić teraz przerzucił to pod spód i może zróbmy jeszcze jakiś jeden element.

9:03Ja takich elementów sobie kilka w przerwie między lekcjami też możesz to zrobić.

9:08Może trochę potrenować.

9:09Czyli przykładowo otworzyć sobie jakieś rozmaite kształty.

9:13Możemy spróbować wypełnić taki kształt tym

9:15kolorem zielonym aczkolwiek chciałbym żeby był tak ok.

9:1930 proc. czyli powiedzmy sobie to najlepiej.

9:21Następnie damy to na sto procent.

9:23I to jest taka sztuczka która pozwoli mi wziąć ten kolor 30 proc.

9:27Ale zastosować go na wypełnieniu 100

9:29dzięki czemu on nie będzie przezroczysty a będzie takiego koloru jaki chcę.

9:32Czyli mogę teraz sobie znowu to np.

9:34przerzucić w to miejsce i taki kształt powiększyć umieścić gdzieś

9:39tutaj to mogą być jakieś lampki to mogą być jakieś linie to mogą być różne jakieś

9:44zestawienia takich stalowych kolorów które tutaj pasują więc do eksperymentu jestem

9:49trochę i stwórz trochę takich swoich elementów.

9:52To mogą być rozmaite prostokąt wachlarz paczki.

9:56Możesz eksperymentować z narzędziami które.

9:59Ci łączyć je teraz sobie pozwolą ci łączyć np.

10:03zaznaczone dwa kształty my za dużo z nimi nie pracowaliśmy w miarę oczywista

10:07pokazywała je ale warto sobie to trenować np.

10:10teraz zmienić opasek.

10:11Trochę to obrócić umieścić w jakimś miejscu.

10:13Możesz też próbować oczkami z bólem.

10:16Czyli możesz spróbować tworzyć idealne np.

10:21płynne linie które zdecydowanie później pomogą ci np.

10:25też przy tworzeniu jakichś fajnych grafików czy animowanych żartów

10:30więc zobacz jak taką fajną płynną linię stworzyć.

10:34Czy się uda i następnie możesz zarządzać sobie np.

10:39lubością.

10:40Później możemy zmienić to obramowanie.

10:43Możemy zmienić to jak układają się

10:46krawędzie końcówki dopasować w końcu te linie tak żeby wyglądała jeszcze lepiej.

10:51No i np. wykorzystać ją zmniejszyć ją wykorzystać

10:54ją jako jakiś szlachecki znaczek zmniejszy niz gdzieś umieścić też w tle.

11:01Także proszę sprawdź sobie rozmaite narzędzia i spróbuj

11:05przygotować kilka czy też z pomocą innych narzędzie do obliczeń z pomocą Adobe.

11:09Jest kilka takich kształtów a ja zrobię to

11:12też przed kolejną lekcją i w kolejnej akcji zajmiemy się tworzeniem.