Adobe XD: Tworzymy footer

CC 2020+

0:00Witaj w kolejnej lekcji a w przerwie

0:01pomiędzy lekcjami przygotowałem sobie jakiś zestaw szeregu kresek kropek

0:06polaczków różnych kształtów wielu boków które wypełniały różnymi kolorami.

0:10Proszę sobie kupowałem poświęciłem na to dosłownie 4 5 minut

0:14i będę chciał tych kształtów użyć później jako tło dla elementu strony tak jak

0:18wspominałem natomiast teraz koncentrujemy się na naszym wtedy czyli

0:23przejdę do leja autu i najpierw spróbujmy zaprojektować sobie

0:27futer i dla odmiany tę stopę zrobimy z ciemnego tła na całą szerokość czyli

0:32zaznaczam prostokąt wypełniamy go naszym kolorem wezmą go za Azjatów tym razem

0:37wystarczy kliknąć wyłącza Border dostał i fajnie by było pożyczyć sobie logo.

0:42Zresztą nasze logo w zasadzie i tak

0:44powinno być symbolem więc dlaczego nie spróbować go teraz w symbol.

0:48Napisać że jest to juz logo i chciałbym też stworzyć jego alternatywną

0:54wersję czyli wersję wypełnioną białym kolorem.

0:56Możemy ponieważ jest to Master symbol

0:58znowu skopiować flagę przesunięto na chwilę i znajdziemy Master symbol

1:02wyrzucamy go na ton a wyborcom biletami super i teraz.

1:08Dlaczego by nie zrobić tego jako stan.

1:10Czyli zrobimy nowy stan i tutaj będzie git

1:13i po prostu zrobimy jego wypełnienie koloru białego.

1:16Super przerzuca go jeszcze dostaną od szefa SLD żeby był widoczny.

1:21Natomiast w obce korzystając z setów przerzuca logo i przejdę do stanu wait.

1:28W tym momencie mogę łatwo zmieniać sobie te same logo w to miejsce.

1:33Następnie rysuje linie pokażę ci jak zrobić linie przerywane.

1:37Teraz chciałbym jej obramowanie wybrać na

1:40kolor biały zaraz zmienimy jego pasek ale chciałbym teraz wybrać wariant Dash

1:45oraz GAP czyli rozmiar to będzie jeden Dash zrobimy sobie 10 pikseli i

1:51zrobimy 5 pikseli czyli taką nie przerwano i ustawiamy jej opaski na 20 proc.

1:57. Co ciekawe może teraz fajnie

1:58eksperymentować z taką linią po jej zaznaczenie możesz zmienić różne parametry

2:03jeśli chciałbyś żeby ta linia była miała zaokrąglone krawędzie na przykład

2:06i rzecz jasna możesz też zmieniać wielkość zarówno Dash jak i GAP czyli odstępu

2:12pomiędzy tymi oczkami i dostosowywać do swoich potrzeb.

2:18Na przykład taka może być w naszym

2:19przypadku OK ale jeszcze opasek zmienia na 10 50 żeby była dosłownie ledwo widoczna.

2:24Zróbmy teraz jeszcze szybką notkę jak

2:25Spirit klik na narzędzie tekstu kopii Wright.

2:29Teraz znaczek koperta chociaż jak pisze

2:31kobieta już chyba nie powinno znaczka albo na odwrót ale chciałem pokazać skrót

2:35systemowe na maku to jest obrzęk żeby wstawić kopertę.

2:39Natomiast na PC cie.

2:40Naprawdę nie żartuję.

2:420 1 6 9 na klawiaturze numerycznych jeszcze raz alt.

2:460 1 6 9 na numerycznych klawiaturze.

2:48Z tym że musisz mieć włączony blok jeszcze.

2:50Takie po prostu czary na Maku po prostu.

2:54Jeśli jeszcze kończymy to 2021 np.

2:58w stawie i co umieści to obok USA ale zmienimy trochę parametry tego tekstu 16 i

3:05zamiast Bolt zrobimy po prostu medium a dodatkowo jeszcze opaski.

3:10A po prawej stronie postawimy sobie ikonki mediów społecznościowych.

3:13Skąd te ikonki wziąć.

3:15Może jest jakiś plan.

3:16Jeśli chcesz poszukaj.

3:17Ja natomiast chciałem wykorzystać ten moment na pokazanie ci aplikacji z której

3:20bardzo często korzystam czyli aplikacji ikon jar.

3:23Niestety jest dostępna tylko na Maka

3:25ale za to pozwala wrzucić sobie w odpowiednie sety wszystkie pliki s v.

3:30Czy wszystkie pliki PNG z ikonami

3:32zgrupowane w jakieś różne sety ja mam też np.

3:36ikonki czy rozmaite inne często też sety ikon które znajdziesz w sieci przechodząc

3:43z tymi z takimi plikami kropka ikon Jar które można tutaj bez problemu importować

3:47i teraz można w takim secie Karen Collection np.

3:50poszukać sobie Twittera.

3:53I skopiować odpowiednią ikonkę na przykład możemy użyć tych ikon w Kłodzku tylko

3:58wrzucają tutaj po prostu bezpośrednio z dala przerzucać na xD I to działa.

4:04Zresztą to jest warstwa wektor owa czyli

4:06to co mamy tutaj kształty elipsy ścieżkę więc super jest to dalej edytor.

4:13Mogę sobie całość zaznaczyć a następnie jeśli chodzi o Border wrzucić tutaj białe

4:16tło albo będę potrzebował wrzucić ikonkę w odpowiednie miejsce.

4:21Skoro już mam tu literę A może jeszcze

4:22weźmy YouTube'a i wykorzystamy analogiczną ikonkę w kółku

4:27i może jeszcze Instagram to tutaj ostatni będzie Facebook.

4:34Wrócimy w kółku ikonkę teraz na wszystkich możemy zastosować Border białe.

4:40A następnie przerzucić je tutaj.

4:43Teraz zaznaczam że wszystkie te grupy

4:46upewnij się że są wyrównane najpierw do górnej krawędzi teraz no tak zależałoby

4:51nam żeby one były wszystkie większe też zaznacza warstwę z tłem wybiera Command a

4:55żeby ją zamknąć żeby nam nie przeszkadzała wyznaczaniu teraz powiększa ikonki ale

5:01w takich rozmiarach jakbym chciał mieć myślę że to jest w porządku.

5:04Zobaczę wtedy teraz możemy jeszcze np.

5:06zmienić sobie Border na dwa i jeśli ścisk na tę ikony np.

5:11z his na pierwszą i ostatnią

5:13zaznacza się raz jeszcze i teraz wyrówna no to myślę że wygląda to już całkiem

5:18OK teraz umieszczamy je tutaj i opasek zmieńmy im też na 20 czy 20 proc.

5:24będzie OK to robimy im ewentualnie jeszcze jakieś później Stany żeby fajnie to

5:28wyglądało zobaczmy na sto procent i bez linii bo działki i poza tym że

5:33wywalił mi się teraz xD i musiałem trochę odtworzyć rzeczy to jest całkiem w

5:36porządku także dorobi mi jeszcze do fotela pozostałe elementy.

5:40Wybieram ramkę tekstową i stworzy sobie pierwszą ramkę.

5:43Będzie to ramka której typ po prostu

5:47zrobimy jako Body ale użyjemy jasnego białego wręcz koloru tekstu

5:53i takich ramek będzie kilka umieszczają w odpowiednim miejscu.

5:57Następnie stworzy sobie jeszcze jedną mniej więcej gdzieś będzie jeszcze jedna

6:00będę miał trzy takie działy tutaj będzie się niestety działo.

6:03Zresztą mogę już sobie pożyczyć tylko żebym zaznaczał w odpowiedniej

6:08kolejności czyli zaczynam od tego z szefem tzn.

6:11Mogę pożyczyć sobie je z naszego dokumentu

6:14Google shit wybieram polecenie Public link continuum.

6:18Tutaj się znajduję już coś takiego jak folder i rzucę walczył z Linz

6:24już lecę teraz powiela sobie tę sekcję i chciałbym odrobinę zmienić ten tekst po

6:30pierwsze będzie to ramka testowa której wielkość będę chciał określić.

6:34Po drugie zmienię to sobie z 18 na 16 z

6:38Boulder a połączymy się na medium i chciałbym jeszcze zmienić kolor tekstu

6:44czyli chciałbym żeby ten tekst był odrobinę transparentny.

6:47Może tak to zrobimy.

6:48Czy ustawie go na tym momencie 50 proc.

6:51później jeszcze pewnie to stosujemy. 2.

6:53Druga taka sekcja będzie podniósł Peterem mogę ją od razu przesunąć w to miejsce z

6:57autem i z tym żeby zachować tę zachować jedną linię.

7:02Teraz zaznaczam te dwa elementy z Shift Public link też mam przygotowane treści.

7:07Wydaje mi się że to futer content wybieram polecenie.

7:10Zaznaczam to jeszcze raz powiela tę ramkę

7:12z All Time i z kolei tutaj w sekcję Beauty i link po prostu umieszcza linki więc np.

7:17piszę tu link i prawie że będzie to ramka

7:20typu point tekst mogę teraz łatwo włączyć sobie Rapid GRID podzielić to dwa razy

7:25będę miał dwie kolumny jedną pod linkami jedną pod but i może trzy rzędy zrobimy.

7:31Ok stosujemy tutaj jeszcze odstępy wydaje mi się że jest w porządku.

7:35Te linki mam już przygotowane.

7:37Grupuje sobie pola tekstowe zaznacza wszystkie pola z Shift i Commander.

7:43Teraz wybiorę jeszcze raz pakiet Public

7:45link continuum i treści dla tych linków futer link z Play.

7:49Proszę bardzo spróbujmy pożyczyć import do teraz rząd kopiuje teraz zaznaczam którąś

7:55warstwę tekstową i wklej żebym miał trochę bliżej i zmienia.

7:58Oczywiście zostawię Border Sims 3.

8:02Chyba będę chciał zmienić jednak na dwa i wybiorę kolor białe.

8:07Jeśli chodzi o opaski to może spróbujemy 20 jednak było OK jeśli chodzi o grubość.

8:13Natomiast będziemy musieli to zmienić np.

8:15na 40 pikseli wysokości i trochę za mało wybierzmy 50.

8:19Trochę jeszcze to zmniejsza.

8:21Będę potrzebował jakieś fajne ikonki

8:23niestety a więc skorzystam znów u mnie z ikon jar i mogę wyszukać sobie jakieś

8:28ikonki e-mail a ta się nawet całkiem nadaje więc wrzuciła ją tutaj.

8:32Jeśli chodzi o Border zróbmy biały kolor i może Sims 2 ma grubość obramowanie a

8:38będzie to całkiem nieźle wyglądało też ustawiamy ją na 20.

8:42Zaznacz oba te elementy upewnij się że ikonkę jest równo w pionie

8:46jest w porządku teraz zaznacza tę treść rzucę tutaj

8:53i wydaje mi się że moglibyśmy spróbować to zmienić tutaj na regulator będzie

8:58troszeczkę cieńsze i trochę zmienić opaski.

9:01Tego tekstu może na około 30 proc.

9:05Teraz jeszcze się pewnie też że ten tekst jest z kolei środkowa.

9:10No i super wygląda to całkiem nieźle.

9:12Możemy nawet delikatnie zmniejszyć to pole no i stworzyć jeszcze guzik.

9:18Może na podstawie również

9:20tej ramki tekstowej wyrównaniem do prawej zróbmy Point.

9:23Tekst piszemy tutaj Apps.

9:26Dajmy to pod Górnikiem teraz jeszcze pracujemy ładnie GRID ale w

9:32tym przypadku chyba chciałbym żeby miało to 100 proc.

9:36i żeby była pewność że jest to guzik jeszcze pod.

9:40No i chyba wszystkie elementy do fotela mamy czyli skupiłem się najpierw na

9:43stworzeniu tych elementów teraz skupię się na samym a ponieważ wydaje mi się że

9:47powinniśmy jeszcze zaznacza całe Art Board i odrobinę go i odrobinę go powiększa

9:53ponieważ wydaje mi się że w tym folderze jest trochę za mało oddechu

9:57że powinniśmy go sobie przerzucić mogę kliknąć na kłódkę aby odblokować bardzo

10:01łatwo przerzucić go może na razie tutaj zróbmy po prostu ten folder większy.

10:08OK.

10:09Teraz znowu zablokuje tą warstwę

10:13i upewnij się że patrząc na to z jakiejś odległości i tak jak teraz czyli przy ok.

10:1870

10:20level że to jest odpowiednio rozszerzone że jest to jakiś oddech że jest ta

10:24przestrzeń zarówno w tych elementach na dole jak i te górne też możemy sobie teraz

10:28zaznaczyć przesunąć się tutaj bardziej generować w takim powiększonym folderze.

10:34Jeszcze chciałbym podejrzeć jak GRID aczkolwiek nie będę się tego leja od GRID

10:38tak mocno trzymał gdybyśmy go mocno trzymali to

10:41w przypadku gdy mamy tu dłuższe krótsze teksty wszystko by nam się rozjechał więc

10:45lepiej jest w tym akurat konkretnym przypadku zadbać o to aby optycznie

10:49wyglądało to spoko i przeciągnąć tylko oczywiście do lewej i prawej krawędzi.

10:54Też o to aby wszystko to było równo adresowane.

10:58Czyli ta górna krawędź. No właśnie np.

11:01pytanie jest takie gdzie powinna być górna krawędź tego tekstu czy powinna być równo

11:07z tą górną krawędzią czy jest krawędzią tego tekstu.

11:10Trudno mi powiedzieć.

11:11Dopóki tego nie zobaczę a szczerze mówiąc

11:13po prostu lepiej jest na to spojrzeć zobaczyć teraz spróbować wyrównać np.

11:17teksty równo.

11:19I wydaje mi się że tak nie będzie dobrze że jednak powinno być tak że ta górna

11:25krawędź będzie z góry będzie zgadzała się z górną krawędzią tekstu więc są różne

11:29szkoły ale ja bym zostawił to tak bym ich po prostu optycznie bardziej pasuje.

11:33Stąd w tym akurat konkretnym przypadku nie

11:35będziemy więcej polegać na ale bardziej też zależy nam trochę na tym żeby

11:40tę sekcję do siebie pasowały czyli żeby niósł eter był blisko Fletchera czyli żeby

11:45było widać że jest to jedna całość więc możemy jeszcze trochę nawet zbliżyć do

11:49siebie może rzeczywiście tutaj trochę przerzucić na dół i jeszcze spróbować

11:53zbliżyć do siebie żeby rzeczywiście optycznie była to jedna całość.

11:58Tak samo ta część wydaje mi się że optycznie powinna być to jedna całość

12:01czyli to jest jedna całość ona ma jakiś parking w tym miejscu możemy sobie nawet

12:06spróbować myszki ten obiekt jakimś jakimś prostokątnym

12:11i ten sam parking powinien być moim zdaniem tutaj to już wygląda dobrze.

12:16Ta odległość powinna być mniej więcej

12:18równa tej odległości i teraz optycznie wszystko się zgadza.

12:22Moim zdaniem możemy zostawić futer w

12:23takiej formie i oznacza to też że mamy skończone całe lato.

12:27Dodamy do tego jeszcze elementy graficzne.

12:31No ale naszym głównym zadaniem w kolejnej

12:33lekcji będzie uporządkowanie tego wszystkiego będzie też równe odstępu

12:37między lekcjami bo nie bardzo się tym przyjmowaliśmy więc mamy trochę takiej

12:41prace porządkowe i niestety nie najciekawsze.

12:43Ale trzeba ją koniecznie zrobić żeby

12:45później można było sterować po tym Jałcie i tworzyć po pierwsze nowe pod stronę.

12:50Po drugie tworzyć warianty response.

12:52A po trzecie przygotować to do Development.

12:55Do usłyszenia.