Share
I denna snabba handledning ska jag visa dig hur man gör en SVG-klar pilgrafik med Adobe XD.
Jag använder en webbdesign som ingår i en ny kurs kallad "Code Friendly Design With Adobe XD". Den har huvudinnehållet högst upp på sidan redan och nu vill jag lägga till en knapp med en pil som uppmuntrar användarna att rulla ner för att visa mer innehåll.
Adobe XD är inte ett fulländigt vektorredigeringsprogram, men det finns fortfarande ganska mycket du kan göra med det. Genom att använda XDs vektorverktyg, var du än kan, istället för platta bitmappar (som JPG, PNG etc.) när du överlämnar designen till en utvecklare, kan de ta dessa vektorgrafik och göra dem direkt till SVG-kod.
Vi börjar med Ellips verktyg och använd det för att rita en cirkel på ca 85px bred. Vi tar bort gränsen genom att ändra inställningarna i höger hand Egenskaper panel, ändra sedan fyllningen till något som passar.
Vi använder sedan Rektangel verktyg för att skapa en form som överlappar toppen av cirkeln. När du ändrar storleken märker du att den snäpper snyggt till halvvägs på cirkeln. Vi kan då välja båda formerna och använda Booleska operatörer i Egenskaper panelen kan vi subtrahera den övre halvan av cirkeln.
För att skapa pilen kommer vi att subtrahera annan form från denna halvcirkel. Det kommer att vara lite fiddlier än vad vi hittills gjort, för att Adobe XD är utformad för att vara en prototypapplikation, inte ett dedikerat vektordesignprogram. Men vi kan säkert arbeta med det vi har. Jag väljer för Penna verktyg i kombination med Rektangel verktyg.
Få mer kontroll över banorna i dina former genom att högerklicka på formen du vill redigera och sedan gå till Sökväg> Konvertera till sökvägen. Detta kommer att ändra objektet från en fördefinierad form till en fungerande uppsättning sökvägar. För att redigera noderna på den sökvägen, dubbelklicka på objektet.
Det är upp till dig hur du skapar din pilikon, men när den är klar placerar du den ovanpå halvcirkelobjektet, väljer båda och subtraherar pilen med Boolean verktyg som vi gjorde tidigare. Du borde sluta med något lite så här:
Du har nu slutfört ikonen SVG-färdig pil med hjälp av enkla verktyg i Adobe XD! För detaljer om vad du kan göra med det nästa, håll dina ögon avskalade för den kommande kursen.
Accentsconagua