Carte de dégradé : recolorez n’importe quelle image

Une carte de dégradé recolore une image en remplaçant chacun de ses tons par une couleur d’un dégradé. L’image est d’abord lue uniquement en luminosité, du noir au blanc, puis chaque luminosité est échangée contre la couleur située au même point du dégradé : l’extrémité gauche peint les ombres, l’extrémité droite peint les hautes lumières. Les formes, la lumière et le détail de l’image restent exactement les mêmes. Seules les couleurs changent, et c’est vous qui les choisissez toutes.

Comment fonctionne une carte de dégradé

Voyez le dégradé comme une table de correspondance. Un pixel à 0 % de luminosité prend la couleur tout à gauche ; un pixel à 50 % prend la couleur du milieu ; un pixel à 100 % prend celle de l’extrême droite. Comme la correspondance ne dépend que de la luminosité, deux couleurs d’origine très différentes mais de même luminosité, comme un pull rouge et une haie verte, finissent de la même couleur. C’est ce qui rend les cartes de dégradé si efficaces pour unifier des images.

Des rampes de carte de dégradé qui fonctionnent

La règle la plus importante : la rampe doit s’éclaircir régulièrement de gauche à droite. Ainsi, ce qui est sombre reste sombre, ce qui est clair reste clair, et l’image garde sa profondeur. Vous pouvez faire varier la teinte autant que vous voulez en chemin. Les rendus photographiques classiques, comme le sépia et le cyanotype, ne sont que des rampes de ce type.

Briser volontairement la règle de luminosité donne un rendu solarisé et psychédélique, amusant pour des affiches. Pour tout ce qui doit encore ressembler à une photo, gardez une rampe régulière. Si un ton moyen vire au gris, la solution est la même que pour n’importe quel dégradé : voir les dégradés boueux.

À quoi servent les cartes de dégradé

• Des séries de photos cohérentes : photos de banque d’images, photos de téléphone et vieilles archives ressortent dans une seule palette ; voir la cohérence de marque
• Des textures de marque : transformez n’importe quelle texture en niveaux de gris, comme des nuages, du béton, du tissu ou du bruit, en un arrière-plan aux couleurs de votre marque ; voir la texture d’arrière-plan
• Illustrations et icônes : recolorez toute une série d’un coup en appliquant la carte à ses gris
• Étalonnage : réglez un calque de carte de dégradé sur Lumière douce ou Couleur avec une faible opacité pour un léger rendu pellicule par-dessus les couleurs d’origine
• Données et sciences : les cartes de chaleur et les images en fausses couleurs sont des cartes de dégradé de mesures
• Duotone et tritone : deux ou trois arrêts pour des traitements d’affiche affirmés ; voir l’effet duotone

Appliquer une carte de dégradé dans un éditeur d’images

1. 1

   Ajoutez un réglage de carte de dégradé

   Photoshop, Affinity Photo et GIMP en proposent tous un. Utilisez un calque de réglage quand c’est possible, pour laisser l’original intact.

2. 2

   Réglez d’abord les extrémités

   Placez à gauche une version quasi noire de votre couleur de marque la plus sombre, et à droite une teinte pâle. Vérifiez que l’image reste lisible.

3. 3

   Ajoutez des arrêts pour les tons moyens

   Placez votre couleur de marque principale vers 50 % et ajustez sa position jusqu’à ce que la peau, les ciels ou les objets clés paraissent justes.

4. 4

   Fondez-la avec l’original si besoin

   Pour un étalonnage plutôt qu’une recoloration complète, passez le mode de fusion du calque sur Lumière douce ou Couleur et baissez l’opacité.

5. 5

   Enregistrez la rampe

   Enregistrez le dégradé comme préréglage et utilisez-le sur chaque image de la série, pour qu’elles s’accordent toutes.

Une carte de dégradé en CSS

Les navigateurs peuvent appliquer une carte de dégradé grâce à un filtre SVG. feColorMatrix passe l’image en niveaux de gris, et feComponentTransfer la fait passer par une table de valeurs pour chaque canal. Chaque liste ci-dessous est la rampe Violet de marque : les valeurs de rouge, de vert et de bleu des cinq couleurs d’arrêt, divisées par 255, à des positions régulièrement espacées.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="brand-violet-map" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0      0      0      1 0"/>
    <feComponentTransfer>
      <!-- #120b1f  #3b1d6e  #7c3aed  #f0abfc  #fdf4ff -->
      <feFuncR type="table" tableValues="0.071 0.231 0.486 0.941 0.992"/>
      <feFuncG type="table" tableValues="0.043 0.114 0.227 0.671 0.957"/>
      <feFuncB type="table" tableValues="0.122 0.431 0.929 0.988 1"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="texture.jpg" alt="" style="filter: url(#brand-violet-map)">

Les cartes de dégradé sont le chemin qui mène de n’importe quelle image à une palette bien à vous. Si vous préférez partir de l’image, assortir une image en extrait la palette et les Marks les plus proches. Dans Gradiently, vous pouvez aussi teinter n’importe quelle photo dans le Studio aux couleurs du Mark que vous utilisez, en monochrome, en duotone ou en voile plus doux : c’est une carte de dégradé toute faite.