Adobe XD: Text Tool i instalowanie fontów

CC 2020+

0:00W kolejnej lekcji fajnie że jesteś ze mną a zaczniemy teraz projektowanie strony

0:04głównej naszego Landing Page'a czyli górnej części na folder.

0:07Zaczniemy od projektowania prototypu menu.

0:10Rzeczywiście cała ta strona będzie jakimś

0:12pretekstem do tego żeby pokazać różne ciekawe funkcje Adobe xD i dlatego

0:16postaramy się w odpowiednich momentach cały czas

0:18nawiązywać do tych sztuczek przydatnych wskazówek które mogą

0:22ci pomóc efektywnie projektować interfejsy.

0:24Właśnie z pomocą tego narzędzia tej

0:26aplikacji natomiast będę się starał przeprowadzić ten proces w sposób

0:30naturalny czyli w taki sposób jak ja pracuję jak ja w zasadzie pracowałem nad

0:34przygotowaniem tego typu projektu więc będziemy po kolei wykonywać różne elementy

0:38a przy okazji będę zatrzymywał się na funkcjach ich SDK które w mojej ocenie

0:42będą najbardziej przydatne i wartościowe w kontekście tego konkretnego zastosowania.

0:46Jestem Gogol więc pierwsza rzecz którą

0:48potrzebujemy to wybrać sobie jakieś foty z którymi będziemy pracować.

0:52Znów nie jest zadaniem tego kursu

0:53pokazywać różne warianty różne rzeczy z których możemy tutaj korzystać ale w

0:57kontekście praktycznych zastosowań xD ja najczęściej korzystam z FOMC.

1:01One nie są w jakiś magiczny sposób automatycznie

1:04zintegrowane z X a być może na czas gdy oglądasz ten kurs pojawi się już jakiś

1:07plan jakaś wtyczka ale generalnie i tak dość wygodnym i

1:11intuicyjny sposobem jest po prostu przeglądanie sobie Fon.

1:15Jeżeli jakiś fon nam się spodoba a ja będę korzystał akurat z rodziny kroju pisma

1:20dałem szans które są super świetne bardzo ładnie wyglądają w tym wariancie.

1:24Szeryf owym czyli serii IV i serii Display

1:27w zasadzie z tego będziemy głównie korzystać.

1:29Jest taki trochę bardziej prominentny i trochę lepiej wygląda na ekranach.

1:36To jest po prostu bez szeryfa.

1:37Wariant tego kraju z którego też będziemy korzystać.

1:40To co warto zrobić to oczywiście pobrać sobie tą rodzinę kroju pisma wybieramy

1:45sobie Down Amelii i instaluje ją przez Front menadżera czy to na Windowsie czy na

1:51Maku i wtedy mamy oczywiście dostępny telefon z poziomu von dem sans.

1:55Z poziomu rozwijane menu w Adobe xD jakie jeszcze można podejść do kątów xD.

2:02Drugim sposobem na to jak można tam pracować jest korzystanie z aplikacji

2:07Creative Cloud a ściślej ze taki który znajduje się wewnątrz subskrypcji Adobe.

2:13Jeśli masz subskrypcję na Creative Cloud to masz też dostęp do tej sekcji FOMC

2:18i ta sekcja FOMC to jest właśnie stary dzisiejszy Adobe FOMC który pozwala

2:24ci pobrać i zainstalować sobie rozmaite kroju pisma.

2:27Rzeczywiście niektóre z nich nie ma reguły FOMC.

2:30Jest tu wiele fajnych rodzin fajnych kroju pisma.

2:33Czy z tego korzystać czy nie.

2:34Oczywiście zależy to wyłącznie od twojego zapotrzebowania.

2:39Jedna rzecz o której trzeba pamiętać FOMC jest usługą darmową.

2:43Możemy za darmo korzystać z tych frontów

2:45na stronach i bardzo łatwo je można za dawać dołączyć.

2:48W przypadku Adobe FOMC będzie to usługa

2:51darmowa tak długo jak posiadasz subskrypcję w Adobe.

2:54W związku z tym warto o tym pamiętać.

2:56Później trzeba będzie zapłacić jakieś kilka dolarów za poszczególne found.

3:01Ewentualnie wykupić sobie subskrypcję na kolejny okres.

3:04Jeśli będziesz zastanawiał się nad jakąś rodziną kroju pisma i będziesz

3:08chciał ją po prostu dodać do Insider wystarczy kliknąć tutaj opcję Active FOMC

3:13i zostanie ten dodany do Twojej listy będziesz mógł już wybrać go z tej

3:19rozumianej listy która znajduje się tutaj tekst.

3:22Następnie będziesz musiał przekazać

3:25wytyczne odnośnie zastosowania tego konta do Development.

3:29Jeśli będziesz chciał wdrażać to na stronę

3:30internetową musisz swoim deweloperom wysłać odpowiedni fragment kodu.

3:34Znajduje się tutaj Active Project i możemy teraz przejść przez krótki sam

3:39łuczak zaznaczyć które warianty tego kroju pisma mają być aktywne w projekcie.

3:44Przypominam w ogóle żeby też

3:46na potrzeby polskich projektów szukać telefon te które mają znaki Latin BB

3:50aktywna zarówno na fotce jak i w Adobe tworząc musimy oznaczyć rodzinę krajów

3:55Latin b no i wtedy będziemy mieli dopiero Polski ogon.

3:58Jeśli to jest polski projekt no i tutaj będziemy musieli po prostu

4:01stworzyć sobie taki nowy łeb front projekt i za chwilę dostaniemy może stworzy sobie

4:07jakiś testowy na tym froncie który wybrałem.

4:10Za chwilę dostaniemy tutaj kod który po prostu nadaje się do wykolejenia.

4:13Przesuwamy ten kod do dewelopera tutaj

4:15jest konkretne zastosowanie CSS to też przesuwamy.

4:18No i można z tego konta korzystacie dopóki

4:20mamy opłacone subskrypcję więc też jest to dosyć proste.

4:24Natomiast ja chyba dla potrzeb większości moich projektów jednak korzystam z Fon.

4:29Ty też możesz sobie pobrać von dem Sans i DM serii z których będziemy korzystać.

4:34I teraz przystępujemy do stworzenia

4:35pierwszej ramki tekstowej narzędzie text czyli tę na klawiaturze.

4:39Oczywiście to narzędzie w menu.

4:41Wystarczy że raz kliknięcie w dowolnym

4:43miejscu i zostanie automatycznie stworzona ramka testowa oraz warstwa tekstową.

4:47Jest to ramka testowa pewnego typu ten możesz zobaczyć tutaj.

4:51Mamy dwa typy tekstu jest to point tekst i tekst.

4:55Przy pojedynczym kliknięciu stawiamy zawsze pole typu point.

5:00Znaczy że to pole nie ma jakichś określonych granic i będzie ten tekst

5:05ciągle w jednej linii która się nam wydłuża.

5:07Gdybyśmy stworzyli innego rodzaju pole

5:09tekstowe wystarczy przytrzymać lewy przycisk myszy i po prostu zaznaczyć

5:14wielkość czyli zacząć od zadeklarowana jakiejś wielkości takiej ramki tekstowej.

5:18Stworzyliśmy pole drugiego typu jak

5:20widzisz jest to LG tekst i ten tekst będzie się zabijał do kolejnych linii.

5:25W momencie gdy będziemy mieli tą ramkę zauważ że tekst jest widoczny też poza

5:29bramką ale to jest tylko w trybie edycji w momencie gdy ja wyjdę z trybu edycji Mam

5:33taką małą czerwoną kropkę która symbolizuje że Aha w tej ramce jest więcej

5:36tekstu niż widać go tutaj niż zadeklarowana wielkość.

5:40Możemy w związku z tym albo zmienić

5:42wielkość tej ramki manualne czyli przesuwając sobie każdy z tych punktów

5:46albo możemy szybko po prostu dwa razy kliknąć w tą czerwoną kropkę i ramka nam

5:50się automatycznie wydłuży do takiego rozmiaru jak jest potrzebne aby

5:55na wysokość tekstu nam się zmieścił czyli dwa rodzaje ramki tekstowej.

5:58Można w każdym przypadku zmienić ten

6:00rodzaj ramki tekstowej w jedną i drugą stronę.

6:05Także przy tworzeniu nie musi się specjalnie przejmować czy stworzyła np.

6:09Point text możesz to zawsze zmienić na tekst.

6:12W przypadku menu będziemy potrzebowali w zasadzie ramki typu point text ponieważ

6:16będzie się z nich znajdował znajdowało pojedyncze słowo czy pojedynczy wyraz.

6:19Zwykle z tego typu ramek korzystamy na

6:21potrzeby właśnie jakiś temu w menu przycisków.

6:24Naturalnie jeśli chodzi o jakieś treści teksty które znajdują się na

6:28stronie w jakimś bloku no to wtedy korzystamy z LG text.

6:31Pierwszy link to będzie serwis który stworzymy w naszym menu.

6:36Właściwości tego tekstu to moja 30 filar.

6:39Skąd to wie i skąd to wzięło.

6:42Wzięło to z ostatniej ramki tekstowej

6:44którą stworzyłem jeśli ostatnia ramka byłaby z ustawieniami np.

6:4725 h nawet.

6:48No to ta następna też by była z takimi ustawieniami to co my chcemy teraz zrobić

6:52to zmienić to na nasz Sans więc wybieram tutaj DM Sans i jako wielkość tego tekstu

6:58wybiorę sobie 18 16 to jest w domyśle na wielkość tekstu w przeglądarce w zasadzie

7:03w każdej przeglądarce czyli inaczej 1 cm przy tworzeniu stron internetowych.

7:07Jeżeli chcemy żeby coś było troszkę bardziej prominentny trochę większe to Ja

7:11zwykle zaczynam wychodzę od tego rozmiaru 18 czy 20.

7:14Dla mnie na ogół są to dobre rozmiar trudno oczywiście

7:18to przyjąć za pewnik dla większości frontów ponieważ one też mogą mieć zmienną

7:22wielkość ale generalnie zostawiłem sobie tutaj 18.

7:26Jakie inne ustawienia tekstu mamy do dyspozycji.

7:28Te ustawienia tablic medium medium Italii itd.

7:32Są to ustawienia które są dziedziczone z konkretnej rodziny kroju pisma która

7:35została zainstalowana jeśli posiadają takie opcje będą dostępne.

7:39Zdaje się że w przypadku serii

7:41gdyby wybrałbym serię Display to zobaczy że mam tutaj do dyspozycji np.

7:45tylko rewolwer i szalik.

7:47W związku z tym zależy to od twórców rodzinę danego kroju pisma

7:51i wtedy te opcje są tutaj dostępne ja skorzystam jeszcze raz z Suns i teraz po

7:57napisaniu czegoś najczęściej wystarczy wcisnąć Command a często z tego

8:01korzystałem po to żeby zaznaczyć całą zawartość pola testowego można te

8:05parametry teraz dostosowywać i zmieniać skrót do tego żeby ustawić np.

8:09wariant i czy wariant Bold działa tutaj poprawnie czyli np.

8:13Command B spowoduje że przestawić się na Bold.

8:16Jednak jeśli front nie ma nie wspiera takiego Golda

8:20w swoim zestawie kolorów które mamy zainstalowane to wtedy nic się nie stanie.

8:24Po prostu Command Bean nie zadziała więc możesz się zastanawiać dlaczego te skróty

8:27nie działają one działają tylko wtedy jeśli mogą zadziałać jeśli są dostępne.

8:32Pozostałe opcje które się tu znajdują to

8:33odległość pomiędzy literami czyli charakter Space link curling możemy

8:37ustawić go dla całego wyrazu całej ramki tekstowej mamy później link head czyli

8:42wysokość linii ważne ustawienie które będziemy dostosowywać.

8:46Ja na ogół staram się trzymać Lang Head ok.

8:481 4 1 5 razy ten rozmiar który mamy

8:52w przypadku nie będziemy mieli wielu linii więc nie musimy chwilowo się tym

8:55przejmować ale przy budowaniu takiego samego Gajda w którym będziemy już mieli

8:59te różne rozmiary rządów oczywiście warto będzie dla każdej ramki tekstowej

9:03ustalić to dobrze nawet jeśli w jakimś wariancie ona nie ma multi linii ale warto

9:08już mieć taką dobrą wersję zapisaną w naszym standardzie.

9:11Dlaczego ja właśnie np.

9:12teraz nie korzystam z jakiegoś Stargardu

9:14czy z jakiegoś systemu już gotowego no bo zwyczajnie go nie mam.

9:17Najczęściej jest tak że jednak zaczynamy

9:19od czystej kartki mamy jakieś wytyczne do logo jakiś prosty Brand Book więc

9:22stosujemy się do tych zaleceń ale z drugiej strony

9:26każdy projekt ma też swoją specyfikę i ona jest wytwarzana w trakcie projektowania.

9:30Ja chcę wzorować możliwie jak

9:32najwierniejsi to jak ja projektuje ranking czy różne inne tego typu serwisy.

9:36Dlatego nie chcę zaczynać od tworzenia jakiegoś starego od odrobienia jakichś

9:40miód WORD ów bo po prostu pracuję w inny sposób.

9:42Pokażę ci jak to wygląda.

9:45Będziesz pracował tutaj razem ze mną i generalnie jak już trochę elementów na

9:48stronie będzie ze sobą grało będzie ze sobą spójnych.

9:51Dopiero wtedy ja zabiorę się za przenoszenie ich do jakiejś przestrzeni

9:55gdzie będę mógł je używać i przyspieszyć w ten sposób pracę w xD.

9:59Chodzi o pozostałe ustawienia frontów czyli cięcia ostatniej linii.

10:03Mamy tutaj jeszcze wyrównanie opcji

10:05wyrównania opcji wielkich i małych liter przy określaniu podkreślenia.

10:08Nie będę oczywiście obrażał twojej inteligencji i ich tutaj szczegółowo

10:11tłumaczył bo znasz je z każdego edytora tekstu a oczywiście będziemy jeszcze z

10:15nich korzystać w trakcie całego kursu więc zobaczysz co i jak.

10:18Ostatnia rzecz którą zmieniam to kolor wypełnienia.

10:22Wypełnienie tekstu to zwykłe Wheel czyli tekst możemy założyć też np.

10:26Border czy Shadow.

10:28W tym przypadku ja użyję jakiegoś ciemnego

10:30koloru znów to nie musi być mój finalny kolor docelowy ale na razie mniej więcej

10:36robię to tak jak chciałbym aby wyglądało w kolejnej lekcji.

10:39Pokażę ci fajną funkcję która pozwoli nam

10:41łatwo xD stworzyć szybko całe menu do usłyszenia.