Sfat rapid Proiectați o imagine SVG Arrow în Adobe XD

În acest tutorial rapid vă voi arăta cum să creați o imagine grafică a săgeții SVG utilizând Adobe XD.

Uita-te la Screencast

Voi folosi un design de site care face parte dintr-un nou curs numit "Code Friendly Design With Adobe XD". Are deja zona de conținut principal din partea de sus a paginii și acum vreau să adaug un buton cu o săgeată care să îi încurajeze pe utilizatori să deruleze în jos pentru a vedea mai mult conținut.

Adobe XD nu este un program complet de editare vectorială, dar există încă destul de mult cu care puteți face acest lucru. Folosind instrumentele vectoriale XD oriunde poți, în loc de imagini bitmap (cum ar fi JPG, PNG, etc.) atunci când dai design-ul la un dezvoltator, ei vor putea să ia acele grafice vectoriale și să le transforme direct în cod SVG.

Proiectarea unei pictograme Arrow

Vom începe cu Elipsă și utilizați-l pentru a desena un cerc de aproximativ 85px. Vom scoate marginea prin modificarea setărilor din mâna dreaptă Proprietăți panou, apoi schimbați umplutura la ceva potrivit.

Apoi vom folosi Dreptunghi instrument pentru a crea o formă care se suprapune peste partea de sus a cercului. Atunci când o redimensionați, veți observa că se fixează bine la jumătatea drumului din cerc. Apoi putem selecta ambele forme și, folosind Operatori Booleeni în Proprietăți panou, putem scădea jumătatea superioară a cercului.

Pentru a crea săgeata, vom scădea o alta forma din acest semicerc. Acesta va fi un pic mai ciudat decât ceea ce am făcut până acum, deoarece Adobe XD este proiectat să fie o aplicație prototipantă, nu un program dedicat de design vectorial. Cu toate acestea, cu siguranță putem lucra cu ceea ce avem. Opresc pentru Stilou instrument în combinație cu Dreptunghi instrument.

Bacsis:

Obțineți mai mult control asupra căilor din formele dvs. făcând clic dreapta pe forma pe care doriți să o editați, apoi mergeți la Cale> Conversia la Cale. Aceasta va schimba obiectul dintr-o formă predefinită într-un set funcțional de căi. Pentru a edita nodurile pe această cale, faceți dublu clic pe obiect.

Depinde de tine modul în care creați pictograma săgeată, dar după ce ați terminat, plasați-o pe obiectul semi-cerc, selectați ambele și scădeați săgeata cu boolean unelte ca în trecut. Ar trebui să ajungeți la ceva asemănător:

Acum ați finalizat pictograma săgeată în formă de SVG folosind instrumente simple în Adobe XD! Pentru detalii despre ceea ce puteți face cu el în continuare, țineți ochii tăiați pentru cursul următor.