Adobe XD: Praca z grafiką

CC 2020+

0:00Witaj w kolejnej lekcji poprzednich mówiłem ci już jak możesz importować

0:03rozmaite zasoby do XTB z pomocą bibliotek czy innych aplikacji.

0:07Te zasoby sektorowe i będziemy finalnie rzeczywiście z wektorów korzystali.

0:12Ale chciałbym pokazać ci też jak można

0:14importować i pracować z mapami Jeśli tworzysz pliki do tej lekcji i będziesz

0:19miał te pliki JPG możesz z dowolnego zdjęcia dowolnego pliku skorzystać.

0:22I pierwszy w oczywisty sposób to

0:24przeciągnięcie tego zdjęcia po prostu na CAN was do XD.

0:28W tym momencie zostało za importowane.

0:31Możemy eskalować Domyślnie wszystkie mapy wszystkie te elementy które mają taką małą

0:35ikonkę bit mapy malują się w proporcjach więc nie trzeba przetrzymywać Shift.

0:40Dodatkowo można przytrzymać alt po to żeby

0:42skasować taki element taki Asseco importowany od środka.

0:46Czy ja korzystam z tego typu i mordowania zdjęć.

0:49Raczej nie. Prawie nigdy nie używam tego sposobu to

0:52znaczy prawie nigdy nie wrzucam takiego zdjęcia po prostu bezpośrednio na kampus.

0:56Raczej to co robię to tworzę sobie np.

0:59prostokąt narzędzie R i teraz przeciąga to

1:03zdjęcie i opuszczam bezpośrednio do tego prostokąta.

1:06Dlaczego jest fajnie.

1:07Nie sposób bo teraz możemy po pierwsze skasować oczywiście teraz żeby skasować w

1:11proporcjach to trzeba wcisnąć Shift ale możemy teraz eskalować to w taki sposób że

1:16zobaczę to zdjęcie starałam się wypełnić ten kształt który na którym pracujemy

1:20konkretnie emituje to taką właściwość CSS biegnąca cover I jest naprawdę fajna.

1:25Jeśli przykładowo chciałbyś umieścić zdjęcie w tle dla ponad folder no to nie

1:30miałbyś jak tego zrobić po zwyczajnym zamontowaniu zdjęcia a teraz możesz po

1:33prostu dostosować wysokość takiego elementu do holu i jest OK.

1:37Rzecz jasna możesz to umieszczać w nietypowych kształtach.

1:41Możesz na przykład rzucić sobie takie zdjęcie elipsy i nie jest to typowa maska.

1:46To zdjęcie zachowuje się tak jakby było po prostu wypełnieniem dla tego kształtu.

1:51A nie jest to typowe maskowania dlatego chciałbym teraz pokazać Ci maskowania z

1:55którego też bardzo często będziesz korzystał.

1:57Ale zanim do tego przejdę to jeszcze jeden fajny tip.

2:01Jeśli będziesz miał przeglądarkę otwartą obok swojego xD to możesz dowolne zdjęcie

2:07po prostu przeciągnąć i opuścić i zostanie ono za importowane super to działa bardzo

2:11fajna opcja działa również z tymi wszystkimi autami czyli teraz możesz

2:15złapać zdjęcie z PKS kliknąć i umieścić je na dowolnym kształcie.

2:20Osobiście dość często korzystam z tej opcji natomiast ma ona jedną wadę nie daje

2:24nam możliwości zmiany położenia tego zdjęcia wewnątrz obiektu nie daje nam

2:28możliwości zdecydowania co tak naprawdę chcemy odkryć.

2:32I tutaj maskowania okazuje się dużo lepszą opcją.

2:35Jak wykorzystać maskowania.

2:37Po prostu przeciąga zdjęcie odpuszczamy xD.

2:40Możemy też skopiować Command i Command V czyli mamy obrazek.

2:43Następnie wybieramy kształt bądź rysuje nawet możemy sobie stworzyć jakieś dowolne

2:47kształty pędzlem którym będziemy maskować to zdjęcie.

2:50I teraz wystarczy zaznaczyć obie te warstwy.

2:52Możesz to zrobić w dowolny sposób.

2:54Kolejna przechodzimy do menu Object a następnie wybieramy polecenie moskwy.

2:58Albo jeszcze prościej.

2:59Shift Command Shift Command spowoduje że i

3:03tutaj kształt powinien być znajdować się na górze czyli ten kształt który znajduje

3:06się na górze ma nam zdjęcie które jest pod spodem.

3:09Jeśli teraz otworzymy taką grupę klikając

3:11na nią zobacz że możemy modyfikować również położenie tego zdjęcia

3:16możemy je przez malować możemy umieścić je w dowolnym właściwym dla nas miejscu

3:20prawda w porównaniu do jednej wypełnionej warstwy mamy tutaj maskę i dwie warstwy w

3:24środku no ale daje nam to także więcej możliwości ja uważam że to jest jeden z

3:28lepszych pomysłów maskowania w narzędziach do designu.

3:31Także warto sobie to przećwiczyć

3:33i w zasadzie jeśli chodzi o umieszczanie obrazków to wszystko.

3:36Na koniec zostawiłem jeszcze fajny bonus mianowicie po raz pierwszy zajrzymy teraz

3:40do zakładki z planami xD i w tym momencie nie masz żadnych planów

3:45ale możesz je przeglądać za pomocą polecenia bliska Ever plagi.

3:48I tutaj jest sporo

3:50takich polecany w Platinum lub możesz po prostu udać się do wyszukiwarki.

3:54Czym one są.

3:55Są dodatkami do xD które możesz instalować

3:58i są przygotowane przez zewnętrznych developerów.

4:00Przykładowo zainstaluje w sobie teraz Faces wyrzucamy też Platinum Stock solo.

4:06I nie przejmuj się jeśli te plagi będą albo nie będzie ich już w sklepie

4:11finałowym albo w ogóle nie będą jakoś inaczej działały.

4:14Te plany często są modyfikowane w związku

4:17z tym pokazuje ci to jedynie po to żebyś miał orientację jak możesz jeszcze

4:21rozszerzyć możliwości Adobe XD Właśnie korzystając z paulinów.

4:25No i pierwszy z nich to stop Solo które chciałem pokazać jeśli stworzymy na

4:29przykład kształt prostokąta możemy przejść do Solo.

4:32Teraz w wyszukiwarce wpisujemy jakiś jakąś

4:35frazę poszukujemy sobie konkretnego zdjęcia.

4:37No i mamy masę zdjęć. To są zdjęcia z ang.

4:40splash. Jak widzisz można je bez problemu

4:43po prostu podłączyć pod montować do swojego designu.

4:46Możesz też kliknąć na tą paletę i powiększyć ją.

4:49Zauważ że w tym momencie mieści się tutaj więcej zdjęć.

4:52Masz zaznaczone kształty wystarczy teraz

4:54wybrać polecenie please i zostaje takie zdjęcie zrobione także solo.

4:58Całkiem fajny plagi.

4:59Będzie masa różnych innych planów które

5:01będą pozwalały ci umieszczać też zdjęcia z innych miejsc.

5:05Jest też plug in który obsługuje bibliotekę zdjęć a Adobe stok.

5:09W związku z tym warto tutaj poszukać

5:12i dzięki temu jak widzisz można łatwo te zdjęcia umieścić a plagi niełatwe.

5:17Chciałem Ci pokazać też nie bez powodu

5:18jeżeli przykładowo stworzymy sobie Eclipse i będziemy chcieli wypełnić ją Avatar em

5:23to możemy przejść do Faces jest po prostu klik gameplay.

5:26Ten obrazek jest automatycznie ściągane i zostanie wypełnione nim nasze dziecko jest

5:31w skali 2 razy więc przystosowane do Red Line.

5:34No i dodatkowo możesz tutaj uwięzić różne kryteria np.

5:37możesz nawet znaleźć kobiety które mają 30 albo 34 lata są szczęśliwe i np.

5:42mają brązowe włosy albo skorzystać z

5:44serwisu The person Deus Ex czyli ze zdjęć ludzi wygenerowanych przez sztuczną

5:49inteligencję którzy w rzeczywistości nie istnieją.

5:51Ok. Co jeszcze ciekawego można z tym zrobić.

5:54Weź pod uwagę to że możesz ten sposób zacząć budować całe komponenty czyli

5:58gdybyśmy chcieli budować jakieś na przykład morale klientów i zrobić jako

6:04część takiego maniaka Eclipse z Avatara czy przykładowo

6:08umieścić ją TUTAJ a następnie cały ten element zamknąć w grupę.

6:15No i jeszcze skorzystać z Rapid Grid

6:17i umieścić trzy takie elementy poziomo dostosować margines.

6:22No to teraz wystarczy że zaznaczył Commander klikając jeden taki owad

6:25następnie wybierzemy polecenie Play i ten login automatycznie rozpozna że jest

6:31to RIP Grid i umieści awatara tych wszystkich osób w odpowiednich miejscach.

6:35Możemy teraz nimi zarządzać jak widzisz

6:37wszystkie się zmieniają w ramach jednych ustawień.

6:40Dodatkowo możemy kliknąć jeszcze raz np.

6:42Play żeby wygenerować te bójki raz jeszcze jeśli nam się nie podobają itd itd.

6:47Teraz będziemy pracować na Rapid gdzie na przykład stworzymy więcej elementów.

6:51To też warto kliknąć na wystarczy kliknąć na jeden z nich wybrać jeszcze raz Play i

6:55wszystkie zostaną automatycznie generowane a nawet udało nam się trafić.

7:00Jennifer Aniston natomiast na razie pozbędziemy się tego elementu.

7:03I jeszcze jeden plan który chciał pokazać

7:06a z którego będziesz mógł skorzystać w celu umieszczenia grafiki w to miejsce.

7:09Ten list folder mogę już usunąć.

7:11Przejdźmy do wyszukiwarki Platinum.

7:12Dodajmy jeszcze jeden dla gmin.

7:14Ten plan się nazywa Android i mogę go stąd

7:16po prostu zainstalować i przejść do jego właściwości.

7:21Andrea oferuje nam szereg grafik grafik

7:23jest naprawdę bardzo bardzo dużo możemy je sobie wyszukiwać albo po prostu przeglądać

7:29i w tym momencie jeśli jakiś obrazek nam się podoba po prostu klikamy na niego

7:34i wystarczy że teraz w play i my go z pomocą komend w odpowiednie miejsce

7:39jak widzisz mogę go bez problemu a nie przez kasować i umieścić tutaj.

7:43Możesz więc przeszukać teraz bazę Android

7:45i znaleźć sobie jakąś fajną grafikę którą będziesz chciał umieścić.

7:48Jeżeli chodzi o edycję kolorów to zobacz

7:50że automatycznie został dodany taki kolor teraz do naszej biblioteki setów jeśli

7:55przeniesiemy się do Asseco i to co możemy zrobić już nie pokazywała wcześniej.

7:59Prawym przyciskiem myszy edytować ten kolor i go zmienić np.

8:02na kolor zielony.

8:04W ten sposób zostanie on zmieniony w

8:06obrębie całego naszego projektu a w tym konkretnym przypadku we wszystkich

8:09miejscach w tej grafice w których został umieszczony.

8:12Jeżeli o mnie chodzi to skorzystałem z

8:15wektorów które mam już przygotowane wyciągnąłem je sobie z add net.

8:19To jest bardzo fajna strona gdzie co

8:20prawda są płatne zasoby ale odrzucam ci też link.

8:23W komentarzu będziesz mógł z jego pomocą

8:26przejść na 8 i ewentualnie poszukać jakichś fajnych płatnych zasobów.

8:29Ja sięgnąłem sobie fajny grafik który nazywa się cuda miód i jest dostępny.

8:34Jest fajny też dlatego że zawiera różne

8:36postaci które będę mógł ułożyć sobie w dowolnej konfiguracji.

8:40Zawiera też jakieś elementy takie jak stoły tła stoliki i inne rzeczy które mogą

8:45mi się przydać przy konstruowaniu jakiejś sekcji.

8:48Bardzo fajne są tego typu grafiki które możemy poskładać czyli zestawy ilustracji

8:53które mają co prawda jakieś zdefiniowane sety.

8:55Tutaj niestety płatnych zasobów tego typu

8:58nie mogę dołączyć do źródeł do kursu ale możesz spokojnie sobie użyć właśnie tych z

9:02Android ewentualnie podrzuca ci w komentarzu jeszcze linki do wielu

9:05ciekawych fajnych darmowych sektorowych grafik tego typu więc kombinuje ściągnij

9:11sobie jakieś fajne zasoby i po prostu przerzucić je do XD.

9:14W tym przypadku moim zdaniem najłatwiej jeśli chodzi o skecze a w niektórych

9:18przypadkach możemy po prostu Command C i Command V w tle.

9:21Takie elementy w innych przypadkach będzie to trochę bardziej złożone i wymagające i

9:27czasem jeśli już mamy na przykład w ten sposób przygotowany set

9:31czyli cały zestaw różnych wektorów najczęściej dobrym pomysłem będzie po

9:35prostu eksportowane jako pliku V g zaznacza aż taką grupę albo grafikę

9:39wybierasz Plus Sport albo w skeczu a następnie jako

9:43format wybierasz S V g po to żeby przerzucić wektory zapisuje to jako S V g.

9:49I teraz mogę już otworzyć sobie xD a następnie przenieść plik S V g

9:53bezpośrednio do X DK a teraz Alt i z Shift to zaluje żeby zachować proporcje.

9:59Całkiem nieźle.

10:01Teraz się zastanawiam czy tło dla całej strony powinno właśnie być tego samego

10:05koloru co tło tutaj mogę trochę je zmienić.

10:09Czyli mogę wybrać kolor taki odrobinę bardziej padające szary.

10:14Może w ten sposób

10:16i zobaczę jak wygląda ten element a następnie zmienię trochę jego tło na

10:21bardziej ciemne niebieskie i teraz wydaje mi się że jest całkiem fajnie.

10:25Mogę przejść do kolejnej lekcji.