Sélectionnez l’objet.
Dernière mise à jour le
8 juin 2021
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.
Annotation
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.
Annotation
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.
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.
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.
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é.
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
Annotation
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.
```json
{
"trancreatedText": [
"Créez des formes vectorielles modifiables à partir de lignes, de chemins d'accès, de formes, de texte, d'images et de groupes booléens à l'aide de Contour de trait.Après avoir créé la forme, vous pouvez la modifier davantage à l'aide de contrôles ou en modifiant ses propriétés dans le panneau Propriétés.
Suivez ces étapes pour créer une icône à l'aide de Contour de trait.
Tutoriel
La fonctionnalité Vectoriser le contour d’Adobe XD permet de personnaliser facilement les tracés, les bordures et les formes en mettant à l’échelle des objets et en les exportant au format SVG pour le web sans aucun effort. Regardez ce tutoriel de Dani Beaumont, Chef de produit principal chez Adobe XD, pour apprendre à utiliser la fonction Vectoriser le contour.
Durée de visionnage : 2 minutes 50 secondes.
Les ombres internes et les ombres portées donnent un aspect plus réaliste aux objets de votre design en simulant des effets d'éclairage.
Ombre interne
Les ombres internes peuvent être utilisées pour simuler la profondeur 3D dans une image 2D.Par exemple, les ombres internes peuvent aider à simuler l'état enfoncé d'un bouton.
Ombre portée
Les ombres portées, en plus de fournir un effet 3D aux objets, peuvent également donner une impression de limite sans appliquer un trait de bordure.
\n
Suivez ces étapes pour appliquer une ombre interne ou portée à un objet de design :
\n
Cliquez sur l'objet, puis cliquez sur Ombre portée ou Ombre interne dans l'inspecteur de propriétés.
\n
Dans le sélecteur de couleurs, ajoutez une couleur et définissez l'opacité de l'ombre :
a. Pour ajouter une couleur à l'ombre, effectuez l'une des opérations suivantes :
\n
- Spécifiez les valeurs TSL, RVB ou hexadécimales de la couleur. Vous pouvez facilement basculer entre ces modes colorimétriques à l'aide du menu.
- 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. Pour définir l'opacité de l'ombre : utilisez le curseur d'opacité ou saisissez la valeur d'opacité en pourcentage.
Pour enregistrer une couleur et une opacité choisies comme nuance, 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.
Dans l’inspecteur Propriétés, définissez les options suivantes :
- Décalage X et Y : spécifiez l'étendue depuis la bordure de l'objet jusqu'à l'endroit où vous souhaitez que l'ombre soit décalée.
- B (Flou) : spécifiez l'étendue depuis le edge de l'ombre jusqu'à l'endroit où vous souhaitez qu'un flou se produise.
\n" ] } ```
Vous pouvez facilement copier les ombres appliquées à un objet vers d'autres objets à l'aide de Coller l'aspect. Appuyez sur Ctrl+ C sur l'objet auquel l'ombre est appliquée, puis appuyez sur Ctrl+Alt+V (Coller l'aspect) sur l'objet de destination.
Lorsque vous générez des spécifications techniques, les ombres qu'elles contiennent sont converties en CSS pouvant être facilement utilisé par les développeurs.
Exemples
Néomorphismes
?$png$&jpegSize=200&wid=901)
Collection d'objets avec ombres appliquées
?$png$&jpegSize=200&wid=900)
Tutoriel
Lorsque vous cherchez à ajouter de la profondeur à votre design, la fonctionnalité Ombre interne d'Adobe XD peut véritablement changer la donne.Regardez ce tutoriel de Dani Beaumont — Principal Product Manager, Adobe XD — pour apprendre à utiliser les ombres internes.
Temps de visionnage : 3 minutes.
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.
Articles connexes
Concevoir des prototypes UX avec Adobe XD
Créez des maquettes interactives pour sites web et applications mobiles.
