Share
I denne korte opplæringen skal jeg vise deg hvordan du lager en SVG-klar pil grafikk ved hjelp av Adobe XD.
Jeg skal bruke et nettsteddesign som er en del av et nytt kurs kalt "Kodesvennlig design med Adobe XD". Den har hovedinnholdsområdet øverst på siden, og nå vil jeg legge til en knapp med en pil som vil oppfordre brukere til å bla ned for å se mer innhold.
Adobe XD er ikke et fullverdig vektorredigeringsprogram, men det er fortsatt ganske mye du kan gjøre med det. Ved å bruke XDs vektorverktøy, uansett hvor du kan, i stedet for flate bitmaps (som JPG, PNG etc.) når du overleverer design til en utvikler, vil de kunne ta disse vektorgrafikene og slå dem direkte inn i SVG-koden.
Vi starter med ellipse verktøy og bruk den til å tegne en sirkel på ca 85px bred. Vi fjerner grensen ved å endre innstillingene i høyre hånd Eiendommer panel, så fyll fyllingen til noe som passer.
Vi bruker da Rektangel verktøy for å lage en form som overlapper toppen av sirkelen. Når du endrer størrelsen på det, vil du legge merke til at det snapter seg pent til halvveispunktet på sirkelen. Vi kan da velge begge former og bruke Boolske operatører i Eiendommer panel, kan vi trekke den øverste halvdelen av sirkelen.
For å lage pilen skal vi trekke fra en annen form fra denne halvsirkelen. Det vil være litt fiddlier enn det vi har gjort så langt, fordi Adobe XD er designet for å være en prototypeprogram, ikke et dedikert vektordesignprogram. Men vi kan sikkert jobbe med det vi har. Jeg velger for Penn verktøy i kombinasjon med Rektangel verktøy.
Få mer kontroll over stiene i figurene dine ved å høyreklikke på formen du vil redigere, og deretter gå til Sti> Konverter til sti. Dette vil forandre objektet fra en forhåndsdefinert form til et brukbart sett med stier. Hvis du vil redigere nodene på den banen, dobbeltklikker du på objektet.
Det er opp til deg hvordan du lager ditt pilikon, men når det er gjort, legg det på toppen av halvcirkelobjektet, velg begge og trekk pilen med boolean verktøy som vi gjorde før. Du burde ende opp med noe litt som dette:
Du har nå fullført SVG-klar pilikonet ved hjelp av enkle verktøy i Adobe XD! For detaljer om hva du kan gjøre med det neste, hold øynene skli for det kommende kurset.
Accentsconagua