Lekce 2 - Adobe XD - Rozhraní aplikace - Online kurz

V minulé lekci, Adobe XD - Úvod, jsme si aplikaci Adobe XD představili a seznámili se s její podstatou. Následně jsme se podívali na možné alternativy této aplikace. V druhé části lekce jsme pak Adobe XD nainstalovali a provedli první spuštění.

V dnešní lekci se budeme věnovat zejména rozhraní aplikace Adobe XD. Seznámíme se s pracovní plochou, režimy Design a Prototype a v neposlední řadě také vybranými panely a nástroji.

Stažení a otevření souboru

Ještě předtím, než začneme prozkoumávat rozhraní aplikace Adobe XD, si prostřednictvím odkazu pod lekcí stáhneme soubor obsahující projekt níže (Autor projektu: Robert Anitei Robert Anitei ):

Vzorový projekt Write.

Nyní začneme tím, že si spustíme aplikaci Adobe XD a pomocí klávesové zkratky Ctrl + O vyvoláme dialogové okno Open. Následně vybereme a otevřeme stažený soubor obsahující již zmíněný projekt výše.

Rozhraní aplikace

Po otevření souboru byste měli vidět stejný pracovní prostor jako na obrázku níže:

Prostředí aplikace Adobe XD.

Pojďme si teď společně celý pracovní prostor projít, abychom věděli, co se kde nachází:

  • V levém horním rohu je rozbalovací Menu (modrá) – V menu můžeme například vytvořit nový dokument, otevřít jiný projekt či uložit stávající. Dále zde nalezneme možnost spravovat naše pluginy, importovat do projektu další soubory či exportovat náš design do různých formátů.
  • Ihned vedle se nachází tlačítko Domů (fialová) – Kliknutím na něj se vrátíme na domovskou obrazovku aplikace.
  • Napravo od tohoto tlačítka jsou k dispozici Režimy aplikace (oranžová) – Zde se můžeme přepínat mezi režimem Design, Prototype a nově i Share. Jednotlivými režimy se budeme dále zabývat v průběhu kurzu.
  • Pod rozbalovacím menu nalezneme Panel nástrojů (zelená), tomu se dnes budeme ještě podrobněji věnovat.
  • V levém dolním rohu jsou tlačítka pro Předvolby/Zdroje, Vrstvy a Pluginy (červená).
  • Dále na pravé straně nalezneme velký panel Vlastnosti (šedá) – Pomocí tohoto panelu můžeme nastavovat či upravovat vlastnosti právě vybraného objektu.
  • Uprostřed pracovní plochy se pak nachází naše Kreslící plátna.

Rozhraní aplikace nám nabízí ještě několik dalších tlačítek a funkcí. S těmi se samozřejmě také setkáme, ale až později v tomto kurzu.

Režim Design

V režimu Design se ocitneme pokaždé po vytvoření nového projektu nebo otevření již existujícího. Jak již z názvu vyplývá, režim Design slouží k vytváření a upravování obsahu na jednotlivých kreslících plátnech. Máme zde k dispozici úplný panel nástrojů, dále také panel předvoleb/zdrojů a vlastností.

Panel nástroje

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

Panel nástrojů nám v režimu Design nabízí následujících 8 nástrojů:

  • Nástroj výběr Výběr (V) – Slouží pro výběr objektů
  • Nástroj obdélník Obdélník (R) – Vykreslí obdélník
  • Nástroj elipsa Elipsa (E) – Vykreslí elipsu
  • Nástroj mnohoúhelník Mnohoúhelník (Y) – Vykreslí mnohoúhelník
  • Nástroj čára Čára (L) – Vykreslí čáru
  • Nástroj pero Pero (P) – Vytváří cesty pomocí kotevních bodů a táhel
  • Nástroj text Text (T) – Přidá vodorovný text
  • Nástroj kreslící plátno Kreslící plátno (A) – Přidá další kreslící plátno
  • Nástroj lupa Lupa (Z) – Přiblíží / oddálí dokument

Panel předvolby/zdroje

Na panelu předvolby/zdroje nalezneme obsah, který jsme si v daném dokumentu uložili. Může se jednat například o barvy, písmo, ikony či hotové komponenty. V jedné z následujících lekcích se tímto panelem budeme podrobněji zabývat.

Panel vrstvy

Panel vrstvy ve výchozím stavu zobrazuje všechna kreslící plátna, která máme v současném projektu vytvořena. V případě, že pomocí nástroje pro výběr vybereme nějaký objekt, panel vrstvy nám zobrazí všechny objekty daného kreslícího plátna. Podobně jako tomu bylo v Adobe Photoshopu, tak i v Adobe XD můžeme s vrstvami dále pracovat.

Základní práce s vrstvami a skupinami

Výběr

Vrstvu, se kterou chceme pracovat, si musíme nejprve vybrat. To provedeme buď to pomocí nástroje Výběr Nástroj výběr, nebo kliknutím na požadovanou vrstvu na panelu Vrstvy. Pokud chceme vybrat více samostatných vrstev, stačí držet klávesu Ctrl a klikat na požadované vrstvy. Nebo můžeme vybrat jednu vrstvu, podržet klávesu Shift a vybrat vrstvu druhou. Tímto se nám vyberou vrstvy mezi těmito dvěma vybranými vrstvami.

Změna pořadí

Pořadí vrstev a skupin lze měnit přetahováním nahoru a dolů. Je ale nutné mít na paměti, že horní vrstvy překrývají vrstvy umístěné níže.

Přejmenování

Vrstvu nebo skupinu vrstev lze přejmenovat dvojitým kliknutím na stávající název.

Skrytí / zobrazení

Vrstvu nebo skupinu vrstev lze skrýt/zobrazit kliknutím na oko Tlačítko skrýt / zobrazit, které se nachází vedle dané vrstvy. Mnohem častěji ale budeme využívat klávesovou zkratku Ctrl + ,.

Uzamčení

Jednotlivé vrstvy nebo skupiny vrstev lze zamknout kliknutím na zámek Tlačítko zamknout / odemknout, abychom s nimi dále nemohli nechtěně manipulovat.

Kopírování a vložení

Vybrané vrstvy nebo skupiny vrstvy lze také zkopírovat pomocí klávesové zkratky Ctrl + C a vložit pomocí Ctrl + V.

Duplikování

Vrstvu nebo skupinu vrstev lze duplikovat pomocí klávesové zkratky Ctrl + D.

Seskupení

Seskupení slouží k přesunu nebo transformaci více vrstev najednou. Seskupit lze dvě nebo více vrstev či skupin. Vybrané vrstvy seskupíme pomocí klávesové zkratky Ctrl + G.

Označit pro export

Vrstvy či skupiny vrstev můžeme označit pro export kliknutím na ikonu export Tlačítko export nebo pomocí klávesové zkratky Ctrl + E.

Odstranění

Vrstvu nebo skupinu vrstev odstraníme stisknutím klávesy Delete.

Panel vlastnosti

Panel Vlastnosti slouží k nastavování a úpravě vlastností právě vybraného objektu. Může se jednat například o barvu, průhlednost, velikost či umístění. Panel se mění v závislosti na vybraném objektu, a tak například pro obdélník či text nám panel zobrazí zcela odlišné možnosti. Práci s tímto panelem si vyzkoušíme již v příští lekci.

Režim Prototype

Režim Prototype využijeme až ve druhé etapě našeho projektu. V tomto režimu totiž budeme jednotlivá kreslící plátna navzájem propojovat, a tím následně vizualizovat, jak se bude moci uživatel pohybovat v naší aplikaci. Tímto si můžeme velmi snadno otestovat naše uživatelské rozhraní. Navíc jde zde možnost náš prototyp sdílet s dalšími členy týmu či naším klientem a získat tak ihned zpětnou vazbu. My se tímto režimem budeme více zabývat až ve druhé části tohoto kurzu.

Ukázka práce v režimu Prototype.

V příští lekci, Adobe XD - Založení projektu, si založíme vlastní projekt v rámci, kterého budeme navrhovat jednoduchou mobilní aplikaci záznamník. Následně si připravíme jednotlivá kreslící plátna a naučíme se pracovat se souvisejícími nástroji a panely.


 

Stáhnout

Staženo 26x (1.19 MB)

 

Předchozí článek
Adobe XD - Úvod
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?
1 hlasů
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 (6)

 

 

Komentáře

Avatar
Karel Mayer
Člen
Avatar
Karel Mayer:26. října 8:28

Dobrý den, chci se zeptat, jestli nevíte, kde by se dal najít na internetu dobrý a kompletní on-line kurz Adobe XD? Děkuji za odpověď. Karel

 
Odpovědět
26. října 8:28
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.

Zobrazeno 1 zpráv z 1.