Superposition de dégradé : teinter une photo sans la masquer

Une superposition de dégradé est une couche de couleur qui s’estompe sur une photo, posée par-dessus pour la teinter, unifier une série d’images ou rendre un titre lisible. L’astuce, c’est le fondu : une partie de la photo est fortement touchée, le reste à peine. C’est pourquoi une superposition en dégradé paraît réfléchie là où un aplat noir à 50 % ressemble à un rafistolage. Vous choisissez où tombe la couleur, jusqu’où elle monte en intensité et comment elle se mélange à l’image en dessous.

Quatre types de superposition de dégradé

Presque toutes les superpositions que vous voyez sur un site web, une affiche ou une publication relèvent de l’un de ces quatre types. Savoir lequel il vous faut évite beaucoup de tâtonnements avec les curseurs d’opacité.

Le voile dégradé : une superposition pour le texte

Le voile dégradé est le cheval de trait. Il commence totalement transparent et s’assombrit vers le bord où se trouvent vos mots, en général en bas ou à gauche. La photo reste intacte là où est le sujet, et le texte obtient un socle sombre et calme. Utilisez un ton sombre tiré de la photo elle-même plutôt que du noir pur : un brun profond sur un intérieur chaleureux, un marine sur une marine. Le noir pur ressemble à une tache.

Les 40 % supérieurs du voile du bas sont entièrement transparents, ce qui garde les visages et les produits lumineux. L’obscurité monte dans la moitié inférieure et culmine tout au bord, exactement là où se trouve une légende. Pour d’autres façons de garder des mots lisibles sur des images, lisez du texte lisible sur des photos.

Voiles colorés et modes de fusion

Le voile coloré est la façon dont les marques font ressembler à une même famille des photos de banque d’images, des clichés de téléphone et des photos d’événements. Posez un dégradé de deux couleurs de marque sur la photo et changez son mode de fusion. Le mode de fusion décide comment la couleur se mélange à l’image, et il compte plus que les couleurs.

Comment ajouter une superposition de dégradé à une photo

1. 1

   Décidez à quoi sert la superposition

   Texte, ambiance ou cohérence. Un voile dégradé pour le texte, un voile coloré pour l’ambiance et la cohérence. Si vous ne savez pas lequel, vous n’en avez probablement pas besoin.

2. 2

   Prélevez un ton sombre dans la photo

   Choisissez la couleur la plus profonde déjà présente dans l’image pour un voile dégradé, ou deux couleurs de marque pour un voile coloré.

3. 3

   Tracez le dégradé sur la zone qui en a besoin

   Commencez transparent sur le sujet et montez vers le bord où sont les mots. Gardez un long fondu pour qu’aucune ligne ne soit visible.

4. 4

   Choisissez un mode de fusion

   Normal pour les voiles dégradés, produit pour les photos claires, superposition pour les sombres, couleur pour une teinte unique.

5. 5

   Baissez l’opacité jusqu’à ce qu’elle disparaisse presque

   Puis remontez d’un cran. Les meilleures superpositions ne se remarquent que lorsqu’on les désactive.

6. 6

   Vérifiez le texte à la taille d’un téléphone

   Réduisez la création à sa taille d’affichage réelle et lisez chaque mot. Un contraste qui fonctionne sur un écran d’ordinateur peut échouer sur un téléphone ; le contraste des couleurs donne les seuils à viser.

Quelle intensité pour une superposition de dégradé

En pratique, si le bord le plus sombre d’un voile dégradé doit dépasser environ 80 % pour que le texte se lise, la photo est trop chargée à cet endroit. Déplacez les mots, recadrez autrement ou choisissez une image plus calme. Un voile coloré sur toute l’image demande bien moins, sinon la photo cesse de ressembler à une photo.

Les superpositions de dégradé sur un site web

Sur le web, vous pouvez empiler la superposition et la photo dans une seule déclaration, ce qui les garde ensemble quand l’image change. La superposition vient en premier, car le CSS peint la première couche au-dessus. L’ensemble des techniques, modes de fusion et pseudo-éléments compris, se trouve dans les superpositions de dégradé en CSS.

.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

Un voile fidèle à votre marque à chaque fois

Les superpositions dérivent quand chaque designer choisit ses propres couleurs. Dans le Studio Gradiently, les photos peuvent être teintées aux couleurs de votre Mark en mono, en duotone ou en voile, si bien que des images de sources différentes partagent une même palette sans ajustement à la main. Et quand les mots reposent sur un Mark plutôt que sur une photo, il apaise de lui-même la zone derrière eux, sans aucune superposition. Lisez des photos en duotone aux couleurs de votre Mark pour comprendre le fonctionnement du voile.