3. diel - Adobe XD - Založenie projektu - Online kurz
V minulej lekcii, Adobe XD - Rozhranie aplikácie , sme sa zaoberali najmä rozhraním aplikácie Adobe XD. Zoznámili sme sa s pracovnou plochou, režimy Design a Prototype a v neposlednom rade tiež vybranými panely a nástrojmi.
V dnešnej lekcii si založíme vlastný projekt, v rámci ktorého budeme navrhovať jednoduchú mobilnú aplikáciu záznamník. Ukážeme si, ako vytvoriť a spravovať cloudové dokumenty. Následne si pripravíme jednotlivé kresliaci plátna a naučíme sa pracovať so súvisiacimi nástrojmi a panelmi.
Založenie projektu
Začneme tým, že si spustíme aplikáciu Adobe XD a na domácej obrazovke
zvolíme veľkosť kresliaceho plátna, ktoré bude predstavovať webovú
stránku alebo obrazovku aplikácie. Vzhľadom na to, že v rámci tohto kurzu
budeme navrhovať aplikáciu pre iPhone, klikneme na ikonu
telefonu/tabletu
a v rozbaľovacej ponuke zvolíme možnosť
iPhone X, XS, 11 Pro (375 x 812)
.

Týmto sme založili nový dokument, v ktorom je v súčasnosti iba jedno
kresliace plátno o nami zvolenej veľkosti. Neskôr tu však nájdeme
všetky naše kresliaci plátna, predvoľby /
zdroje, farby a ďalšie súčasti
nášho projektu. Pozornejší z vás si určite všimli ikony
mraku
, Ktorá sa pri vytváraní dokumentu objavila vedľa jeho názvu. Táto ikona
signalizuje, že dokument automaticky uloží do Creative
Cloude, ktorý máme v rámci nášho plánu zadarmo. Ešte pred tým, než sa
pozrieme na výhody cloudových dokumentov, si náš dokument kliknutím
na existujúce názov premenujeme.

Ak by sme si chceli dokument uložiť na lokálny zariadení, klikneme na Menu> Save As Local Document alebo tak urobíme klávesovou skratkou Shift + Ctrl + Alt + S
Cloudové dokumenty
V predvolenom nastavení sa v Adobe XD všetky nové dokumenty automaticky ukladajú ako cloudové dokumenty do služby Creative Cloud. To však neznamená, že by sme na projekte nemohli pracovať bez pripojenia k internetu. Adobe XD vie ukladať zmeny na disk lokálneho zariadení a ihneď po opätovnom pripojení je automaticky synchronizovať s verziou v cloude.
Výhody cloudových dokumentov
- Jednotlivé dokumenty môžeme priamo v aplikácii zdieľať s ďalšími používateľmi a pri zapnutí funkcie on-line kolaborácie dokonca aj s ostatnými súčasne upravovať.
- K dokumentom uloženým v cloude môžeme pristupovať naprieč všetkými zariadeniami, vrátane mobilných aplikácií, ktoré slúžia pre živý náhľad a testovanie prototypu.
- Automatické ukladanie, jednoduchá funkcia, ktorá sa stará o priebežné ukladaní dokumentu do cloudu.
- História verzií umožňujúci prechádzať predchádzajúce verzie návrhu a prípadne sa k nim vracať.
Vytváranie kresliacich plátien
Jedno kresliace plátno (obrazovku aplikácie) už v projekte máme, to nám
ale na celý projekt nestačí, a tak začneme s vytváraním ďalších. Z
panela nástrojov si zvolíme nástroj Kresliace
plátno
a na paneli napravo vyberieme požadovanú veľkosť podobne
ako pri vytváraní nového dokumentu, čím vytvoríme ďalšiu obrazovku.

Tento spôsob využívame najmä v prípade, keď potrebujeme vytvoriť
kresliace plátno inej veľkosti. Teda napríklad v situácii,
kedy by sme k návrhu obrazovky mobilného telefónu chceli vytvoriť ešte
návrh webovej stránky. My však budeme vytvárať všetky
obrazovky rovnako veľké, a tak je tento spôsob zbytočne komplikovaný a
zdĺhavý. Namiesto súčasného nástroja si z panela vyberieme nástroj
Výber
, Klikneme na už existujúce kresliace plátno a stlačíme klávesovú skratku
Ctrl + D, čím kresliace plátno
duplikuje. Tento krok zopakujeme znovu ešte 2x
,
aby sme v dokumente mali vytvorených celkom 5
obrazoviek. To nám
bude zatiaľ stačiť, ak by sme potrebovali ďalšie, v priebehu návrhu si ich
môžeme kedykoľvek vytvoriť.
Ďalším spôsobom, ako duplikovať existujúce kresliaci plátno, je podržať kláves Alt a myšou ho pretiahnuť, kam potrebujete.

V tejto chvíli by bolo vhodné si jednotlivé obrazovky pomenovať. S
nástrojom Výber
vždy dvakrát klikneme na existujúce názov a prevedieme
zmenu. Jednotlivé obrazovky pomenujeme Prihlaseni
,
Registrace
, Nahravka
, Seznam
,
Uloziste
v poradí tak, ako idú za sebou.

Úprava kresliacich plátien
Kresliace plátna máme už vytvorená, a tak si poďme skúsiť zmeniť ich
veľkosť, umiestnenie, farbu výplne a niekoľko ďalších vlastností.
Začneme tým, že si jednotlivé obrazovky přeuspořádáme.
To môžeme urobiť buď pomocou nástroja Kresliace plátno
alebo Výber
. Postupne teda presunieme obrazovky Nahravka
, Seznam
,
Uloziste
pod obrazovky Prihlaseni
a
Registrace
a potom ešte zmeníme ich poradie.
Všimnite si, že vo chvíli, čo sa budeme snažiť jednotlivá kresliaci plátna zarovnať, objaví sa modrá a fialová potom medzerníka vodítka, ktorá nám pomôžu so zarovnaním a udržaním rovnakých rozstupov medzi kresliacimi plátnami.

Ďalej vykonáme zmenu výšky obrazovky Seznam
a
Uloziste
. Aby sme si vyskúšali viac spôsobov, najprv vykonáme
zmenu veľkosti priamo na paneli a potom pomocou nástroja
Výber
zmeníme výšku druhej obrazovky ručne.

Okrem zmeny pozície, veľkosti či orientácia obrazovky, môžeme na tomto
paneli jednotlivé kresliaci plátna vzájomne zarovnávať. To
však v tejto chvíli robiť nebudeme, pretože sa týmito nástrojmi budeme
zaoberať neskôr u zarovnávanie objektov. Namiesto toho pomocou klávesy
Shift a nástroje pre Výber
označíme obrazovky Seznam
a Uloziste
a nastavíme
hodnotu Scrolling
na Vertical
a
Viewport Height
na 812
. Následne označíme všetky
obrazovky a nastavíme výplň pozadia na farbu #FCFCFC
.

V ďalšom kroku znovu vyberieme všetky kresliace plátna a na
pravom paneli aktivujeme mriežku, následne v
ponuke zvolíme možnosť štvorcové mriežky a
velikost
nastavíme na hodnotu 10
.

Štvorcová mriežka zobrazuje vodorovné a zvislé vodítka, ktorá využijeme najmä vo chvíli, keď zarovnávame náš obsah alebo určujeme rozmery jednotlivých objektov. Ďalej ak vytvárame nové objekty či transformujeme existujúce, obsah sa automaticky prichytáva k tejto mriežke.
Možno ste si všimli, že je v ponuke tiež dostupná mriežka rozloženie. Tá však pre návrh mobilné aplikácie nie je príliš vhodná. Využili by sme ju však napríklad pri návrhu webovej stránky.
To je z tejto lekcie všetko. V budúcej lekcii, Adobe XD - Import obsahu , sa pozrieme na importovanie zdrojov do Adobe XD a následne začneme s návrhom aplikácie.