Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy

Lekce 3 - Adobe XD - Založení projektu - Online kurz

V minulé lekci, Adobe XD - Rozhraní aplikace, jsme se zabývali zejména rozhraním aplikace Adobe XD. Seznámili jsme se s pracovní plochou, režimy Design a Prototype a v neposlední řadě také vybranými panely a nástroji.

V dnešní lekci si založíme vlastní projekt, v rámci kterého budeme navrhovat jednoduchou mobilní aplikaci záznamník. Ukážeme si, jak vytvořit a spravovat cloudové dokumenty. Následně si připravíme jednotlivá kreslící plátna a naučíme se pracovat se souvisejícími nástroji a panely.

Založení projektu

Začneme tím, že si spustíme aplikaci Adobe XD a na domovské obrazovce zvolíme velikost kreslícího plátna, které bude představovat webovou stránku nebo obrazovku aplikace. Vzhledem k tomu, že v rámci tohoto kurzu budeme navrhovat aplikaci pro iPhone, klikneme na ikonu telefonu/tabletu a v rozbalovací nabídce zvolíme možnost iPhone X, XS, 11 Pro (375 x 812).

Krok 1 – Vytvoření nového cloudového dokumentu.

Tímto jsme založili nový dokument, ve kterém je v současnosti pouze jedno kreslící plátno o námi zvolené velikosti. Později zde však nalezneme všechna naše kreslící plátna, předvolby/zdroje, barvy a další součásti našeho projektu. Pozornější z vás si určitě všimli ikony mraku Ikona cloudový dokument., která se při vytváření dokumentu objevila vedle jeho názvu. Tato ikona signalizuje, že byl dokument automaticky uložen do Creative Cloudu, který máme v rámci našeho plánu zdarma. Ještě před tím, než se podíváme na výhody cloudových dokumentů, si náš dokument kliknutím na stávající název přejmenujeme.

Krok 2 – Přejmenování dokumentu.

Pokud bychom si chtěli dokument uložit na lokální zařízení, klikneme na Menu > Save As Local Document nebo tak učiníme klávesovou zkratkou Shift + Ctrl + Alt + S

Cloudové dokumenty

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Ve výchozím nastavení se v Adobe XD všechny nové dokumenty automaticky ukládají jako cloudové dokumenty do služby Creative Cloud. To však neznamená, že bychom na projektu nemohli pracovat bez připojení k internetu. Adobe XD umí ukládat provedené změny na disk lokálního zařízení a ihned po opětovném připojení je automaticky synchronizovat s verzí v cloudu.

Výhody cloudových dokumentů

  • Jednotlivé dokumenty můžeme přímo v aplikaci sdílet s dalšími uživateli a při zapnutí funkce on-line kolaborace dokonce i s ostatními současně upravovat.
  • K dokumentům uloženým v cloudu můžeme přistupovat napříč všemi zařízeními, včetně mobilních aplikací, které slouží pro živý náhled a testování prototypu.
  • Automatické ukládání, jednoduchá funkce, která se stará o průběžné ukládání dokumentu do cloudu.
  • Historie verzí umožňující procházet předchozí verze návrhu a popřípadě se k nim vracet.

Vytváření kreslících pláten

Jedno kreslící plátno (obrazovku aplikace) už v projektu máme, to nám ale na celý projekt nestačí, a tak začneme s vytvářením dalších. Z panelu nástrojů si zvolíme nástroj Kreslící plátno Nástroj Kreslící plátno. a na panelu napravo vybereme požadovanou velikost podobně jako při vytváření nového dokumentu, čímž vytvoříme další obrazovku.

Krok 3 – Vytvoření dalšího kreslícího plátna.

Tento způsob využíváme zejména v případě, kdy potřebujeme vytvořit kreslící plátno jiné velikosti. Tedy například v situaci, kdy bychom k návrhu obrazovky mobilního telefonu chtěli vytvořit ještě návrh webové stránky. My však budeme vytvářet všechny obrazovky stejně velké, a tak je tento způsob zbytečně komplikovaný a zdlouhavý. Namísto současného nástroje si z panelu vybereme nástroj Výběr Nástroj Výběr., klikneme na již existující kreslící plátno a stiskneme klávesovou zkratku Ctrl + D, čímž kreslící plátno duplikujeme. Tento krok zopakujeme znovu ještě 2x, abychom v dokumentu měli vytvořených celkem 5 obrazovek. To nám bude prozatím stačit, pokud bychom potřebovali další, v průběhu návrhu si je můžeme kdykoli vytvořit.

Dalším způsobem, jak duplikovat existující kreslící plátno, je podržet klávesu Alt a myší ho přetáhnout, kam potřebujete.

Krok 4 – Duplikování kreslících pláten.

V tuto chvíli by bylo vhodné si jednotlivé obrazovky pojmenovat. S nástrojem Výběr Nástroj Výběr. vždy dvakrát klikneme na stávající název a provedeme změnu. Jednotlivé obrazovky pojmenujeme Prihlaseni, Registrace, Nahravka, Seznam, Uloziste v pořadí tak, jak jdou za sebou.

Krok 5 – Přejmenování kreslících pláten.

Úprava kreslících pláten

Kreslící plátna máme již vytvořená, a tak si pojďme zkusit změnit jejich velikost, umístění, barvu výplně a několik dalších vlastností. Začneme tím, že si jednotlivé obrazovky přeuspořádáme. To můžeme provést buď pomocí nástroje Kreslící plátno Nástroj Kreslící plátno. nebo Výběr Nástroj Výběr.. Postupně tedy přesuneme obrazovky Nahravka, Seznam, Uloziste pod obrazovky Prihlaseni a Registrace a poté ještě změníme jejich pořadí.

Všimněte si, že ve chvíli, co se budeme snažit jednotlivá kreslící plátna zarovnat, objeví se modrá a fialová mezerová vodítka, která nám pomohou se zarovnáním a udržením stejných rozestupů mezi kreslícími plátny.

Krok 6 – Přeuspořádání kreslících pláten.

Dále provedeme změnu výšky obrazovky Seznam a Uloziste. Abychom si vyzkoušeli více způsobů, nejprve provedeme změnu velikosti přímo na panelu a poté pomocí nástroje Výběr Nástroj Výběr. změníme výšku druhé obrazovky ručně.

Krok 7 – Změna výšky kreslících pláten.

Kromě změny pozice, velikosti či orientace obrazovky, můžeme na tomto panelu jednotlivá kreslící plátna vzájemně zarovnávat. To však v tuto chvíli dělat nebudeme, jelikož se těmito nástroji budeme zabývat později u zarovnávaní objektů. Namísto toho pomocí klávesy Shift a nástroje pro Výběr Nástroj Výběr. označíme obrazovky Seznam a Uloziste a nastavíme hodnotu Scrolling na Vertical a Viewport Height na 812. Následně označíme všechny obrazovky a nastavíme výplň pozadí na barvu #FCFCFC.

Krok 8 – Změna barvy výplně.

V dalším kroku znovu vybereme všechna kreslící plátna a na pravém panelu aktivujeme mřížku, následně v nabídce zvolíme možnost čtvercové mřížky a velikost nastavíme na hodnotu 10.

Krok 9 – Zapnutí čtvercové mřížky.

Čtvercová mřížka zobrazuje vodorovná a svislá vodítka, která využijeme zejména ve chvíli, kdy zarovnáváme náš obsah nebo určujeme rozměry jednotlivých objektů. Dále pokud vytváříme nové objekty či transformujeme stávající, obsah se automaticky přichytává k této mřížce.

Možná jste si všimli, že je v nabídce také dostupná mřížka rozložení. Ta však pro návrh mobilní aplikace není příliš vhodná. Využili bychom ji však například při návrhu webové stránky.

To je z této lekce vše. V příští lekci, Adobe XD - Import obsahu, se podíváme na importování zdrojů do Adobe XD a následně začneme s návrhem aplikace.


 

Předchozí článek
Adobe XD - Rozhraní aplikace
Všechny články v sekci
Adobe XD
Článek pro vás napsal Daniel Zábojník
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
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 (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!