Grafiikoiden luominen Adobe XD: llä: Aloittelijan opas

Adobe XD on tehokas työkalu, jonka avulla voit luoda UI/UX-malleja ohjelmistoille, sovelluksille, verkkosivustoille ja muille. Tämä sisältää myös mallien, prototyyppien ja mukautettujen käyttöliittymäkomponenttien luomisen käyttöliittymää varten. Voit luoda sekä yksinkertaisia ​​että monimutkaisia ​​malleja Adobe XD: llä.

Tässä hahmotellaan kuinka yksinkertaista grafiikkaa, kuten muotoja, kuvia ja tekstiä, lisätään uuteen Adobe XD -projektiin. Tämän jälkeen tulee opas muotoryhmän muuntamisesta komponenteiksi ja näiden komponenttien uudelleenkäyttöön sivulla. Lopuksi artikkelissa käsitellään myös grafiikan viemistä. Hyppäämme sisään.

Adobe XD -projektin luominen

Kun luot uuden Adobe XD -projektin, sinun tulee valita projektille asettelun koko. Se tarjoaa muutamia malleja, joista voit valita joidenkin suosittujen laitteiden perusteella.

Muutamia esimerkkejä tästä ovat iPhone X/XS/11 Pro (375 x 812 px), iPad (768 x 1024 pikseliä) tai Web 1920 (1920 x 1080 pikseliä). Vaihtoehtoisesti sinulla on myös mahdollisuus valita mukautettu leveys ja korkeus projektillesi.

Kun olet luonut uuden projektin, Adobe XD avaa tyhjän sivun. Tästä voit aloittaa kuvien, muotojen, tekstin tai muiden suunnitteluelementtien lisäämisen. Riippuen siitä, mikä Adobe XD -versio sinulla on, saatat pystyä tutustu joihinkin uusiin ominaisuuksiin joita Adobe XD tarjoaa.

Ylimmän tason suunnitteluelementti on itse kanvassivu. Jos korostat sen, voit käyttää oikeanpuoleista ruutua muuttaaksesi suoraan joitakin sen ominaisuuksia, kuten kankaan leveyttä tai korkeutta.

Kuinka lisätä kuvia

Voit lisätä kuvia Adobe XD -projektiisi useilla tavoilla.

• Ensimmäinen vaihtoehto on napsauttaa hampurilainen valikkokuvake vasemman sarakkeen yläosassa. Klikkaa Tuontija avaa tiedosto, jonka haluat lisätä.
• Toinen vaihtoehto on navigoida kuvaasi tiedostojenhallinnassa ja vetää tiedosto suoraan Adobe XD: hen.
• Kolmas vaihtoehto on kopioida ja liittää kuva, jos se on auki toisessa ohjelmistossa, kuten Microsoft Wordissa.

Kuinka muuttaa kuvan kokoa ja sijoittaa uudelleen

Voit sijoittaa uudelleen ja muuttaa kuvan kokoa joko suoraan kankaalle tai muuttamalla sen ominaisuuksia.

1. Korosta kuva. Kun korostat suunnitteluelementin kankaalle, näet sen ominaisuudet oikeanpuoleisessa ruudussa.
2. Muuta kuvan leveyttä ja korkeutta. Näitä edustavat W ja H kentät.
3. Voit myös muuttaa X ja Y koordinaatit siitä, mistä kuvan vasen yläkulma alkaa.
4. Voit siirtää kuvaa napsauttamalla ja vetämällä kuvaa ympäriinsä kankaalla.
5. Muuta kokoa vetämällä kuvan reunoissa olevia pisteitä.

Kuinka säätää kuvan reunoja

Voit muuttaa kuvan muotoa säätämällä kuvan kulmia.

1. Korosta kuva.
2. Näet joitain pisteitä kuvan ympärillä. Lisäksi kuvan kulmien sisällä on myös joitain pisteitä.
3. Napsauta ja vedä kuvan sisällä olevaa pistettä. Tämä muotoilee kuvan hitaasti eri muotoon.

Kuinka lisätä kuvaan muita tehosteita

Voit muokata kuvaa lisää lisäämällä tehosteita. Tämä sisältää peittävyyden, reunat, sumennustehosteet ja paljon muuta.

1. Korosta kuva ja muuta Ovauhtia oikeanpuoleisessa ruudussa.
2. Muuta ruudun väriä ollessasi edelleen oikeanpuoleisessa ruudussa BTilaus. Täällä voit myös muuttaa paksuus, viiva tyyliin, ja kulman tyyliin rajalta.
3. Lisää kuvaan sumennustehoste ja muuta Objektin sumennuksen määrä lisätä tai vähentää sumennuksen voimakkuutta.

Kuinka lisätä muotoja

Voit lisätä muotoja Adobe XD: ssä vasemmanpuoleisen ruudun kautta.

1. Vasemmassa ruudussa voit luoda useita perusmuotoja, kuten suorakulmion, ympyrän, kolmion ja viivan. Valitse muoto, jonka haluat piirtää.
2. Napsauta mitä tahansa kohtaa kankaalla ja vedä kohdistinta aloittaaksesi muodon luomisen.

Kuinka lisätä mukautettuja muotoja

Voit käyttää mukautettua muototyökalua oman muotosi luomiseen.

1. Valitse vasemmasta ruudusta kynä kuvake.
2. Napsauta mitä tahansa kankaalla lisätäksesi ensimmäisen pisteen tai "kulman" muotoon. Napsauta jokaista muodon kohtaa kohden kanvaasta sillä alueella, jossa haluat sen olevan.
3. Kun olet luonut muodon, paina Esc näppäintä näppäimistölläsi.

Kuinka muuttaa muodon väriä

Voit muuttaa muodon väriä oikeanpuoleisesta ruudusta.

1. Korosta muoto.
2. Muuta oikeanpuoleisessa ruudussa Fsairas.
3. Lisäksi voit myös lisätä reunoja, sumentaa tehosteita ja muuttaa muodon peittävyyttä samalla tavalla kuin kuviin.

Kuinka lisätä tekstiä

Voit myös lisätä ja muokata tekstiä samalla tavalla kuin lisäät muotoja.

1. Klikkaa Teksti -kuvaketta vasemmassa ruudussa.
2. Lisää uusi tekstiruutu napsauttamalla mitä tahansa kankaalla. Kirjoita haluamasi teksti tekstiruutuun.
3. Käytä oikeanpuoleista ruutua muokataksesi koko, fonttiperhe, ja linjaus kentät.

Kuinka luoda komponentteja

Komponentti on joukko suunnitteluelementtejä, joita voidaan käyttää uudelleen. Komponentin luomiseksi ja käyttämiseksi sinulla on ensin oltava joukko muotoja tai muita suunnitteluobjekteja.

1. Korosta kuvioryhmä kankaalla. Napsauta ryhmää hiiren kakkospainikkeella ja valitse Tee komponentti.
2. Napsauta vasemmanpuoleisen ruudun alareunassa Omaisuus. Uusi valikko avautuu, jossa luetellaan kaikki resurssit, mukaan lukien juuri lisäämäsi komponentti.
3. Napsauta ja vedä komponenttia komponenttiluettelosta kankaalle. Tämä luo täsmälleen saman elementtiryhmän.

Kuinka viedä tuotteita

Voit viedä yksittäisiä kohteita sekä koko sivun.

1. Jos haluat viedä yksittäisen kohteen, korosta kohde, jonka haluat viedä.
2. Klikkaa hampurilainen valikkokuvake vasemman sarakkeen yläosassa.
3. Valitse Viedäja napsauta sitten Valittu.
4. Jos haluat viedä koko sivun (tai kaikki sivut), valitse Kaikki taidetaulut sen sijaan.
5. Voit määrittää tiedostomuodon (PNG, JPG, SVG tai PDF), mitä varten viety kohde on tarkoitettu (kuten Web tai iOS) ja minne haluat tallentaa tiedoston.

Hanki Adobe XD: n taito

Nämä ovat vain perusasiat. Joitakin muita ominaisuuksia ovat mahdollisuus lisätä hyperlinkkejä, symboleja, sovellusintegraatioita ja käyttöliittymäsarjoja. Adobe XD julkaisee myös aina silloin tällöin uusia ominaisuuksia, jotka auttavat parantamaan ja virtaviivaistamaan malliesi ja mukautetun käyttöliittymäsuunnittelun luomista.

Verkossa on saatavilla useita kursseja, jotka auttavat viemään uudet suunnittelutaitosi uudelle tasolle.

Nämä Adobe-kurssit tekevät sinusta Creative Cloud Masterin

Lue Seuraava

Kirjailijasta