Sélectionnez l’objet.
Dernière mise à jour le
8 juin 2021
- Guide de l’utilisateur d’Adobe XD
- Introduction
- Nouveautés d’Adobe XD
- Questions fréquentes
- Design, création de prototypes et partage avec Adobe XD
- Gestion des couleurs
- Configuration requise
- Notions de base concernant l’espace de travail
- Changement de langue dans l’application Adobe XD
- Accès aux kits de conception d’interface utilisateur
- Accessibilité dans Adobe XD
- Raccourcis clavier
- Conseils et astuces
- Conception
- Plans de travail, repères et calques
- Formes, objets et chemins
- Sélection, redimensionnement et rotation d’objets
- Déplacement, alignement, répartition et disposition d’objets
- Regroupement, verrouillage, duplication, copie et retournement d’objets
- Application d’un contour, d’un fond ou d’une ombre portée à un objet
- Création d’éléments répétés
- Création de designs en perspective avec des transformations 3D
- Modification d’objets à l’aide d’opérations booléennes
- Texte et polices
- Composants et états
- Masquage et effets
- Mise en page
- Vidéos et animations Lottie
- Prototypage
- Création de prototypes interactifs
- Animation des prototypes
- Propriétés d’objet prises en charge pour l’animation automatique
- Création de prototypes avec clavier et manette de jeu
- Création de prototypes à l’aide de la lecture et des commandes vocales
- Création de transitions temporisées
- Ajouter des incrustations
- Conception de prototypes de voix
- Création de liens d’ancrage
- Création d’hyperliens
- Aperçu de designs et de prototypes
- Partage, exportation et révision
- Partage des plans de travail sélectionnés
- Partage de conceptions et de prototypes
- Définition des autorisations d’accès pour les liens
- Utilisation de prototypes
- Révision de prototypes
- Utilisation des spécifications techniques
- Partage de spécifications techniques
- Inspection de spécifications techniques
- Navigation dans les spécifications techniques
- Révision des spécifications techniques et commentaires
- Exportation de ressources de design
- Exportation et téléchargement de fichiers à partir de spécifications techniques
- Partage de groupe pour les entreprises
- Sauvegarde et transfert de ressources XD
- Chartes graphiques
- Chartes graphiques et bibliothèques Creative Cloud
- Utilisation de ressources de document dans Adobe XD
- Utilisation des bibliothèques Creative Cloud dans Adobe XD
- Migration de ressources liées vers les bibliothèques Creative Cloud
- Utilisation des jetons de conception
- Utilisation de ressources provenant de bibliothèques Creative Cloud
- Documents en ligne
- Intégrations et plug-ins
- Utilisation de ressources externes
- Utilisation de ressources de design provenant de Photoshop
- Copier-coller de ressources depuis Photoshop
- Importation ou ouverture de conceptions Photoshop
- Utilisation des fichiers Illustrator dans Adobe XD
- Ouverture et importation de conceptions Illustrator
- Copie de vecteurs d’Illustrator vers XD
- Plug-ins pour Adobe XD
- Création et gestion des plug-ins
- Intégration Jira pour XD
- Plug-in Slack pour XD
- Plug-in Zoom pour XD
- Publication de designs depuis XD vers Behance
- XD pour iOS et Android
- Résolution des problèmes
- Problèmes connus et résolus
- Installation et mises à jour
- Lancement et blocage
- XD se bloque au lancement sur Windows 10
- XD se ferme lorsque vous vous déconnectez de Creative Cloud
- Problème lié à l’état d’un abonnement sur Windows
- Avertissement d’application bloquée lors du lancement de XD sur Windows
- Génération du fichier de vidage sur Windows
- Collecte et partage de journaux d’incidents
- Documents en ligne et bibliothèques Creative Cloud
- Prototype, publication et révision
- Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
- Problèmes liés aux workflows de publication
- Les liens publiés n’apparaissent pas dans les navigateurs
- Les prototypes ne s’affichent pas correctement dans les navigateurs
- Le panneau de commentaires s’affiche soudainement sur les liens partagés
- Impossible de publier des bibliothèques
- Importation, exportation et utilisation d’autres applications
Apprenez à créer des effets de fusion et à définir le contour, le fond, l’ombre portée et l’ombre interne d’un objet dans Adobe XD.
Application d’une couleur de fond à un objet
-
-
Cliquez sur le rectangle en regard de l’option Fond. Le sélecteur de couleurs apparaît.
Sélecteur de couleurs
Sélecteur de couleurs Remarque :Vous pouvez également utiliser l’outil Pipette pour appliquer des couleurs de fond. La touche [i] active la pipette de remplissage.
- En cliquant une fois sur la touche, vous ouvrez la pipette de remplissage.
- En cliquant une nouvelle fois sur la touche, vous fermez la pipette de remplissage.
-
Vous pouvez :
- Saisir les valeurs hexadécimales, HSBA ou RVB si vous connaissez les valeurs de couleur exactes. Vous pouvez également basculer entre les différents modes de couleur.
- Ajuster la couleur à l’aide du curseur et du champ de couleurs. Dans ce cas, les valeurs numériques HSBA, RVB et hexadécimales sont ajustées en conséquence.
- Définir un fond ainsi que l’opacité de ce fond à l’aide du curseur de couleurs ou en indiquant une valeur en pourcentage.
- Utiliser l’outil Pipette pour sélectionner une couleur à partir d’un plan de travail.
- Appliquer des fonds en dégradé à l’objet. Pour en savoir plus sur les dégradés, reportez-vous à la section Création et modification de dégradés.
À mesure que vous modifiez les options du sélecteur de couleurs, les changements sont visibles sur le plan de travail.
Remarque :Adobe XD prend également en charge les codes hexadécimaux abrégés. Par exemple, si vous tapez 0 et appuyez sur Entrée, XD affiche automatiquement la couleur avec le code #000000.
-
Vous pouvez enregistrer une couleur en tant que nuance pour pouvoir la réutiliser facilement par la suite. Pour enregistrer une couleur en tant que nuance, cliquez sur l’icône + au bas du sélecteur de couleurs.
Ajout de nuances
Ajout de nuances Vous pouvez réorganiser les nuances dans le sélecteur de couleurs en les faisant glisser. Pour supprimer une nuance, faites-la glisser en dehors du sélecteur de couleurs.
Application d’une image de fond à un objet
Commencez par activer l’option de fond (si ce n’est pas déjà fait), comme expliqué dans la section Application d’une couleur de fond à un objet. Ensuite, faites glisser l’image sur l’objet à partir de l’emplacement où vous l’avez enregistrée (par exemple, le Finder ou l’Explorateur Windows).
Recadrage et placement des remplissages d’image
Vous pouvez maintenant double-cliquer sur les images placées dans les conteneurs (Objet > Masquer avec une Forme) pour recadrer et repositionner les images (si vous les avez fait glisser à partir du bureau) dans les remplissages d’image. Utilisez le mode Recadrer sur le remplissage d’image pour :
- Double-cliquer et activer le mode Recadrer pour un remplissage d’image,
- Repositionner l’image en mode Recadrer, ou
- Déplacer l’image n’importe où en mode Recadrer
Cette amélioration s’applique également aux fichiers importés depuis Photoshop et Sketch. Les fichiers importés conservent les remplissages d’image et les recadrages effectués dans l’application d’origine.
Collage d’images à partir du presse-papier
Vous pouvez également copier une image en dehors d’Adobe XD dans le presse-papier de votre système d’exploitation, sélectionner une forme, puis coller l’image en tant que remplissage à partir du presse-papier. Les images rempliront également une forme si elle est sélectionnée et que l’utilisateur sélectionne Fichier > Importer.
Création de contours et définition de la couleur d’un contour
-
Sélectionnez l’objet.
-
La largeur par défaut du contour est 1. Pour modifier cette valeur, changez la valeur Bordure.
-
Cliquez sur la pastille de couleur rectangulaire en regard de Bordure. Le sélecteur de couleurs apparaît.
Sélecteur de couleurs
Sélecteur de couleurs -
Vous pouvez :
- Saisir les valeurs hexadécimales, HSBA ou RVB si vous connaissez les valeurs exactes.
- Ajuster la couleur à l’aide du curseur et du champ de couleurs. Dans ce cas, les valeurs numériques HSBA, RVB et hexadécimales sont ajustées en conséquence.
- Utiliser l’outil Pipette pour sélectionner une couleur à partir d’un plan de travail.
- Utiliser le curseur de couleurs ou saisir une valeur en pourcentage pour définir l’opacité de la bordure.
- Modifier la taille de la bordure et créer des lignes pointillées.
- Définir les extrémités (carrées, arrondies, projetées) et les points de jonction (sommet, arrondi, biseau), ainsi que les contours internes et externes.
La couleur du contour de l’objet change à mesure que vous modifiez les options dans le sélecteur de couleurs.
-
Vous pouvez enregistrer une couleur en tant que nuance pour pouvoir la réutiliser facilement par la suite. Pour enregistrer une couleur en tant que nuance, cliquez sur l’icône + au bas du sélecteur de couleurs.
Ajout de nuances
Ajout de nuances Vous pouvez réorganiser les nuances dans le sélecteur de couleurs en les faisant glisser. Pour supprimer une nuance, faites-la glisser en dehors du sélecteur de couleurs.
-
Si l’objet est un tracé fermé, vous pouvez spécifier la largeur du contour. Pour aligner le contour sur le tracé, sélectionnez l’une des options présentées dans l’illustration suivante.
Par défaut, XD aligne le contour interne dans un tracé fermé.
Styles de contour A. Contour interne B. Contour externe C. Contour central D. Extrémité carrée E. Extrémité arrondie F. Extrémité projetée G. Jonction de type sommet H. Jonction arrondie I. Jonction en biseau
Styles de contour Remarque :Le fait de modifier la largeur ou l’alignement du contour ne change pas la taille de l’objet lui-même (en termes de cadre de sélection). En revanche, lorsque vous exportez l’objet, il est possible que ses dimensions varient en fonction du type de contour utilisé.
Le format SVG prend uniquement en charge les contours centraux. Si vous exportez un objet avec des contours internes ou externes au format SVG, la taille de l’image exportée s’affiche comme si l’image avait un contour central.
Créez des formes vectorielles modifiables à partir de lignes, de tracés, de formes, de texte, d’images et de groupes booléens à l’aide de l’option Vectoriser le contour. Après avoir créé la forme, vous pouvez encore la modifier à l’aide des commandes disponibles ou en modifiant ses propriétés dans le Panneau Propriétés.
Testez cette procédure pour créer une icône comme illustré ici avec une vectorisation de contour.
Ajout de tons foncés
Vous pouvez ajouter des ombres portées et des ombres internes à des objets, tels que des commutateurs, des boutons, des curseurs ou encore des illustrations.
-
Cliquez sur l’objet, puis cliquez sur Ombre portée ou Ombre interne dans l’inspecteur Propriétés.
-
Dans le sélecteur de couleurs :
a. Pour ajouter une couleur à l’ombre, procédez de l’une des manières suivantes :
- Spécifiez les valeurs TSL, RVB ou hexadécimales de la couleur. Vous pouvez facilement basculer facilement entre ces modes de couleur.
- Ajustez la couleur à l’aide du curseur et du champ de couleurs. Dans ce cas, les valeurs TSL, RVB et hexadécimales sont ajustées automatiquement.
- Utilisez l’outil Pipette pour sélectionner une couleur à partir d’un plan de travail.
b. Utilisez le curseur d’opacité ou saisissez une valeur en pourcentage pour définir l’opacité de l’ombre.
Pour enregistrer un échantillon, cliquez sur l’icône + au bas du sélecteur de couleurs. Vous pouvez réorganiser les nuances dans le sélecteur de couleurs en les faisant glisser. Pour supprimer une nuance, faites-la glisser en dehors du sélecteur de couleurs.
Ombre interne
Ombre portée
Application des effets de fusion
Sélectionnez une image ou un objet (y compris des formes, des calques de texte, des groupes, des masques ou des composants) sur la zone de travail de conception. À partir de l’outil Inspecteur Propriétés, sélectionnez et appliquez le mode de fusion de votre choix. Pour plus de détails, voir Application des effets de fusion.
Suppression du fond, de l’ombre ou du contour d’un objet
Sélectionnez l’objet. Cliquez ensuite sur la case à cocher en regard de l’option Bordure, Fond ou Ombre dans l’Inspecteur Propriétés. Pour rétablir le fond, le contour ou l’ombre, cliquez à nouveau sur la case à cocher.
