Jak vytvářet grafiku s Adobe XD: Průvodce pro začátečníky

Adobe XD je výkonný nástroj, který vám umožňuje vytvářet návrhy UI/UX pro software, aplikace, webové stránky a další. To také zahrnuje vytváření maket, prototypů a vlastních komponent uživatelského rozhraní pro rozhraní. Pomocí Adobe XD můžete vytvářet jednoduché i složité návrhy.

Zde nastíníme, jak přidat jednoduchou grafiku včetně tvarů, obrázků a textu do nového projektu Adobe XD. Poté bude následovat průvodce, jak převést skupinu tvarů na komponenty a jak tyto komponenty znovu použít na stránce. Nakonec se článek také bude zabývat tím, jak exportovat grafiku. Pojďme rovnou do toho.

Vytvoření projektu Adobe XD

Když vytváříte nový projekt Adobe XD, měli byste pro svůj projekt vybrat velikost rozvržení. Poskytuje několik šablon, ze kterých si můžete vybrat na základě některých oblíbených zařízení.

Mezi několik příkladů patří iPhone X/XS/11 Pro (375 x 812 pixelů), iPad (768 x 1024 pixelů) nebo Web 1920 (1920 x 1080 pixelů). Případně máte také možnost vybrat si vlastní šířku a výšku pro váš projekt.

Jakmile vytvoříte nový projekt, Adobe XD otevře prázdnou stránku. Zde můžete začít přidávat obrázky, tvary, text nebo jiné prvky návrhu. V závislosti na verzi Adobe XD, kterou máte, možná budete moci prozkoumat některé z nových funkcí které Adobe XD nabízí.

Prvek návrhu nejvyšší úrovně je samotná stránka plátna. Pokud jej zvýrazníte, můžete pomocí pravého podokna přímo změnit některé jeho vlastnosti, jako je šířka nebo výška plátna.

Jak přidat obrázky

Existuje několik způsobů, jak přidat obrázky do svého projektu Adobe XD.

• První možností je kliknout na hamburger ikona nabídky v horní části levého sloupce. Klikněte na Importa otevřete soubor, který chcete přidat.
• Další možností je přejít na obrázek v průzkumníku souborů a přetáhnout soubor přímo do Adobe XD.
• Třetí možností je zkopírovat a vložit obrázek, pokud jej máte otevřený v jiném softwaru, jako je Microsoft Word.

Jak změnit velikost a umístění obrázku

Můžete přemístit a změnit velikost obrázku buď přímo na plátně, nebo změnou jeho vlastností.

1. Zvýrazněte obrázek. Když zvýrazníte prvek návrhu na plátně, budete moci vidět jeho vlastnosti v pravém podokně.
2. Změňte šířku a výšku obrázku. Tyto jsou reprezentovány W a H pole.
3. Můžete také změnit X a Y souřadnice místa, kde začíná levý horní okraj obrázku.
4. Chcete-li obrázek posunout, klikněte a přetáhněte obrázek na plátně.
5. Chcete-li změnit velikost, přetáhněte body umístěné na okrajích obrázku.

Jak upravit okraje obrázku

Můžete upravit rohy obrázku a změnit tak jeho tvar.

1. Zvýrazněte obrázek.
2. Uvidíte několik bodů umístěných kolem obrázku. Kromě toho existují také některé body umístěné uvnitř rohů obrázku.
3. Klikněte a přetáhněte bod umístěný uvnitř obrázku. Tím se obrázek pomalu přetvoří do jiného tvaru.

Jak k obrázku přidat další efekty

S obrázkem můžete dále manipulovat přidáním efektů. To zahrnuje neprůhlednost, okraje, efekty rozostření a další.

1. Zvýrazněte obrázek a změňte Órychlost v pravém panelu.
2. Zatímco jste stále v pravém podokně, změňte barvu Bobjednat. Zde můžete také změnit tloušťka, pomlčkový styl, a rohový styl hranice.
3. Přidejte do obrázku efekt rozostření a změňte Množství rozostření objektu pro zvýšení nebo snížení intenzity rozostření.

Jak přidat tvary

Pomocí levého panelu můžete v Adobe XD přidávat tvary.

1. V levém podokně si můžete vybrat vytvoření několika základních tvarů včetně obdélníku, kruhu, trojúhelníku a čáry. Vyberte tvar, který chcete nakreslit.
2. Klepnutím na libovolný bod na plátně a přetažením kurzoru začněte vytvářet tvar.

Jak přidat vlastní tvary

K vytvoření vlastního tvaru můžete použít nástroj vlastní tvar.

1. V levém podokně vyberte pero ikona.
2. Kliknutím kamkoli na plátno přidáte první bod neboli „roh“ tvaru. Pro každý bod tvaru klikněte na plátno na oblast, kde chcete, aby byl.
3. Po dokončení vytváření tvaru stiskněte tlačítko Esc klíč na klávesnici.

Jak změnit barvu tvaru

Barvu tvaru můžete změnit pomocí pravého podokna.

1. Zvýrazněte tvar.
2. V pravém podokně změňte Fnemocný.
3. Kromě toho můžete přidat okraje, efekty rozostření a změnit krytí tvaru stejným způsobem jako obrázky.

Jak přidat text

Můžete také přidat a upravit text stejným způsobem, jakým přidáváte tvary.

1. Klikněte na Text ikonu v levém podokně.
2. Kliknutím kamkoli na plátno přidáte nové textové pole. Do textového pole zadejte požadovaný text.
3. K úpravě použijte pravé podokno velikost, rodina písem, a zarovnání pole.

Jak vytvářet komponenty

Komponenta je skupina prvků návrhu, které lze znovu použít. Chcete-li vytvořit a použít komponentu, musíte mít nejprve skupinu tvarů nebo jiných objektů návrhu.

1. Zvýrazněte skupinu tvarů na plátně. Klikněte pravým tlačítkem na skupinu a vyberte Make Component.
2. V dolní části levého panelu klikněte na Aktiva. Otevře se nová nabídka se seznamem všech aktiv, která máte, včetně komponenty, kterou jste právě přidali.
3. Klepněte na komponentu a přetáhněte ji ze seznamu komponent na plátno. Pokud tak učiníte, vytvoří se přesně stejná skupina prvků.

Jak exportovat položky

Exportovat můžete jednotlivé položky i celou stránku.

1. Pokud chcete exportovat jednu položku, zvýrazněte položku, kterou chcete exportovat.
2. Klikněte na hamburger ikona menu v horní části levého sloupce.
3. Vybrat Vývoznía poté klikněte na Vybraný.
4. Pokud chcete exportovat celou stránku (nebo všechny stránky), vyberte Všechna umělecká plátna namísto.
5. Můžete určit formát souboru (PNG, JPG, SVG nebo PDF), k čemu bude exportovaná položka (například Web nebo iOS) a kam chcete soubor uložit.

Získejte dovednosti v Adobe XD

To jsou jen základy. Mezi další funkce patří možnost přidávat hypertextové odkazy, symboly, integrace aplikací a sady uživatelského rozhraní. Adobe XD také každou chvíli přináší nové funkce, které pomáhají zlepšit a zefektivnit vytváření vašich maket a vlastních návrhů uživatelského rozhraní.

Existuje několik online kurzů, které vám pomohou posunout vaše nové designérské dovednosti na další úroveň.

Tyto kurzy Adobe z vás udělají mistra Creative Cloud

Přečtěte si další

O autorovi