Application d’un contour, d’un fond, d’une ombre portée ou d’une ombre interne à des objets

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

  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

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

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

Conversion de contours en formes à l’aide de l’option Vectoriser le contour

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. 

  1. Saisissez n’importe quelle lettre, par exemple S à l’aide de l’outil Texte de la zone de travail.

  2. Sélectionnez la lettre S et choisissez Objet > Tracé > Vectoriser le contour.
    Vous pouvez afficher deux calques dans le panneau Calques : 1. S - Contour et 2. S.

    Utilisez la vectorisation de contour sur une lettre du texte.
    Utilisez la vectorisation de contour sur une lettre du texte.

  3. Double-cliquez sur le rectangle pour ajouter des points d’ancrage.

  4. Cliquez et faites glisser les points d’ancrage pour créer une forme personnalisée. 

  5. Après avoir créé la forme, vous pouvez la modifier à l’aide du Panneau Propriétés, par exemple pour changer sa couleur avec les options Fonds et Dégradés.

    Ajout de couleurs et de styles pour personnaliser la forme
    Ajout de couleurs et de styles pour personnaliser la forme

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.

  1. Ajoutez un objet au plan de travail.

  2. Cliquez sur l’objet, puis cliquez sur Ombre portée ou Ombre interne dans l’inspecteur Propriétés.

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

  4. Dans l’inspecteur Propriétés, définissez les options suivantes :

    Décalage X et Décalage Y : Précise la distance de décalage entre l’ombre portée et l’objet.

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

Ombre interne

Application d’une ombre interne à un objet
Application d’une ombre interne à un objet

Ombre portée

Application d’une ombre portée à un objet
Application d’une ombre portée à un objet

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.

Logo Adobe

Accéder à votre compte