Cum se creează grafice cu Adobe XD: un ghid pentru începători

Adobe XD este un instrument puternic care vă permite să creați modele UI/UX pentru software, aplicații, site-uri web și multe altele. Aceasta include, de asemenea, crearea de machete, prototipuri și componente personalizate de UI pentru o interfață. Puteți crea atât modele simple, cât și complexe folosind Adobe XD.

Aici, vom descrie cum să adăugați elemente grafice simple, inclusiv forme, imagini și text la un nou proiect Adobe XD. Acesta va fi urmat de un ghid despre cum să convertiți un grup de forme în componente și despre cum să reutilizați acele componente pe pagină. În cele din urmă, articolul va trata, de asemenea, cum să vă exportați grafica. Să sărim direct înăuntru.

Crearea unui proiect Adobe XD

Când creați un nou proiect Adobe XD, ar trebui să selectați o dimensiune de aspect pentru proiectul dvs. Oferă câteva șabloane din care puteți alege pe baza unor dispozitive populare.

Câteva exemple în acest sens includ iPhone X/XS/11 Pro (375px pe 812px), iPad (768px pe 1024px) sau Web 1920 (1920px pe 1080px). Alternativ, aveți și opțiunea de a selecta o lățime și o înălțime personalizate pentru proiectul dvs.

După ce ați creat un nou proiect, Adobe XD va deschide o pagină goală. Aici puteți începe să adăugați imagini, forme, text sau alte elemente de design. În funcție de versiunea Adobe XD pe care o aveți, este posibil să puteți explorați câteva dintre noile funcții pe care le oferă Adobe XD.

Elementul de design de nivel superior este pagina de pânză în sine. Dacă îl evidențiați, puteți utiliza panoul din dreapta pentru a modifica direct unele dintre proprietățile sale, cum ar fi lățimea sau înălțimea pânzei.

Cum să adăugați imagini

Există mai multe moduri în care puteți adăuga imagini la proiectul dvs. Adobe XD.

• Prima opțiune este să faceți clic pe hamburger pictograma meniu din partea de sus a coloanei din stânga. Click pe Importși deschideți fișierul pe care doriți să îl adăugați.
• O altă opțiune este să navigați la imaginea dvs. în exploratorul de fișiere și să trageți fișierul direct în Adobe XD.
• O a treia opțiune este să copiați și să lipiți imaginea dacă o aveți deschisă într-un alt software, cum ar fi Microsoft Word.

Cum să redimensionați și să repoziționați o imagine

Puteți repoziționa și redimensiona o imagine fie direct pe pânză, fie prin modificarea proprietăților acesteia.

1. Evidențiați imaginea. Când evidențiați un element de design pe pânză, veți putea vedea proprietățile acestuia în panoul din dreapta.
2. Modificați lățimea și înălțimea imaginii. Acestea sunt reprezentate de W și H câmpuri.
3. De asemenea, puteți schimba X și Y coordonatele unde începe partea din stânga sus a imaginii.
4. Pentru a muta imaginea, faceți clic și trageți imaginea pe pânză.
5. Pentru a redimensiona, trageți punctele situate la marginile imaginii.

Cum să reglați marginile unei imagini

Puteți ajusta colțurile imaginii pentru a-i schimba forma.

1. Evidențiați imaginea.
2. Veți vedea câteva puncte situate în jurul imaginii. În plus, există și câteva puncte situate în interiorul colțurilor imaginii.
3. Faceți clic și trageți pe un punct situat în interiorul imaginii. Acest lucru va remodela încet imaginea într-o formă diferită.

Cum să adăugați alte efecte la imagine

Puteți manipula imaginea în continuare adăugând efecte. Aceasta include opacitatea, marginile, efectele de estompare și multe altele.

1. Evidențiați imaginea și schimbați Opacea în panoul din dreapta.
2. În timp ce încă vă aflați în panoul din dreapta, schimbați culoarea BOrdin. Aici, puteți schimba și grosime, stil liniuță, și stil de colț a hotarului.
3. Adăugați un efect de estompare imaginii și modificați Suma de estompare obiect pentru a crește sau a reduce intensitatea neclarității.

Cum să adăugați forme

Puteți adăuga forme în Adobe XD prin panoul din stânga.

1. În panoul din stânga, puteți alege să creați mai multe forme de bază, inclusiv un dreptunghi, un cerc, un triunghi și o linie. Selectați forma pe care doriți să o desenați.
2. Faceți clic pe orice punct de pe pânză și trageți cursorul pentru a începe crearea formei.

Cum să adăugați forme personalizate

Puteți utiliza instrumentul de formă personalizată pentru a vă crea propria formă.

1. În panoul din stânga, selectați pix pictograma.
2. Faceți clic oriunde pe pânză pentru a adăuga primul punct, sau „colț”, pentru formă. Pentru fiecare punct al formei, faceți clic pe pânza din zona în care doriți să fie.
3. Când ați terminat de creat forma, apăsați tasta Esc tasta de pe tastatură.

Cum se schimbă culoarea unei forme

Puteți schimba culoarea formei folosind panoul din dreapta.

1. Evidențiați forma.
2. În panoul din dreapta, modificați Fbolnav.
3. În plus, puteți adăuga și chenare, efecte de estompare și puteți modifica opacitatea formei în același mod ca și imaginile.

Cum să adăugați text

Poti de asemenea adăugați și editați text în același mod în care adăugați forme.

1. Faceți clic pe Text pictograma din panoul din stânga.
2. Faceți clic oriunde pe pânză pentru a adăuga o nouă casetă de text. Introduceți textul dorit în caseta de text.
3. Utilizați panoul din dreapta pentru a edita mărimea, familie de fonturi, și aliniere câmpuri.

Cum se creează componente

O componentă este un grup de elemente de design care pot fi reutilizate. Pentru a crea și utiliza o componentă, mai întâi trebuie să aveți un grup de forme sau alte obiecte de design.

1. Evidențiați grupul de forme din pânză. Faceți clic dreapta pe grup și selectați Faceți componentă.
2. În partea de jos a panoului din stânga, faceți clic pe Active. Se va deschide un nou meniu care listează toate activele pe care le aveți, inclusiv componenta pe care tocmai ați adăugat-o.
3. Faceți clic și trageți componenta din lista de componente în pânză. Procedând astfel, se va crea exact același grup de elemente.

Cum să exportați articole

Puteți exporta articole individuale, precum și întreaga pagină.

1. Dacă doriți să exportați un singur articol, evidențiați articolul pe care doriți să îl exportați.
2. Faceți clic pe hamburger pictograma meniu din partea de sus a coloanei din stânga.
3. Selectați Export, apoi faceți clic pe Selectat.
4. Dacă doriți să exportați întreaga pagină (sau toate paginile), selectați Toate planurile de artă in schimb.
5. Puteți specifica formatul fișierului (PNG, JPG, SVG sau PDF), pentru ce va fi articolul exportat (cum ar fi Web sau iOS) și unde doriți să salvați fișierul.

Învățați-vă în Adobe XD

Acestea sunt doar elementele de bază. Alte caracteristici includ posibilitatea de a adăuga hyperlinkuri, simboluri, integrări de aplicații și kituri UI. Adobe XD oferă, de asemenea, noi funcții din când în când pentru a ajuta la îmbunătățirea și simplificarea creării machetelor și a design-urilor personalizate de UI.

Există mai multe cursuri disponibile online pentru a vă ajuta să vă duceți noile abilități de design la nivelul următor.

Aceste cursuri Adobe te vor transforma într-un maestru Creative Cloud

Citiți în continuare

Despre autor