Adobe XD: Style tekstów oraz Google Sheets

CC 2020+

0:00Cześć Witaj w kolejnej lekcji.

0:01Mam nadzieję że nie masz mi za złe że

0:03progres pracy nad naszym autem nie postępuje w jakimś zawrotnym tempie ale

0:07mam dobrą wiadomość tłumaczymy po drodze naprawdę bardzo dużo rzeczy i jestem

0:11przekonany że to przełoży się na ogromny wzrost tempa Twojej pracy.

0:15Później xD także Będziemy teraz starali się skoncentrować na robieniu kolejnej

0:19sekcji na naszej stronie ale patrzmy sobie jeszcze co tutaj mam.

0:23Czy zastanawiam się czy na przykład ten

0:25pierwszy ekran wypadałoby teraz posprzątać i zrobić porządek na warstwach.

0:30I szczerze mówiąc ostatnio mam taki tryb

0:31pracy że staram się raczej w tej fazie eksperymentowania gdzie

0:36zmieniam sobie jeszcze różne rzeczy raczej zostawić te otwarte.

0:40Nie ma tu jeszcze aż takiego bałaganu z którym bym sobie nie poradził natomiast

0:44będę zdecydowanie łatwiej mu skorzystać z komponentów które się tu znajdują.

0:48Przykładowo gdybym to wszystko zamknął w jakąś dużą grupę no to już trudno by mi

0:53było wyciągnąć z tego tekst musiałbym z Andym jakoś klikać do środka wchodzić.

0:58A tak to ja chcę po prostu skorzystać z tych dwóch warstw i je sobie po prostu

1:01skopiować i wlać po to żeby stworzyć kolejny nagłówek.

1:05Mogę to bardzo łatwo zrobić dlatego

1:07zostawię na razie tę elastyczność która oczywiście jest trochę kosztem jakiegoś

1:12porządku na linii warstw ale szczerze mówiąc nie przejmuję się tym za bardzo w

1:15fazie takiej koncepcyjne gdzie jeszcze dużo rzeczy tutaj zmieniam w Jałcie.

1:19Nie jest to dla mnie kluczowe natomiast

1:21jeżeli już twierdzę że używam jakiś element czyli np.

1:25właśnie chciałbym teraz skorzystać z tego nagłówki raz jeszcze

1:28to moja propozycja jest taka żeby już starać się przygotować go w miarę dobrze.

1:32To co możemy zrobić to skorzystać ze

1:33stylów tekstów panelu Asseco znajdują się kolory z których często korzystamy.

1:38Możemy tutaj dodawać nowe komponenty z których już korzystaliśmy.

1:41Ostatnią rzeczą są charakterystyce chciałbym teraz pokazać Ci tyle tekstu jak

1:45możemy dodawać do nich tekst jeśli zaznaczyć np.

1:49jedną warstwę to Innovation in.

1:52I klikamy na charakter to zobaczysz że ten styl zostaje automatycznie dodany.

1:56Gdybym chciał w ten sam sposób sformować

1:58jakąś kolejną ramkę tekstową to wystarczy kliknąć na tym i

2:02automatycznie zostaną te zmiany zastosowane.

2:05Jakie zmiany są tutaj uwzględnione mogły

2:06pchnąć sprawy i przejść do edycji i zobacz to są wszystkie rzeczy które są

2:10zapamiętane dla stylów tekstu czyli kolor czyli rozmiar również krój pisma

2:16oczywiście jego typ Kopernik i linia natomiast nie są zapamiętane rzeczy takie

2:21jak przykładowo wyrównanie czyli wszystkie teksty tak czy inaczej będą wyrównane do

2:25lewej krawędzi co jest moim zdaniem OK to co mogę zmienić w tym stylu to mogę

2:29kliknąć prawym przyciskiem myszy i mogę zmienić też jego nazwę.

2:33Czyli przykładowo może to być nasz kapitan i to będzie jego większa wersja.

2:39Czyli mogę wpisać że BIG a z kolei np.

2:42ten

2:44ten krój pisma który teraz możemy dodać to będzie zwykły KPN czyli nie będę już

2:49pisał samo tylko po prostu jego podstawowa wersja i teraz mam dodane dwa style teksty

2:53zobaczę mogę pomiędzy nimi bardzo łatwo się przełączać jeżeli chciałbym

2:58zmienić jeden z krajów czyli przykładowo jeśli teraz chciałbym zmienić jakieś

3:03parametry tego tekstu mogę przejść do edycji i np.

3:06mogę zmienić stan na 12.

3:07Co więcej wszystkie treści i wszystkie teksty które są właśnie mają te parametry

3:12tutaj zapisane będą zmieniać się również w momencie gdy zmienię ten styl

3:17tekstu czyli to są zmiany globalne nie tylko do tych pól które zapisaliśmy ale

3:21oczywiście do całych tych stylów tekstu które się tutaj znajdują.

3:25Jeśli chciałbym dodać trochę więcej stylów tekstu mogę na przykład zaznaczyć sobie to

3:29to Commander dostarcza mi jeszcze te dwie i teraz dodaję je hurtowo.

3:34Jak widzisz wszystkie tutaj trafiły i mamy DMC 18 64 i 20 punktów czyli

3:40osiemnastki a to będzie ten nasz główny tekst.

3:42Czyli mogę go nazwać body.

3:44To będzie taki Body back czyli większa wersja tego tekstu body.

3:50Natomiast tutaj będziemy mieli nr 1.

3:54No i teraz przez przypadek zmieniłem sobie

3:57ten tekst więc muszę wrócić do tekstu bo wystarczy kliknąć raz na tym i zauważy

4:02tekstem Body są sformułowane i mogę to potwierdzić na kampusie.

4:06Wszystkie te treści. Czyli gdybym teraz wyemitował sobie

4:10wielkość tego tekstu wszystkie będą się powiększać.

4:14To jest bardzo fajny sposób.

4:15Mówiłem też o tym że jak masz np.

4:17jakieś gotowe kity wystarczy jeżeli chcesz zmienić jakiś tekst wystarczy kliknąć

4:21ramkę tekstową dodać to do charakter stały tutaj zmienić i np.

4:25możesz w całym dokumencie zmienić

4:27wszystkie kroju pisma dla takiego tekstu więc to jest bardzo sprytna metoda.

4:32Teraz to co będę chciał zrobić to właśnie skorzystać z tego na główkę i go powiesić

4:36w tej dolnej części dlaczego cofnął wcześniej tą zmianę ponieważ jeśli już

4:41powiela jakiś element to warto by było jednak zadbać żeby był on przynajmniej np.

4:45dobrze rozmieszczone.

4:46Jeśli chodzi o układ

4:48czyli to co spróbuję zrobić to umieścić tekst w taki sposób aby górna nie zgrywa

4:53się mniej więcej z gradem a między tą górną linią tekstu a tym tekstem.

5:00Zachować odstęp około dwudziestu pikseli.

5:03W ten sposób mam przygotowany taki

5:05komponent powiedzmy do opowiedzenia czyli mogę sobie go skopiować a następnie mogę

5:09go w klatce przesunąć w odpowiednie miejsce i teraz wyłączy na moment GRID.

5:14Chciałbym stworzyć dwa takie nagłówki

5:17czyli widzisz że mogę po prostu powielać sobie te elementy.

5:20Ewentualnie mogę zamiast tego po prostu wybrać te stworzyć sobie ramkę tekstową

5:25wpisać tutaj przykładowo 1 2 3 czyli mam nowo stworzoną ramkę tekstową.

5:28Teraz jeżeli chciałbym ją powiesić akurat to będę chciał powiedzieć mogę to zrobić

5:32Rapid grid czyli po prostu włączam Rapid GRID Commander i chcę powiedzieć to trzy

5:36razy i jeszcze trzy razy w ten sposób zwiększymy odstępy.

5:42Teraz Command Shift grupuje i mam serię ramek tekstowych które mogę zaznaczyć i

5:46przykładowo sformułować je hurtowo w ten sposób umieścić gdzieś na razie poniżej.

5:52Znów to jest takie kibicowanie.

5:54To będę chciał zrobić z kolei jako np.

5:56kapitan aczkolwiek będę chciał zmienić

5:58teraz kolor wypełnienia i wybrać kolor na razie wypełnienia granatowe.

6:02W ten sposób no i mam jakiś ochłap jakiś

6:06szkic do treści teraz będę chciał te treści wypełnić.

6:09Jak to zrobić pokażę ci jeszcze jeden sposób z wykorzystaniem.

6:13Przejdziemy do Platinum.

6:15Kolejno wybierzemy plus i dodamy tutaj login znajdę playing shit.

6:19To jest jeden z pakietów który pozwoli nam na wstawienie dynamicznej treści.

6:22Jest ich kilka będę omawiał to w osobnym warsztacie.

6:25Aczkolwiek szkic jest najbardziej popularnym z nich znów tak jak mówię te

6:30często się zmieniają więc możesz mieć inne jego działanie.

6:33Ja chcę raczej pokazać Ci pewien sposób

6:35myślenia a nie działania konkretnego plagi.

6:37Ten sposób polega na tym że zamiast

6:39wpisywać Taylorem gipsu mi różne jakieś dziwne rzeczy do tych warstw tekstowych.

6:43Zdecydowanie lepiej jest korzystać z rzeczywistych danych.

6:46Ktoś te dane powinien wcześniej

6:47przygotować lub my powinniśmy przygotować je samodzielnie.

6:50Przykładowo ja mam tutaj arkusz który

6:53stworzyłem to jak tworzymy taki arkusz to po prostu tworzymy sobie sekcję zagrywkami

6:58którymi będziemy zaznaczali odpowiednie typy treści np.

7:02wszystkie gry znajdą się w kolumnie B i

7:04pod spodem ma wszystkie gry które będę chciał wstawić.

7:07W tak przygotowanym temacie dokumentu jeśli wybiorę polecenie udostępni szef a

7:10następnie kopiuje link czyli ten wybiorę tam link do udostępniania

7:14i kopiuje go sobie do schowka będę mógł już skorzystać z repliki.

7:18Generalnie można tutaj albo w Play właśnie link do takiego udostępnionego pliku albo

7:22skorzystać z pliku CSS z którego ładuje dane.

7:25W bardzo podobny sposób jak korzysta się z tego.

7:27No to zaznaczam jedną lub więcej ramek

7:29tekstowych do których chcemy wlać tekst a następnie wybieramy polecenie Public link

7:34wybieram Command V czyli wklej link do tego dokumentu.

7:37No i teraz co chcę zapowiadać chcę

7:39zmarnować do tego elementu wszystkie gry czyli akurat ja mam tam

7:44więcej niż dwa ale zostaną po prostu wypełnione.

7:48Dwa pierwsze nagłówki teraz jeszcze zmienię typ pól tekstowych.

7:51W ten sposób na pola typu point tekst.

7:53Ten tekst w środku jest w ramce i z Shift zaznacza 2 te elementy a

7:59następnie wyrównanie w pionie w ten sposób ok.

8:02Ten tekst będzie wyrównany do lewej a ten będzie wyrównany do środka.

8:06To co jest kolejną fajną rzeczą w tym

8:07planie to jest to że w momencie gdy zakończymy ramkę tekstową mamy tutaj ją

8:11połączoną z naszym dokumentem i został pobrany.

8:13Ten HDR który mamy w pierwszym polu zamiast Live Fast mogę wpisać np.

8:18ideę River of Time i po tych zmianach mogę przejść do

8:22Platinum a następnie wybrać polecenie również content.

8:25Jak widzisz zostało to zmienione.

8:27Bardzo fajna rzecz w ten sposób możesz

8:28trzymać taką dynamiczną bibliotekę treści którą ktoś może ci na bieżąco uzupełniać a

8:33ty możesz ewentualnie tylko odświeżyć sobie tutaj dane.

8:36Kolejne pole tekstowe chciałbym umieścić

8:37tutaj poniżej znów pożyczyła sobie jakieś pole ale to nic bo mogę szybko wyciąć

8:42sobie odpowiedni styl i to będzie akurat body.

8:45Teraz umieszcza to sobie w środku

8:47chciałbym jeszcze stworzyć tutaj ramkę tekstową ale to rozciąga się

8:52która będzie mniej więcej tej wielkości i umieszcza to poniżej tutaj

8:56podobną ramkę tekstową aczkolwiek z tekstem wyrównanym do lewej krawędzi w

9:00stawie pod ten pierwszy z nagłówków widzisz ładnie się marginesu dopasowuje.

9:05Ale na razie to nie jest jeszcze czas rozmową o margines.

9:07Zaznaczam to pole tekstowe a następnie to kolejne.

9:10I teraz uwaga.

9:11Kolejność zaznaczenia czyli tego że jest tam plik miałem tutaj właśnie w drugiej

9:15kolejności w tym polu ma znaczenie bo teraz będę używał tych sam chadeków i

9:19zobaczy że pierwszy jest Forever drugi jest mój.

9:21I rzeczywiście w takiej kolejności zostaną one wplecione.

9:25Jak zaznaczają pola tekstowe wybieram polecenie pisma Blitz Link oraz jeszcze on

9:29tutaj zapamiętane i teraz wybieram sam HDR.

9:32I jak widzisz w tej kolejności zostały one dokładnie wplecione.

9:36Teraz mogę jeszcze delikatnie dopasować

9:38wielkość tych ramek tekstowych tak aby ten tekst ładnie się rozmawiał.

9:42No i skorzystamy jeszcze z tekstów dla tych ramek.

9:47To są numerki które będę chciał uzupełnić.

9:50Znów pisma Public link continuum

9:53i mam je w obraz a dodatkowo do Chambers mogę zaznaczyć sobie jeszcze Lines.

9:59Jeszcze raz giną i po prostu wybrać te cyferki zmienia jeszcze na 150 plus

10:05następnie zaznacza że teksty przysługuje najbardziej.

10:10Zajmiemy się wyrównywanie poszczególnych

10:12elementów w kolejnej lekcji także tym się teraz nie przejmuje.

10:15Ewentualnie mogę jeszcze zaznaczyć te

10:17ramki tekstowe kliknąć dwa razy naklejkę na dole po to żeby dopasować ich rozmiar

10:22do wielkości tekstu który został w taką ramkę.

10:24Na razie to wszystko dowiedziała się jak

10:25działała Google Shit a także jak można zapisywać sobie tyle tekstu więc całkiem

10:29nieźle a w kolejnej lekcji pracujemy na sekcję.