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.