Sådan opretter du grafik med Adobe XD: En begyndervejledning

Adobe XD er et kraftfuldt værktøj, der giver dig mulighed for at skabe UI/UX-design til software, apps, websteder og mere. Dette inkluderer også oprettelse af mockups, prototyper og brugerdefinerede UI-komponenter til en grænseflade. Du kan skabe både enkle og komplekse designs ved hjælp af Adobe XD.

Her vil vi skitsere, hvordan du tilføjer enkel grafik inklusive former, billeder og tekst til et nyt Adobe XD-projekt. Dette vil blive efterfulgt af en guide til, hvordan man konverterer en gruppe figurer til komponenter, og hvordan man genbruger disse komponenter på siden. Endelig vil artiklen også dække, hvordan du eksporterer din grafik. Lad os springe lige ind.

Oprettelse af et Adobe XD-projekt

Når du opretter et nyt Adobe XD-projekt, skal du vælge en layoutstørrelse for dit projekt. Det giver et par skabeloner, som du kan vælge imellem baseret på nogle populære enheder.

Nogle 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å mulighed for at vælge en tilpasset bredde og højde til dit projekt.

Når du har oprettet et nyt projekt, åbner Adobe XD en tom side. Det er her, du kan begynde at tilføje billeder, former, tekst eller andre designelementer. Afhængigt af hvilken Adobe XD-version du har, kan du muligvis udforske nogle af de nye funktioner som Adobe XD tilbyder.

Designelementet på øverste niveau er selve lærredssiden. Hvis du fremhæver den, kan du bruge den højre rude til at ændre nogle af dens egenskaber direkte, såsom bredden eller højden af ​​lærredet.

Sådan tilføjes billeder

Der er flere måder, du kan tilføje billeder til dit Adobe XD-projekt.

• Den første mulighed er at klikke på hamburger menuikonet øverst i venstre kolonne. Klik på Importere, og åbn den fil, du vil tilføje.
• En anden mulighed er at navigere til dit billede i filstifinderen og trække filen direkte ind i Adobe XD.
• En tredje mulighed er at kopiere og indsætte dit billede, hvis du har det åbent i en anden software, såsom Microsoft Word.

Sådan ændrer du størrelse og flytter et billede

Du kan flytte og ændre størrelsen på et billede enten direkte på lærredet eller ved at ændre dets egenskaber.

1. Fremhæv billedet. Når du fremhæver et designelement på lærredet, vil du kunne se dets egenskaber i den højre rude.
2. Skift bredde og højde på billedet. Disse er repræsenteret af W og H felter.
3. Du kan også ændre x og Y koordinater for, hvor øverst til venstre i billedet starter.
4. For at flytte rundt på billedet skal du klikke og trække billedet rundt på lærredet.
5. For at ændre størrelsen skal du trække punkterne i billedets kanter.

Sådan justeres kanterne på et billede

Du kan justere hjørnerne af billedet for at ændre dets form.

1. Fremhæv billedet.
2. Du vil se nogle punkter placeret rundt om billedet. Derudover er der også nogle punkter placeret inde i hjørnerne af billedet.
3. Klik og træk på et punkt placeret inde i billedet. Dette vil langsomt omforme billedet til en anden form.

Sådan tilføjer du andre effekter til billedet

Du kan manipulere billedet yderligere ved at tilføje effekter. Dette inkluderer uigennemsigtighed, kanter, sløringseffekter og mere.

1. Fremhæv billedet og skift Ohurtighed i højre rude.
2. Mens du stadig er i den højre rude, skal du ændre farven på Bbestille. Her kan du også ændre tykkelse, tankestreg stil, og hjørne stil af grænsen.
3. Tilføj en sløringseffekt til billedet, og skift Mængde for objektsløring for at øge eller mindske sløringsintensiteten.

Sådan tilføjes figurer

Du kan tilføje figurer i Adobe XD via den venstre rude.

1. I den venstre rude kan du vælge at oprette flere grundlæggende former, herunder et rektangel, cirkel, trekant og linje. Vælg den form, du vil tegne.
2. Klik på et vilkårligt punkt på lærredet, og træk markøren for at begynde at skabe formen.

Sådan tilføjes brugerdefinerede former

Du kan bruge det brugerdefinerede formværktøj til at skabe din egen form.

1. I venstre rude skal du vælge pen ikon.
2. Klik hvor som helst på lærredet for at tilføje dit første punkt eller "hjørne" til formen. For hvert punkt i formen skal du klikke på lærredet på det område, hvor du gerne vil have det.
3. Når du er færdig med at oprette formen, skal du trykke på Esc tasten på dit tastatur.

Sådan ændres farven på en form

Du kan ændre farven på formen ved hjælp af den højre rude.

1. Fremhæv formen.
2. I den højre rude skal du ændre Fsyg.
3. Derudover kan du også tilføje kanter, sløringseffekter og ændre formens opacitet på samme måde som billeder.

Sådan tilføjes tekst

Du kan også tilføje og redigere tekst på samme måde som du tilføjer figurer.

1. Klik på Tekst ikon i venstre rude.
2. Klik hvor som helst på lærredet for at tilføje en ny tekstboks. Indtast den ønskede tekst i tekstboksen.
3. Brug den højre rude til at redigere størrelse, skrifttypefamilie, og justering felter.

Sådan opretter du komponenter

En komponent er en gruppe af designelementer, der kan genbruges. For at oprette og bruge en komponent skal du først have en gruppe former eller andre designobjekter.

1. Fremhæv gruppen af ​​former på lærredet. Højreklik på gruppen og vælg Lav komponent.
2. Klik på nederst i venstre rude Aktiver. En ny menu åbner en liste over alle aktiver, du har, inklusive den komponent, du lige har tilføjet.
3. Klik og træk komponenten fra listen over komponenter til lærredet. Hvis du gør det, oprettes den nøjagtig samme gruppe af elementer.

Sådan eksporteres varer

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

1. Hvis du vil eksportere et enkelt element, skal du markere det element, du vil eksportere.
2. Klik på hamburger menuikonet øverst i venstre kolonne.
3. Vælg Eksport, og klik derefter på Valgte.
4. Hvis du vil eksportere hele siden (eller alle sider), skal du vælge Alle tegnebrætter i stedet.
5. Du kan angive filformatet (PNG, JPG, SVG eller PDF), hvad det eksporterede element skal bruges til (såsom web eller iOS), og hvor du gerne vil gemme din fil.

Bliv dygtig til Adobe XD

Disse er blot det grundlæggende. Nogle andre funktioner inkluderer muligheden for at tilføje hyperlinks, symboler, app-integrationer og UI-sæt. Adobe XD udgiver også nye funktioner i ny og næ for at hjælpe med at forbedre og strømline oprettelsen af ​​dine mockups og brugerdefinerede UI-design.

Der er flere kurser tilgængelige online for at hjælpe med at tage dine nye designfærdigheder til det næste niveau.

Disse Adobe-kurser vil gøre dig til en Creative Cloud Master

Læs Næste

Om forfatteren