Kako stvoriti grafiku s Adobe XD: Vodič za početnike

Adobe XD moćan je alat koji vam omogućuje stvaranje UI/UX dizajna za softver, aplikacije, web-stranice i još mnogo toga. To također uključuje izradu maketa, prototipova i prilagođenih komponenti korisničkog sučelja za sučelje. Možete kreirati i jednostavne i složene dizajne koristeći Adobe XD.

Ovdje ćemo opisati kako dodati jednostavnu grafiku uključujući oblike, slike i tekst u novi Adobe XD projekt. Nakon toga slijedi vodič o tome kako pretvoriti grupu oblika u komponente i kako ponovno koristiti te komponente na stranici. Konačno, članak će također pokriti kako izvesti svoju grafiku. Uskočimo odmah.

Izrada Adobe XD projekta

Kada stvarate novi Adobe XD projekt, trebali biste odabrati veličinu izgleda za svoj projekt. Nudi nekoliko predložaka koje možete izabrati na temelju nekih popularnih uređaja.

Nekoliko primjera za to uključuje iPhone X/XS/11 Pro (375px x 812px), iPad (768px x 1024px) ili Web 1920 (1920px x 1080px). Alternativno, također imate mogućnost odabira prilagođene širine i visine za svoj projekt.

Nakon što izradite novi projekt, Adobe XD će otvoriti praznu stranicu. Ovdje možete početi dodavati slike, oblike, tekst ili druge elemente dizajna. Ovisno o tome koju verziju Adobe XD imate, možda ćete moći istražite neke od novih značajki koje nudi Adobe XD.

Element dizajna najviše razine je sama stranica platna. Ako ga označite, možete koristiti desno okno da izravno promijenite neka njegova svojstva, kao što su širina ili visina platna.

Kako dodati slike

Postoji više načina na koje možete dodati slike u svoj Adobe XD projekt.

• Prva opcija je kliknuti na hamburger ikona izbornika na vrhu lijevog stupca. Kliknite na Uvozi otvorite datoteku koju želite dodati.
• Druga je mogućnost navigacija do svoje slike u File Exploreru i povlačenje datoteke izravno u Adobe XD.
• Treća opcija je kopiranje i lijepljenje slike ako je imate otvorenu u drugom softveru, kao što je Microsoft Word.

Kako promijeniti veličinu i položaj slike

Možete premjestiti i promijeniti veličinu slike bilo izravno na platnu ili promjenom njegovih svojstava.

1. Označite sliku. Kada označite element dizajna na platnu, moći ćete vidjeti njegova svojstva u desnom oknu.
2. Promijenite širinu i visinu slike. Oni su predstavljeni W i H polja.
3. Također možete promijeniti x i Y koordinate mjesta gdje počinje gornji lijevi dio slike.
4. Da biste pomicali sliku, kliknite i povucite sliku po platnu.
5. Za promjenu veličine povucite točke koje se nalaze na rubovima slike.

Kako podesiti rubove slike

Možete podesiti kutove slike kako biste promijenili njezin oblik.

1. Označite sliku.
2. Vidjet ćete neke točke koje se nalaze oko slike. Osim toga, postoje i neke točke koje se nalaze unutar kutova slike.
3. Kliknite i povucite točku koja se nalazi unutar slike. Ovo će polako preoblikovati sliku u drugačiji oblik.

Kako dodati druge efekte slici

Možete dalje manipulirati slikom dodavanjem efekata. To uključuje neprozirnost, granice, efekte zamućenja i još mnogo toga.

1. Označite sliku i promijenite je Ostrpljivost u desnom oknu.
2. Dok ste još u desnom oknu, promijenite boju Bnarudžba. Ovdje također možete promijeniti debljina, stil crtice, i kutni stil granice.
3. Dodajte efekt zamućenja na sliku i promijenite Količina zamućenja objekta za povećanje ili smanjenje intenziteta zamućenja.

Kako dodati oblike

Možete dodati oblike u Adobe XD putem lijevog okna.

1. U lijevom oknu možete odabrati stvaranje više osnovnih oblika uključujući pravokutnik, krug, trokut i liniju. Odaberite oblik koji želite nacrtati.
2. Kliknite na bilo koju točku na platnu i povucite pokazivač da biste počeli stvarati oblik.

Kako dodati prilagođene oblike

Za izradu vlastitog oblika možete koristiti prilagođeni oblik.

1. U lijevom oknu odaberite olovka ikona.
2. Kliknite bilo gdje na platnu da dodate svoju prvu točku ili "kut" za oblik. Za svaku točku oblika kliknite na platno na području gdje biste željeli da bude.
3. Kada završite s kreiranjem oblika, pritisnite Esc tipku na tipkovnici.

Kako promijeniti boju oblika

Pomoću desnog okna možete promijeniti boju oblika.

1. Istaknite oblik.
2. U desnom oknu promijenite Fbolestan.
3. Osim toga, možete dodati obrube, efekte zamućenja i promijeniti neprozirnost oblika na isti način kao slike.

Kako dodati tekst

Također možete dodavati i uređivati ​​tekst na isti način na koji dodajete oblike.

1. Klikni na Tekst ikona u lijevom oknu.
2. Kliknite bilo gdje na platnu da biste dodali novi tekstni okvir. U tekstni okvir upišite željeni tekst.
3. Koristite desno okno za uređivanje veličina, obitelj fontova, i poravnanje polja.

Kako stvoriti komponente

Komponenta je skupina dizajnerskih elemenata koji se mogu ponovno koristiti. Da biste stvorili i koristili komponentu, prvo morate imati grupu oblika ili drugih objekata dizajna.

1. Istaknite grupu oblika na platnu. Desnom tipkom miša kliknite grupu i odaberite Napravite komponentu.
2. Na dnu lijevog okna kliknite na Imovina. Otvorit će se novi izbornik s popisom svih sredstava koje imate, uključujući komponentu koju ste upravo dodali.
3. Kliknite i povucite komponentu s popisa komponenti na platno. Time ćete stvoriti potpuno istu grupu elemenata.

Kako izvesti stavke

Možete izvesti pojedinačne stavke kao i cijelu stranicu.

1. Ako želite izvesti jednu stavku, označite stavku koju želite izvesti.
2. Klikni na hamburger ikona izbornika na vrhu lijevog stupca.
3. Izaberi Izvoz, a zatim kliknite na Odabran.
4. Ako želite izvesti cijelu stranicu (ili sve stranice), odaberite Sve umjetničke ploče umjesto toga.
5. Možete odrediti format datoteke (PNG, JPG, SVG ili PDF), čemu će biti izvezena stavka (kao što je web ili iOS) i gdje želite spremiti datoteku.

Steknite vještinu u Adobe XD

Ovo su samo osnove. Neke druge značajke uključuju mogućnost dodavanja hiperveza, simbola, integracija aplikacija i UI kompleta. Adobe XD također s vremena na vrijeme donosi nove značajke kako bi poboljšao i pojednostavio izradu vaših maketa i prilagođenih dizajna korisničkog sučelja.

Na mreži je dostupno više tečajeva koji će vam pomoći da svoje nove dizajnerske vještine podignete na sljedeću razinu.

Ovi Adobe tečajevi pretvorit će vas u majstora Creative Cloud

Pročitajte dalje

O autoru