Hvordan lage grafikk med Adobe XD: En nybegynnerveiledning

Adobe XD er et kraftig verktøy som lar deg lage UI/UX-design for programvare, apper, nettsteder og mer. Dette inkluderer også å lage mockups, prototyper og tilpassede brukergrensesnittkomponenter for et grensesnitt. Du kan lage både enkle og komplekse design ved hjelp av Adobe XD.

Her vil vi skissere hvordan du legger til enkel grafikk inkludert former, bilder og tekst til et nytt Adobe XD-prosjekt. Dette vil bli fulgt av en veiledning om hvordan du konverterer en gruppe figurer til komponenter, og hvordan du gjenbruker disse komponentene på siden. Til slutt vil artikkelen også dekke hvordan du eksporterer grafikken din. La oss hoppe rett inn.

Opprette et Adobe XD-prosjekt

Når du oppretter et nytt Adobe XD-prosjekt, bør du velge en layoutstørrelse for prosjektet. Den inneholder noen få maler du kan velge mellom basert på noen populære enheter.

Noen få eksempler på dette inkluderer iPhone X/XS/11 Pro (375px x 812px), iPad (768px x 1024px) eller Web 1920 (1920px x 1080px). Alternativt har du også muligheten til å velge en egendefinert bredde og høyde for prosjektet ditt.

Når du har opprettet et nytt prosjekt, vil Adobe XD åpne en tom side. Det er her du kan begynne å legge til bilder, former, tekst eller andre designelementer. Avhengig av hvilken Adobe XD-versjon du har, kan du kanskje utforske noen av de nye funksjonene som Adobe XD tilbyr.

Designelementet på øverste nivå er selve lerretssiden. Hvis du markerer den, kan du bruke den høyre ruten til å endre noen av egenskapene direkte, for eksempel bredden eller høyden på lerretet.

Hvordan legge til bilder

Det er flere måter du kan legge til bilder i ditt Adobe XD-prosjekt.

• Det første alternativet er å klikke på hamburger menyikonet øverst i venstre kolonne. Klikk på Import, og åpne filen du vil legge til.
• Et annet alternativ er å navigere til bildet ditt i filutforskeren og dra filen direkte inn i Adobe XD.
• Et tredje alternativ er å kopiere og lime inn bildet hvis du har det åpent i en annen programvare, for eksempel Microsoft Word.

Slik endrer du størrelse og posisjonerer et bilde

Du kan flytte og endre størrelsen på et bilde enten direkte på lerretet eller ved å endre egenskapene.

1. Marker bildet. Når du markerer et designelement på lerretet, vil du kunne se egenskapene til det i den høyre ruten.
2. Endre bredden og høyden på bildet. Disse er representert ved W og H Enger.
3. Du kan også endre X og Y koordinater for hvor øverst til venstre i bildet starter.
4. For å flytte bildet rundt, klikk og dra bildet rundt på lerretet.
5. For å endre størrelse, dra punktene som er plassert i kantene av bildet.

Hvordan justere kantene på et bilde

Du kan justere hjørnene på bildet for å endre formen.

1. Marker bildet.
2. Du vil se noen punkter rundt bildet. I tillegg er det også noen punkter plassert inne i hjørnene av bildet.
3. Klikk og dra på et punkt i bildet. Dette vil sakte omforme bildet til en annen form.

Hvordan legge til andre effekter i bildet

Du kan manipulere bildet ytterligere ved å legge til effekter. Dette inkluderer opasitet, kantlinjer, uskarphet effekter og mer.

1. Marker bildet og endre Ofart i høyre rute.
2. Mens du fortsatt er i den høyre ruten, endrer du fargen på Brekkefølge. Her kan du også endre tykkelse, dash stil, og hjørne stil av grensen.
3. Legg til en uskarphet effekt på bildet, og endre Mengde uskarphet objekter for å øke eller redusere uskarphetintensiteten.

Hvordan legge til former

Du kan legge til former i Adobe XD via ruten til venstre.

1. I den venstre ruten kan du velge å lage flere grunnleggende former, inkludert et rektangel, sirkel, trekant og linje. Velg formen du vil tegne.
2. Klikk på et punkt på lerretet og dra markøren for å begynne å lage formen.

Hvordan legge til tilpassede former

Du kan bruke det tilpassede formverktøyet til å lage din egen form.

1. I den venstre ruten velger du penn ikon.
2. Klikk hvor som helst på lerretet for å legge til det første punktet, eller "hjørnet", for formen. For hvert punkt i formen klikker du på lerretet på området der du vil at det skal være.
3. Når du er ferdig med å lage formen, trykker du på Esc tasten på tastaturet.

Hvordan endre fargen på en form

Du kan endre fargen på formen ved å bruke ruten til høyre.

1. Fremhev formen.
2. I den høyre ruten endrer du Fjeg vil.
3. I tillegg kan du også legge til kanter, uskarpheteffekter og endre opasiteten til formen på samme måte som bilder.

Hvordan legge til tekst

Du kan også legge til og redigere tekst på samme måte som du legger til figurer.

1. Klikk på Tekst ikonet i venstre rute.
2. Klikk hvor som helst på lerretet for å legge til en ny tekstboks. Skriv inn ønsket tekst i tekstboksen.
3. Bruk den høyre ruten for å redigere størrelse, skriftfamilie, og Justering Enger.

Hvordan lage komponenter

En komponent er en gruppe designelementer som kan gjenbrukes. For å lage og bruke en komponent må du først ha en gruppe figurer eller andre designobjekter.

1. Fremhev gruppen med former i lerretet. Høyreklikk på gruppen og velg Lag komponent.
2. Klikk på nederst i venstre rute Eiendeler. En ny meny åpnes som viser alle eiendeler du har, inkludert komponenten du nettopp har lagt til.
3. Klikk og dra komponenten fra listen over komponenter til lerretet. Hvis du gjør det, opprettes nøyaktig samme gruppe med elementer.

Hvordan eksportere varer

Du kan eksportere individuelle elementer så vel som hele siden.

1. Hvis du vil eksportere et enkelt element, merk elementet du vil eksportere.
2. Klikk på hamburger menyikonet øverst i venstre kolonne.
3. Plukke ut Eksport, klikk deretter på Valgt.
4. Hvis du vil eksportere hele siden (eller alle sidene), velg Alle tegnebrett i stedet.
5. Du kan spesifisere filformatet (PNG, JPG, SVG eller PDF), hva det eksporterte elementet skal brukes til (som Web eller iOS), og hvor du vil lagre filen.

Bli dyktig i Adobe XD

Dette er bare det grunnleggende. Noen andre funksjoner inkluderer muligheten til å legge til hyperkoblinger, symboler, appintegrasjoner og UI-sett. Adobe XD legger også ut nye funksjoner nå og da for å bidra til å forbedre og strømlinjeforme opprettingen av mockups og tilpassede brukergrensesnittdesign.

Det er flere kurs tilgjengelig på nettet for å hjelpe deg med å ta de nye designferdighetene dine til neste nivå.

Disse Adobe-kursene vil gjøre deg til en Creative Cloud Master

Les Neste

Om forfatteren