Apprenez à définir le contour, le fond et l’ombre portée d’un objet dans Adobe XD.

Application d’une couleur de fond à un objet

  1. Sélectionnez l’objet.

  2. 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
  3. Vous pouvez :

    • Saisir les valeurs hexadécimales, HSBA ou RVB si vous connaissez les valeurs 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.
    • Vous pouvez également 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.

  4. 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

  1. Sélectionnez l’objet.

  2. La largeur par défaut du contour est 1. Pour modifier cette valeur, changez la valeur Bordure.

  3. 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
  4. 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.

  5. 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.

  6. 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
    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 

    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. Par conséquent, si vous exportez un objet avec un contour interne ou externe au format SVG, la taille de l’image exportée s’affiche comme si l’image avait un contour central.

Création d’une ombre portée

  1. Sélectionnez l’objet.

  2. Pour choisir la couleur de l’ombre, cliquez sur Ombre dans l’inspecteur Propriétés. Le sélecteur de couleurs apparaît.

    Vous pouvez :

    • Saisir les valeurs hexadécimales, HSBA ou RVB si vous connaissez les valeurs exactes. Vous pouvez également basculer facilement 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.  
    • 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 l’ombre.
  3. Spécifiez les options suivantes :

    Décalage sur X / Décalage sur Y

    Détermine la distance de décalage entre l’ombre portée et l’objet.

    B

    (Flou) Indique la distance par rapport au contour de l’ombre à laquelle vous souhaitez appliquer un flou.

    Indique la distance par rapport au contour de l’ombre à laquelle vous souhaitez appliquer un flou. Illustrator crée un objet de pixellisation transparent pour simuler le flou.
    Indique la distance par rapport au contour de l’ombre à laquelle vous souhaitez appliquer un flou. Illustrator crée un objet de pixellisation transparent pour simuler le flou.
    Indique la distance par rapport au contour de l’ombre à laquelle vous souhaitez appliquer un flou. Illustrator crée un objet de pixellisation transparent pour simuler le flou.
    Indique la distance par rapport au contour de l’ombre à laquelle vous souhaitez appliquer un flou. Illustrator crée un objet de pixellisation transparent pour simuler le flou.

    Spécification de l’ombre portée
    Spécification de l’ombre portée

    Pour enregistrer une 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.

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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne