Tracé
Dernière mise à jour le
Sep 03, 2021 04:27:26 PM GMT
Vous souhaitez faire appel à des outils de création de formes pour mettre au point une icône ou un élément de conception ? Alors vous êtes au bon endroit !
Avec XD, créer un visuel devient un véritable jeu d’enfant grâce aux nombreux outils de dessin disponibles dans la barre d’outils. Créez rapidement des icônes ou des graphismes simples avec l’un des outils de création de formes proposés ou, si vous préférez créer des formes ou des objets complexes, choisissez l’outil avancé Plume.
Lisez la suite de cet article pour découvrir les possibilités infinies offertes par les outils de création de formes et imaginer les éléments de conception qui vous ressemblent.
Vous débutez dans Adobe XD ?
Découvrez les bases de l’application
C’est à vous !
Obtenir un fichier d’exemple
Avant de commencer
Familiarisez-vous avec ces concepts de XD :
- Notions de base concernant l’espace de travail.
- Configuration de plans de travail dans XD.
|
|
Une forme se compose de plusieurs segments appelés tracés. Un tracé simple est constitué de deux points d’ancrage, qui fonctionnent comme des épingles chargées de maintenir un câble en place. |
|---|---|
|
Points d’ancrage |
Les deux extrémités opposées d’un segment sont marquées par des points d’ancrage. Vous pouvez utiliser ces points d’ancrage pour contrôler la longueur et la courbure d’un tracé. La poignée de direction d’un point d’ancrage détermine la direction du tracé. |
|
Nombre d’angles |
Nombre de côtés d’un polygone. |
|
Rayon |
Le rayon permet d’arrondir les angles d’une forme. |
|
Cadre de sélection |
Un cadre de sélection est une bordure rectangulaire autour d’une image, d’une forme ou d’un texte que vous pouvez faire glisser pour le déplacer, transformer, faire pivoter ou redimensionner. |
Envie de créer une forme de base ?
Tous les outils de dessin, y compris les outils de formes, sont disponibles dans la barre d’outils du mode Design. Les options de chaque outil sont accessibles dans l’Inspecteur Propriétés sur la droite.
 Barre d’outils d’Adobe XD |
Outil Rectangle (R) : pour créer un rectangle, un rectangle arrondi, un carré ou une forme personnalisée. |
|
|---|---|---|
|
<Insérer image> Outil Trait (L) : pour créer un segment rectiligne. |
Tracer un rectangle ou un carré
L’outil Rectangle de la barre d’outils vous permet de tracer un rectangle ou un carré. Mais il peut également servir à créer des formes personnalisées.
dans la barre d’outils, puis faites glisser la souris vers la droite.Comment arrondir les angles d’un rectangle ?
Vous pouvez ajuster précisément un rectangle en arrondissant un seul ou plusieurs de ses angles grâce à l’option Rayon.
Pour modifier le rayon d’un seul angle, maintenez la touche Option/Alt enfoncée, cliquez sur la poignée de rayon 
de l’angle à ajuster et tirez vers le centre de la forme.
Vous pouvez également définir une valeur précise pour cet angle dans la zone de texte Rayon différent pour chaque angle
, au sein de l’Inspecteur Propriétés.
, au sein de l’Inspecteur Propriétés.
Il n’est pas possible de modifier le rayon des angles lorsque vous convertissez la forme en tracé.
Tracer un cercle ou une ellipse
L’outil Ellipse permet de tracer des cercles et des ellipses.
|
|
|
|
Tracer un cercle Sélectionnez l’outil Ellipse |
Faites glisser la souris vers la droite. Notez les données de positionnement des objets affichées dans les champs Largeur et Hauteur, ainsi que les axes X et Y dans l’Inspecteur Propriétés. |
dans la barre d’outils. Maintenez la touche Maj enfoncée tout en faisant glisser le curseur pour contraindre la forme à un cercle.Tracer un polygone
Modifier le nombre d’angles et le rayon
Dans l’Inspecteur Propriétés associé au polygone, vous pouvez maintenant voir les options Nombre d’angles, Rayon et Nombre d’étoiles.
Utilisez la zone de texte Nombre d’angles 
pour modifier le nombre de côtés du polygone. Servez-vous des flèches vers le haut et vers le bas du clavier pour augmenter ou réduire la valeur.
de l’Inspecteur Propriétés.Créer des figures en forme d’étoile ou de cœur
Vous voulez que les utilisateurs puissent noter votre travail ? Vous pouvez ajouter des figures personnalisables en forme d’étoile ou de cœur dans votre design, sans avoir à les créer vous-même.
|
|
|
|
|
(Étoile)
) dans le coin supérieur droit du polygone et faites-la glisser vers le rayon.
de l’Inspecteur Propriétés, entrez une valeur comprise entre 1 et 100.Tracer une ligne
L’outil Trait permet de tracer des lignes horizontales, diagonales et verticales. Pour créer une ligne diagonale ou verticale, maintenez la touche Maj enfoncée quand vous tracez la ligne.
Tracer une courbe à partir d’une ligne droite
Pour créer une courbe, tracez une ligne et double-cliquez dessus avec l’outil Sélection pour la convertir en tracé. Double-cliquez sur un point d’ancrage pour faire apparaître sa poignée de direction. À présent, faites glisser la poignée dans la direction souhaitée pour obtenir une courbe parfaite. Si vous le souhaitez, ajoutez d’autres points d’ancrage au vecteur.
Modifier des formes
Dans Adobe XD, vous pouvez modifier rapidement des formes depuis un seul et même outil : l’outil Sélection. Dans cette section, voyons ensemble comment créer une bulle de dialogue à l’aide de l’outil Ellipse (bien entendu, vous pouvez choisir la forme qui vous plaît).
- Tracez une ellipse sur le plan de travail.
- Cliquez sur l’outil Sélection et double-cliquez sur la forme pour la convertir en tracé. À ce stade, vous pouvez modifier les points d’ancrage. Continuez à modifier les points d’ancrage existants ou cliquez simplement sur le segment du tracé pour en ajouter de nouveaux.
- Tracez la queue de la bulle de dialogue en tirant l’un des points d’ancrage dans la direction souhaitée.
Appuyez sur Echap pour quitter le mode d’édition du tracé. Le cadre de sélection réapparaît et les points d’ancrage sont masqués.
Vidéo : Comment créer des icônes à partir de formes de base ?
« Adobe XD propose des outils de dessin performants et efficaces pour créer toute l’iconographie dont vous avez besoin pour votre charte graphique. » – Dani Beaumont, responsable produit principal, XD.
Pour en savoir plus sur la création de votre propre iconographie à partir de zéro ou sur l’utilisation des bibliothèques d’icônes existantes, regardez cette vidéo de 4 minutes.
Pour regarder un autre tutoriel et récupérer des exemples de fichiers téléchargeables, reportez-vous à la section Création d’icônes avec des formes de base.
Conseils et astuces
Maintenant que vous savez créer des icônes dans XD, voici quelques astuces et conseils pratiques :
- Vous pouvez modifier la forme par défaut d’un rectangle en la convertissant en tracé. Sélectionnez les deux points d’ancrage du haut en faisant glisser la souris sur les points ou utilisez la touche Maj. Faites glisser l’un des points d’ancrage vers la gauche ou vers la droite, en le gardant aligné sur la position d’origine des points d’ancrage.
- Lorsque vous tracez des formes, maintenez la touche Option (Mac) ou Alt (Windows) enfoncée pour dessiner une figure à partir du centre.
Pour plus de conseils professionnels sur l’utilisation des outils de dessin dans XD, suivez @Elainecchao, Chef de produit XD, sur Twitter.
Et après ?
Nous vous avons expliqué les bases de la création d’icônes à l’aide des outils de forme de XD. Si vous souhaitez approfondir le sujet et découvrir d’autres fonctionnalités, regardez comment combiner des formes de base pour créer des motifs géométriques uniques.
Même si XD dispose de tous les outils de dessin nécessaires pour créer des illustrations vectorielles, vous pouvez également faire appel à Illustrator et à ses outils avancés. Lisez la suite de cet article pour découvrir les différentes méthodes permettant d’importer des actifs d’Illustrator dans XD.
Vous avez une question ou une suggestion ?
Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations.
Accéder à votre compte