BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
BF Sales

3. diel - Adobe XD - Založenie projektu

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).

Krok 1 – Vytvorenie nového cloudového dokumentu.

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 mrakuIkona cloudový dokument.
, 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.

Krok 2 – Premenovanie dokumentu.

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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 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.

Krok 3 – Vytvorenie ďalšieho kresliaceho plátna.

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 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.

Krok 4 – Duplikovanie kresliacich plátien.

V tejto chvíli by bolo vhodné si jednotlivé obrazovky pomenovať. S nástrojom Výber Nástroj 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.

Krok 5 – Premenovanie kresliacich plátien.

Ú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 Nástroj Kresliace plátno.
alebo Výber Nástroj 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.

Krok 6 – Reorganizovanie kresliacich plátien.

Ď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 Nástroj Výber.
zmeníme výšku druhej obrazovky ručne.

Krok 7 – Zmena výšky kresliacich plátien.

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 Nástroj 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.

Krok 8 – Zmena farby výplne.

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.

Krok 9 – Zapnutie štvorcové mriežky.

Š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, , sa pozrieme na importovanie zdrojov do Adobe XD a následne začneme s návrhom aplikácie.


 

Predchádzajúci článok
Adobe XD - Rozhranie aplikácie
Všetky články v sekcii
Adobe XD
Článok pre vás napísal Daniel Zábojník
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje programování desktopových aplikací, kódování webových stránek, grafickému zpracování a všemu co k tomu patří.
Aktivity (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!