Share
Dans ce rapide tutoriel, je vais vous montrer comment créer un graphique fléché compatible SVG avec Adobe XD..
J'utiliserai un site Web faisant partie d'un nouveau cours intitulé «Conception conviviale avec Adobe XD». La zone de contenu principale se trouve déjà en haut de la page et je souhaite maintenant ajouter un bouton avec une flèche qui encouragera les utilisateurs à faire défiler l'écran pour afficher davantage de contenu..
Adobe XD n'est pas un programme d'édition vectorielle à part entière, mais vous pouvez encore en faire beaucoup. En utilisant les outils vectoriels de XD partout où vous le pouvez, au lieu d'utiliser des images bitmap plates (telles que JPG, PNG, etc.) lorsque vous transmettez la conception à un développeur, vous serez en mesure de prendre ces graphiques vectoriels et de les transformer directement en code SVG..
Nous allons commencer avec le Ellipse outil et utilisez-le pour dessiner un cercle d'environ 85 px de large. Nous allons supprimer la bordure en modifiant les paramètres de la main droite Propriétés panneau, puis changer le remplissage à quelque chose convenable.
Nous utiliserons ensuite le Rectangle outil pour créer une forme qui chevauche le haut du cercle. Lorsque vous le redimensionnerez, vous remarquerez qu'il se positionne parfaitement à mi-chemin du cercle. Nous pouvons ensuite sélectionner les deux formes et, en utilisant Opérateurs booléens dans le Propriétés panneau, on peut soustraire la moitié supérieure du cercle.
Pour créer la flèche, nous allons soustraire un autre forme de ce demi-cercle. Ce sera un peu plus compliqué que ce que nous avons fait jusqu'à présent, car Adobe XD est conçu pour être une application de prototypage, pas un programme de conception de vecteurs dédié. Cependant, nous pouvons certainement travailler avec ce que nous avons. J'opte pour le Stylo outil en combinaison avec Rectangle outil.
Obtenez plus de contrôle sur les chemins de vos formes en cliquant avec le bouton droit de la souris sur la forme que vous souhaitez modifier, puis en allant à Chemin> Convertir en chemin. Cela changera l'objet d'une forme prédéfinie à un ensemble de chemins exploitables. Pour éditer les nœuds sur ce chemin, double-cliquez sur l'objet..
C’est à vous de décider comment créer votre icône de flèche, mais une fois que c'est fait, placez-le au-dessus de l'objet demi-cercle, sélectionnez les deux et soustrayez la flèche avec le Booléen des outils comme nous l'avons fait auparavant. Vous devriez vous retrouver avec quelque chose un peu comme ceci:
Vous avez maintenant terminé l’icône flèche prête pour le SVG en utilisant des outils simples dans Adobe XD! Pour plus de détails sur ce que vous pourrez faire ensuite, gardez les yeux ouverts pour le prochain cours..
Accentsconagua