Hur man skapar grafik med Adobe XD: En nybörjarguide

Adobe XD är ett kraftfullt verktyg som låter dig skapa UI/UX-designer för programvara, appar, webbplatser och mer. Detta inkluderar också att skapa mockups, prototyper och anpassade UI-komponenter för ett gränssnitt. Du kan skapa både enkla och komplexa mönster med Adobe XD.

Här kommer vi att beskriva hur du lägger till enkel grafik inklusive former, bilder och text till ett nytt Adobe XD-projekt. Detta kommer att följas av en guide om hur man konverterar en grupp av former till komponenter och hur man återanvänder dessa komponenter på sidan. Slutligen kommer artikeln också att täcka hur du exporterar din grafik. Låt oss hoppa direkt in.

Skapa ett Adobe XD-projekt

När du skapar ett nytt Adobe XD-projekt bör du välja en layoutstorlek för ditt projekt. Det ger dig några mallar att välja mellan baserat på några populära enheter.

Några exempel på detta inkluderar iPhone X/XS/11 Pro (375px x 812px), iPad (768px x 1024px) eller Web 1920 (1920px x 1080px). Alternativt har du också möjlighet att välja en anpassad bredd och höjd för ditt projekt.

När du har skapat ett nytt projekt kommer Adobe XD att öppna en tom sida. Det är här du kan börja lägga till bilder, former, text eller andra designelement. Beroende på vilken Adobe XD-version du har, kanske du kan utforska några av de nya funktionerna som Adobe XD erbjuder.

Designelementet på högsta nivån är själva canvassidan. Om du markerar den kan du använda den högra rutan för att ändra några av dess egenskaper direkt, till exempel bredden eller höjden på duken.

Hur man lägger till bilder

Det finns flera sätt att lägga till bilder i ditt Adobe XD-projekt.

• Det första alternativet är att klicka på hamburgare menyikonen överst i den vänstra kolumnen. Klicka på Importera, och öppna filen du vill lägga till.
• Ett annat alternativ är att navigera till din bild i filutforskaren och dra filen direkt till Adobe XD.
• Ett tredje alternativ är att kopiera och klistra in din bild om du har den öppen i en annan programvara, till exempel Microsoft Word.

Hur man ändrar storlek och placerar om en bild

Du kan flytta om och ändra storlek på en bild antingen direkt på duken eller genom att ändra dess egenskaper.

1. Markera bilden. När du markerar ett designelement på duken kommer du att kunna se dess egenskaper i den högra rutan.
2. Ändra bildens bredd och höjd. Dessa representeras av W och H fält.
3. Du kan också ändra X och Y koordinater för var den övre vänstra delen av bilden börjar.
4. För att flytta runt bilden, klicka och dra runt bilden på duken.
5. För att ändra storlek, dra punkterna som finns i bildens kanter.

Hur man justerar kanterna på en bild

Du kan justera bildens hörn för att ändra dess form.

1. Markera bilden.
2. Du kommer att se några punkter runt bilden. Dessutom finns det några punkter i bildens hörn.
3. Klicka och dra på en punkt inuti bilden. Detta kommer långsamt att omforma bilden till en annan form.

Hur man lägger till andra effekter till bilden

Du kan manipulera bilden ytterligare genom att lägga till effekter. Detta inkluderar opacitet, kanter, oskärpa effekter och mer.

1. Markera bilden och ändra Osnabbhet i den högra rutan.
2. Medan du fortfarande är i den högra rutan ändrar du färgen på Bbeställa. Här kan du också ändra tjocklek, streck stil, och hörnstil av gränsen.
3. Lägg till en oskärpa effekt på bilden och ändra Mängd för oskärpa objekt för att öka eller minska oskärpa intensiteten.

Hur man lägger till former

Du kan lägga till former i Adobe XD via den vänstra rutan.

1. I den vänstra rutan kan du välja att skapa flera grundläggande former inklusive en rektangel, cirkel, triangel och linje. Välj formen du vill rita.
2. Klicka på valfri punkt på duken och dra markören för att börja skapa formen.

Hur man lägger till anpassade former

Du kan använda det anpassade formverktyget för att skapa din egen form.

1. I den vänstra rutan väljer du penna ikon.
2. Klicka var som helst på duken för att lägga till din första punkt, eller "hörn", för formen. För varje punkt i formen klickar du på duken på det område där du vill att den ska vara.
3. När du har skapat formen trycker du på Esc tangenten på ditt tangentbord.

Hur man ändrar färgen på en form

Du kan ändra färgen på formen med hjälp av den högra rutan.

1. Markera formen.
2. Ändra i den högra rutan Fsjuk.
3. Dessutom kan du också lägga till kanter, oskärpa effekter och ändra opaciteten för formen på samma sätt som bilder.

Hur man lägger till text

Du kan också lägga till och redigera text på samma sätt som du lägger till former.

1. Klicka på Text ikonen i den vänstra rutan.
2. Klicka var som helst på arbetsytan för att lägga till en ny textruta. Skriv in önskad text i textrutan.
3. Använd den högra rutan för att redigera storlek, typsnittsfamilj, och inriktning fält.

Hur man skapar komponenter

En komponent är en grupp designelement som kan återanvändas. För att skapa och använda en komponent måste du först ha en grupp av former eller andra designobjekt.

1. Markera gruppen av former på duken. Högerklicka på gruppen och välj Gör komponent.
2. Klicka på längst ned i den vänstra rutan Tillgångar. En ny meny öppnas med alla tillgångar du har, inklusive den komponent du just har lagt till.
3. Klicka och dra komponenten från listan över komponenter till arbetsytan. Om du gör det skapas exakt samma grupp av element.

Hur man exporterar objekt

Du kan exportera enskilda objekt såväl som hela sidan.

1. Om du vill exportera ett enstaka objekt markerar du det som du vill exportera.
2. Klicka på hamburgare menyikonen överst i den vänstra kolumnen.
3. Välj Exportera, klicka sedan på Vald.
4. Om du vill exportera hela sidan (eller alla sidor), välj Alla Artboards istället.
5. Du kan ange filformatet (PNG, JPG, SVG eller PDF), vad det exporterade objektet ska användas för (som webb eller iOS) och var du vill spara din fil.

Bli skicklig i Adobe XD

Det här är bara grunderna. Några andra funktioner inkluderar möjligheten att lägga till hyperlänkar, symboler, appintegrationer och UI-kit. Adobe XD lägger också ut nya funktioner då och då för att förbättra och effektivisera skapandet av dina mockups och anpassade UI-designer.

Det finns flera kurser tillgängliga online för att ta dina nya designkunskaper till nästa nivå.

Dessa Adobe-kurser kommer att förvandla dig till en Creative Cloud Master

Läs Nästa

Om författaren