Adobe XD: Sekcja z artykułami z bloga

CC 2020+

0:00Cześć Witaj w kolejnej lekcji w której

0:01robimy dwie ostatnie sekcje strony głównej.

0:04Co prawda tych sekcji moglibyśmy zrobić

0:05bardzo dużo odrobić sobie jakieś fajne ale albo masę innych fajnych elementów.

0:10Ale to jest głównie kurs xD i wydaje mi się że większość technik pracy które ja na

0:14codzień stosuję już mamy omówione w związku z tym byłoby to tylko powtarzanie

0:18a także Zróbmy sobie jeszcze dwie sekcje zobaczysz że tę sekcję tworzy się teraz

0:22już bardzo szybko i za każdym razem proponuję ci jak

0:25będziesz pracować xD zastanowić się czy ja mógłbym trochę ulepszyć np.

0:30coś po to żeby nie klikać 10 razy czyli przykładowo ta ramka testowa którą

0:34musiałem parę razy cenzurować względem tekstu zaznaczała centra miałem.

0:38To są trzy kliknięcia.

0:39Tymczasem przecież mógłbym ten tekst zmienić na tekst wyrównany do środka tekst

0:44typu point Point tekst i teraz kupując sobie sekcję którą mam w kopii naszym

0:50dokumencie automatycznie by mi się to ładnie środkowe działo.

0:52Ta ramka testowa jak widzisz jest już

0:54środkowa Ana więc to tutaj będzie działać wystarczy kopiuj wklej.

0:58I jeszcze mogę dwa razy kliknąć na tą

1:00kolejkę po to żeby zmniejszyć tę ramkę i w ten sposób

1:05rzeczywiście można pracować już dużo szybciej.

1:07W tej sekcji reset ad hoc chciałbym

1:09przygotować trzy kafelki ostatniego ostatnich artykułów z bloga.

1:14Znowu pożycza sobie mogę kliknąć i skopiować a następnie kliknąć ten artykuł

1:19po to żeby upewnić się że to właśnie w okolicy tej warstwy dokładnie pod nią

1:23zostanie wplecione ten element który jest kupowałem i teraz składam go na siatce tak

1:28żeby mi się zmieściły takie trzy elementy czyli chciałbym w

1:32poziomie mieć trzy takie kafelki w tym odkrycie które stworzyliśmy.

1:37No i zacznijmy od pierwszego.

1:38Oczywiście najpierw przygotowujemy jeden element może trochę go zmniejsza teraz tak

1:43do pliku jego wybieram Command D i umieszcza w ten sposób

1:48podzielę ten kawalek po prostu na grafikę która znajdzie się powyżej

1:52i tło które znajdzie się poniżej tej grafice wyłączy sobie siadał.

1:56Będę chciał też dla tych dwóch krawędzi.

1:58Może zmienimy na razie zupełnie nie po to żebyś wiedział dokładnie co robię.

2:01Zatem dla tych dwóch krawędzi włączam

2:03zaokrągleniu i teraz mamy dwa kształty jeden taki drugi i to bardzo fajnie będzie

2:08działać ponieważ ten kształt postawimy sobie grafikę i tę grafikę weźmiemy czas

2:13znów ja przygotowałem sobie po prostu kilka grup.

2:16Teraz jak zaznacza Shift skaczą tutaj też

2:18wystarczy wybrać Marek eksport bo my to sobie eksportujemy.

2:22W plikach PNG w skali dwa razy wybieram

2:25polecenie Export Collection i wrzuca to do katalogu tej lekcji do folderu FX wybieram

2:30polecenie eksport teraz dalej pracujemy nad opisem być może trochę większe to tło

2:36i zbliżamy się do Command 3 możemy przybliżyć.

2:40Teraz tworzymy ramki tekstowe wybieramy te

2:42klikamy i pierwsza to będzie kategoria więc kategorię sobie piszemy.

2:47Wyrówna to od razu do lewej strony zaraz i tak będę zmieniał style tego tekstu.

2:51Druga to będzie tytuł.

2:55A trzecia to będzie autorem.

2:58I teraz jeśli chodzi o kategorię możemy

3:00zastosować kapitan zaraz jeszcze zmienimy kolor tytuł to będzie drugi.

3:04Pierwszy będzie za duży.

3:05No a jeśli chodzi o autora.

3:07Myślę że moglibyśmy stworzyć sobie jakieś

3:09własne style czyli zrobić to w jakimś szarym wyjść od body kopii.

3:15Wyjść rzeczywiście od KPN tak jak to

3:16zrobiliśmy ale zrobić jakiś bardziej szary kolor.

3:21W ten sposób jeśli chodzi o samą kategorię to przybliży się tutaj

3:26i chciałbym zrobić dla niej ramkę czyli zrobimy taką budkę która będzie miała

3:31zaokrąglony narożnik i którą umieściliśmy pod tekstem.

3:37Teraz może zróbmy ją troszeczkę większą

3:41i jeszcze bardziej okrągły narożnik i teraz tę kategorię umieści na środku.

3:45W ten sposób zmienimy trochę właściwości czyli włączymy Border a jako wypełnienie

3:51może zróbmy właśnie ten kolor zielony albo te które mamy tutaj.

3:54Natomiast to będzie kolorem.

3:56Ten tekst będzie kolorem białym i a

3:58następnie zaznaczam sobie biały kolor i z tego już na tym etapie można było

4:02stworzyć komponent ponieważ te nazwy kategorii będą dynamiczne.

4:05Więc zaznaczam dwa te elementy Antka

4:08upewnij się że właściwości ramki tekstowej są odpowiednie czyli właśnie do lewej.

4:12Chciałem wyrównać tekst.

4:13Natomiast jeśli chodzi o cały komponent mógłbym na niego wrzucić też parking

4:17i jeśli bym zostawił te właściwości to mamy 4 8 3 9.

4:21Trochę nierówno więc możemy zrobić 4 4 i 8 8.

4:27Wtedy będzie to znacznie lepiej a

4:29optycznie wygląda całkiem nieźle i jeszcze warto by było to wszystko

4:33rozmieścić najpierw zobaczmy jak będzie wyglądało w dużej skali.

4:37Wybieram Command 1 no i już widzę że tutaj

4:39mamy trochę za mały kontrast między tą kategorią co można zrobić ewentualnie

4:42jakoś to jeszcze bardziej pogubić ale już nie bardzo da radę.

4:45Nie powinno to przejść żadnych testów

4:47więc wybierzemy i zmienimy na razie tymczasowo kolor np.

4:51na ten nasz granatowy.

4:53Teraz spróbuję zamknąć to wszystko w komponent czyli zaznacza a następnie

4:56wybiera Antka stworzyłem sobie komponent 11.

4:59Ten 10 komponent to jest kategoria A ten 11 to jest Block powiedzmy.

5:06Wróćmy tu jeszcze jakąś grafikę mamy przygotowane wszystkie sceny możemy

5:09przerzucić grafikę bezpośrednio na prostokąt i to jest prostopadłą.

5:14Teraz ma przezroczyste tło więc mogę go

5:15ewentualnie powiesić wrzucić pod spód a następnie zmienić jego tło.

5:20Mógłbyś się pokusić o to żeby zrobić tutaj standardową maskę wtedy miało być dużo

5:24więcej kontroli nad tym jak jest pozycjonowanie.

5:25Jaka jest wielkość tego obrazka ale

5:27pamiętaj o tym że później w finalnym nie jeśli już zrobimy stronę to nie będzie

5:32tak że możesz sobie jeden obrazek przestawić w lewo drugi w prawo w związku

5:36z tym one powinny trzymać jakiś konkretny rozmiar i ten rozmiar powinien ładnie się

5:40dopasowywać właśnie właściwościami CSS podobnie jak tutaj się rozciąga nasze tło.

5:45To co proponuje teraz zrobić to znów jak zwykle RIP GRID po to żeby przyspieszyć

5:50prace zarządzane margines sami także bo ładnie leżało to na siatce.

5:56Mamy teraz dynamiczne tytuły Rapid GRID już mi nie jest potrzebny.

6:00Ubolewam że niestety komponent Rapid gdzie

6:02nie da się tego odmienić tak łatwo z tych planów np.

6:06właśnie zgłosić.

6:08Ale myślę że to wkrótce będzie więc proszę

6:10sprawdził siebie a ja tymczasem szybko przekazałem w końcu nie ma tego dużo.

6:15Mamy tytuły fajnie było dopracować to

6:18teraz trochę na Androidzie a jeszcze mamy odmianę obrazki czyli

6:22zarządzi my tymi obrazkami scena czwarta będzie tutaj i scena piąta.

6:26Rzucamy ją w to miejsce.

6:28No i super teraz spróbujmy dopasować na Master komplecie

6:34znów jak zwykle komentarze Command V to jest już instancja.

6:39Następnie szukam tego Master komponentu czyli jest to wycinanie komend X

6:45i wrzucam sobie na arkusz komponentu a mi żebym się nie pomyliło.

6:50Command 3 mogę się do niego przybliżyć.

6:52Command cudzysłów skrót z klawiaturą

6:54naprawdę ratują życie i zarządzanie tymi ocenami na giełdzie czyli tutaj.

7:01On jest trochę nierówny.

7:03Ten komponent w siatce

7:04ale musi tak być przez margines więc zostawiam to tak jak jest.

7:08Upewnij się na pewno że wszystko jest

7:11wyrównane do lewej krawędzi i to wszystko jest wyrównane.

7:14Tutaj akurat mamy około 30 pikseli od lewej krawędzi 20 od górnej.

7:20Myślę że jest jak najbardziej w porządku

7:22i starają się optycznie też to dopasować czyli bardziej ten tytuł należy jednak do

7:27autora więc połączymy to razem umieszczamy trochę wyżej i teraz mogę już zmienić też

7:32tą przestrzeń na dole żeby była mniej więcej równa z tym co jest tutaj.

7:36No może trochę damy więcej przestrzeni czyli zróbmy jeszcze Wszystko przesunie

7:40się o 10 pikseli w dół i tutaj będzie 30 tu też będzie mniej więcej 30 w porządku i

7:47teraz ostatnia rzecz która została nam do zrobienia jak zwykle przy tworzeniu nowego

7:50komponentu patrzymy jak to się skazuje na różne ekrany.

7:54Próbujemy eskalować.

7:56No wygląda nieźle jeśli chodzi o zdjęcie

7:58ale tekst się rozszerza jeśli chodzi o odstępy czyli zaznaczam że znów te rzeczy

8:01które mają być przesuwane razem i między nimi odstępy nie będą się zmieniać.

8:05Command grupuje tytuł z autorem i upewnił się że jest on wyrównany jakby wciągnięty

8:10do dolnego dolnej krawędzi dzięki temu ten margines pozostanie stały.

8:14W zasadzie zależało najbardziej żeby był

8:16do dolnej i lewej stały ten margines i tak samo zrobimy w przypadku czyli dolna.

8:22Zostawimy to tak a teraz skierowanie już będzie zachodziło idealnie.

8:27O ile rzeczywiście będziemy eskalować w

8:28górę skierowanie w dół spowoduje że niestety ta ramka będzie się trochę

8:32zjeżdżać ale na to już nie mamy do końca wpływu to co możemy zrobić to ewentualnie

8:36zmienić tekst i zadeklarować jakiś rozmiar po to żeby ten tekst się przeleciał.

8:41Aczkolwiek to też nie będzie idealne

8:42rozwiązanie w przypadku gdy mamy jakąś tam w miarę stałą wysokość kafelki więc

8:46to jest chyba już najlepiej co się da jeśli chodzi o ekspansję.

8:49Kolejny komponent mamy gotowy i została

8:51nam jeszcze jedna sekcja na stronie głównej ale ponieważ ta lekcja trochę się

8:54przedłużyła to zapraszam Cie do lekcji kolejnej.