Share
In questo breve tutorial ti mostrerò come realizzare un grafico a freccia pronto per SVG usando Adobe XD.
Utilizzerò il design di un sito web che fa parte di un nuovo corso chiamato "Code Friendly Design With Adobe XD". Ha già l'area di contenuto principale nella parte superiore della pagina e ora voglio aggiungere un pulsante con una freccia che incoraggerà gli utenti a scorrere verso il basso per visualizzare più contenuti.
Adobe XD non è un programma di editing vettoriale completo, ma c'è ancora molto da fare con esso. Usando gli strumenti vettoriali XD ovunque sia possibile, invece di bitmap piatte (come JPG, PNG ecc.) Quando si passa il disegno a uno sviluppatore, saranno in grado di prendere quelle immagini vettoriali e trasformarle direttamente in codice SVG.
Inizieremo con il Ellisse strumento e usarlo per disegnare un cerchio di circa 85px di larghezza. Rimuoveremo il bordo modificando le impostazioni nella mano destra Proprietà pannello, quindi cambiare il riempimento in qualcosa di adatto.
Useremo quindi il Rettangolo strumento per creare una forma che si sovrappone alla parte superiore del cerchio. Quando ridimensionate, noterete che scatta ordinatamente verso il punto a metà del cerchio. Possiamo quindi selezionare entrambe le forme e, usando il Operatori booleani nel Proprietà pannello, possiamo sottrarre la metà superiore del cerchio.
Per creare la freccia che stiamo per sottrarre un altro forma da questo semicerchio. Sarà un po 'più fasullo di quello che abbiamo fatto finora, perché Adobe XD è progettato per essere un'applicazione di prototipazione, non un programma di disegno vettoriale dedicato. Tuttavia, possiamo certamente lavorare con ciò che abbiamo. Sto optando per il Penna strumento in combinazione con il Rettangolo strumento.
Ottieni un maggiore controllo sui percorsi delle forme facendo clic con il pulsante destro del mouse sulla forma che desideri modificare, quindi visitando Percorso> Converti in tracciato. Ciò cambierà l'oggetto da una forma predefinita a una serie di percorsi utilizzabili. Per modificare i nodi su quel percorso, fare doppio clic sull'oggetto.
Dipende da te come crei la tua icona a forma di freccia, ma una volta fatto, posizionalo sopra l'oggetto semicerchio, seleziona entrambi e sottrai la freccia con booleano strumenti come abbiamo fatto prima. Dovresti finire con qualcosa di simile a questo:
Ora hai completato l'icona freccia SVG-ready usando semplici strumenti in Adobe XD! Per i dettagli su ciò che puoi fare con il prossimo, tieni gli occhi aperti per il corso in arrivo.
Accentsconagua