Ako vytvoriť grafiku s Adobe XD: Príručka pre začiatočníkov

Adobe XD je výkonný nástroj, ktorý vám umožňuje vytvárať návrhy UI/UX pre softvér, aplikácie, webové stránky a ďalšie. To zahŕňa aj vytváranie makiet, prototypov a vlastných komponentov používateľského rozhrania pre rozhranie. Pomocou Adobe XD môžete vytvárať jednoduché aj zložité návrhy.

Tu načrtneme, ako pridať jednoduchú grafiku vrátane tvarov, obrázkov a textu do nového projektu Adobe XD. Potom bude nasledovať návod, ako previesť skupinu tvarov na komponenty a ako tieto komponenty znova použiť na stránke. Nakoniec sa článok bude zaoberať aj tým, ako exportovať grafiku. Poďme rovno do toho.

Vytvorenie projektu Adobe XD

Keď vytvárate nový projekt Adobe XD, mali by ste vybrať veľkosť rozloženia pre svoj projekt. Poskytuje niekoľko šablón, z ktorých si môžete vybrať na základe niektorých populárnych zariadení.

Medzi niektoré príklady patrí iPhone X/XS/11 Pro (375 x 812 pixelov), iPad (768 x 1024 pixelov) alebo Web 1920 (1920 x 1080 pixelov). Prípadne máte tiež možnosť vybrať si vlastnú šírku a výšku pre váš projekt.

Po vytvorení nového projektu Adobe XD otvorí prázdnu stránku. Tu môžete začať pridávať obrázky, tvary, text alebo iné dizajnové prvky. V závislosti od verzie Adobe XD, ktorú máte, možno budete môcť preskúmať niektoré z nových funkcií ktoré Adobe XD ponúka.

Prvok dizajnu najvyššej úrovne je samotná stránka plátna. Ak ho zvýrazníte, pomocou pravého panela môžete priamo zmeniť niektoré jeho vlastnosti, ako napríklad šírku alebo výšku plátna.

Ako pridať obrázky

Existuje niekoľko spôsobov, ako môžete pridať obrázky do svojho projektu Adobe XD.

• Prvou možnosťou je kliknúť na hamburger ikonu ponuky v hornej časti ľavého stĺpca. Kliknite na Importovaťa otvorte súbor, ktorý chcete pridať.
• Ďalšou možnosťou je prejsť na svoj obrázok v prieskumníkovi súborov a pretiahnuť súbor priamo do Adobe XD.
• Treťou možnosťou je skopírovať a prilepiť obrázok, ak ho máte otvorený v inom softvéri, ako je napríklad Microsoft Word.

Ako zmeniť veľkosť a umiestnenie obrázka

Môžete premiestniť a zmeniť veľkosť obrázka buď priamo na plátne, alebo zmenou jeho vlastností.

1. Zvýraznite obrázok. Keď zvýrazníte dizajnový prvok na plátne, budete môcť vidieť jeho vlastnosti na pravej table.
2. Zmeňte šírku a výšku obrázka. Tieto sú zastúpené W a H poliach.
3. Môžete tiež zmeniť X a Y súradnice miesta, kde začína ľavá horná časť obrázka.
4. Ak chcete posunúť obrázok, kliknite naň a potiahnite ho na plátne.
5. Ak chcete zmeniť veľkosť, potiahnite body umiestnené na okrajoch obrázka.

Ako upraviť okraje obrázka

Upravením rohov obrázka môžete zmeniť jeho tvar.

1. Zvýraznite obrázok.
2. Uvidíte niekoľko bodov umiestnených okolo obrázka. Okrem toho sa v rohoch obrázka nachádzajú aj niektoré body.
3. Kliknite a potiahnite bod umiestnený vo vnútri obrázka. Tým sa obrázok pomaly pretvorí do iného tvaru.

Ako pridať k obrázku ďalšie efekty

S obrázkom môžete ďalej manipulovať pridávaním efektov. To zahŕňa nepriehľadnosť, okraje, efekty rozmazania a ďalšie.

1. Zvýraznite obrázok a zmeňte ho Orýchlosť v pravom paneli.
2. Zatiaľ čo ste stále v pravom paneli, zmeňte farbu Bobjednať. Tu môžete tiež zmeniť hrúbka, pomlčkový štýla rohový štýl hranice.
3. Pridajte k obrázku efekt rozostrenia a zmeňte ho Množstvo rozostrenia objektu na zvýšenie alebo zníženie intenzity rozmazania.

Ako pridať tvary

Pomocou ľavého panela môžete pridávať tvary v aplikácii Adobe XD.

1. Na ľavej table si môžete vybrať vytvorenie viacerých základných tvarov vrátane obdĺžnika, kruhu, trojuholníka a čiary. Vyberte tvar, ktorý chcete nakresliť.
2. Kliknite na ľubovoľný bod na plátne a ťahaním kurzora začnite vytvárať tvar.

Ako pridať vlastné tvary

Na vytvorenie vlastného tvaru môžete použiť nástroj vlastného tvaru.

1. Na ľavej table vyberte položku perom ikonu.
2. Kliknutím kamkoľvek na plátno pridáte prvý bod alebo „roh“ tvaru. Pre každý bod tvaru kliknite na plátno na oblasť, kde ho chcete mať.
3. Po dokončení vytvárania tvaru stlačte tlačidlo Esc kláves na klávesnici.

Ako zmeniť farbu tvaru

Farbu tvaru môžete zmeniť pomocou pravého panela.

1. Zvýraznite tvar.
2. Na pravej table zmeňte Fchorý.
3. Okrem toho môžete pridať okraje, efekty rozmazania a zmeniť nepriehľadnosť tvaru rovnakým spôsobom ako obrázky.

Ako pridať text

Môžete tiež pridať a upraviť text rovnakým spôsobom, akým pridávate tvary.

1. Klikni na Text ikonu na ľavej table.
2. Kliknutím na ľubovoľné miesto na plátne pridáte nové textové pole. Do textového poľa zadajte požadovaný text.
3. Na úpravu použite pravý panel veľkosť, rodina písiema zarovnanie poliach.

Ako vytvoriť komponenty

Komponent je skupina dizajnových prvkov, ktoré možno opätovne použiť. Ak chcete vytvoriť a použiť komponent, musíte mať najprv skupinu tvarov alebo iných dizajnových objektov.

1. Zvýraznite skupinu tvarov na plátne. Kliknite pravým tlačidlom myši na skupinu a vyberte Make Component.
2. V spodnej časti ľavého panela kliknite na Aktíva. Otvorí sa nová ponuka so zoznamom všetkých aktív, ktoré máte, vrátane komponentu, ktorý ste práve pridali.
3. Kliknite a potiahnite komponent zo zoznamu komponentov na plátno. Ak tak urobíte, vytvorí sa presne rovnaká skupina prvkov.

Ako exportovať položky

Exportovať môžete jednotlivé položky aj celú stránku.

1. Ak chcete exportovať jednu položku, zvýraznite položku, ktorú chcete exportovať.
2. Klikni na hamburger ikona ponuky v hornej časti ľavého stĺpca.
3. Vyberte Exporta potom kliknite na Vybraný.
4. Ak chcete exportovať celú stránku (alebo všetky strany), vyberte Všetky umelecké dosky namiesto toho.
5. Môžete určiť formát súboru (PNG, JPG, SVG alebo PDF), na čo bude exportovaná položka slúžiť (napríklad Web alebo iOS) a kam chcete súbor uložiť.

Získajte zručnosti v Adobe XD

Toto sú len základy. Medzi ďalšie funkcie patrí možnosť pridávať hypertextové odkazy, symboly, integrácie aplikácií a súpravy používateľského rozhrania. Adobe XD tiež z času na čas prináša nové funkcie, ktoré pomáhajú zlepšiť a zefektívniť vytváranie vašich makiet a vlastných návrhov používateľského rozhrania.

Online je dostupných viacero kurzov, ktoré vám pomôžu posunúť vaše nové dizajnérske zručnosti na ďalšiu úroveň.

Tieto kurzy Adobe z vás urobia majstra Creative Cloud

Prečítajte si ďalej

O autorovi