Dégradés granuleux : un peu de bruit donne de la valeur à la couleur

Un dégradé granuleux est un dégradé recouvert d’une fine couche de bruit aléatoire : la couleur a une texture visible au lieu d’une surface numérique parfaitement lisse. Il est devenu populaire pour une raison pratique et une raison visuelle : le grain masque les rayures que les mélanges lisses montrent souvent, et il fait ressembler la couleur d’un écran à quelque chose d’imprimé, de filmé ou de peint. Bien fait, la plupart des gens ne remarquent même pas le grain. Ils pensent simplement que la couleur est plus belle.

Pourquoi le grain embellit un dégradé

Il y a trois raisons, et elles se cumulent.

• Il masque le banding. La plupart des images portent 256 nuances par canal de couleur. Un mélange doux sur une grande surface doit passer de l’une à l’autre, et l’œil repère les paliers sous forme de rayures. Un bruit aléatoire disperse les pixels sur les nuances voisines : les limites entre paliers disparaissent. C’est la même idée que le tramage. Voir le banding des dégradés.
• Il ajoute du tactile. Les objets physiques ne sont jamais parfaitement lisses. La pellicule a du grain, le papier a du relief et l’encre imprimée se dépose de façon irrégulière. Un peu de bruit emprunte ces associations : un mélange numérique plat commence à évoquer une matière.
• Il résiste mieux à la compression. Les plateformes sociales et les messageries recompressent les images. Les mélanges lisses sont exactement ce qu’une forte compression aplatit en blocs, et un grain fin donne à l’encodeur du détail auquel s’accrocher. Testez tout de même votre export : une compression très forte peut aussi étaler le grain.

Quelle dose de grain ajouter

L’erreur la plus courante est d’en mettre trop. Un grain fort ressemble à un objectif sale ou à une photo de téléphone prise en faible lumière. La bonne dose dépend de la taille de la zone calme, de la profondeur du dégradé et de l’endroit où il sera vu. Prenez les valeurs ci-dessous comme points de départ pour une couche de bruit en mode de fusion Incrustation ou Lumière douce, puis jugez à l’œil en pleine taille.

Où placer le grain

Le grain n’a pas besoin d’être uniforme. Il paraît le plus naturel sur de grandes zones calmes de couleur et sur les tons sombres, là où le grain de pellicule est le plus visible dans la vie réelle. Gardez-le plus léger derrière le petit texte, car le bruit au bord des lettres les rend floues. Et gardez votre logo et votre texte au-dessus de la couche de grain, pas dessous, pour qu’ils restent nets.

Ajouter du grain à un dégradé en CSS

La méthode la plus légère est un filtre de bruit SVG utilisé comme image d’arrière-plan. feTurbulence génère un bruit aléatoire, feColorMatrix en retire la couleur pour qu’il ne crée pas de mouchetures, et un mode de fusion le mélange au dégradé dessous. Des valeurs de baseFrequency plus élevées donnent un grain plus fin ; stitchTiles fait répéter la tuile sans raccord visible.

.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}

Si vous préférez une image, une petite image de bruit répétable enregistrée en PNG fonctionne comme le SVG. Gardez-la sans perte : les tuiles de bruit en JPEG prennent des artefacts de compression. Pour d’autres motifs et astuces de texture sans images, voir la texture de bruit en CSS.

Ajouter du grain dans les outils de design

1. 1

   Construisez d’abord le dégradé

   Soignez les couleurs, les arrêts et la composition sur un calque propre. Le grain ne sauve pas un mélange boueux ; voir les dégradés boueux.

2. 2

   Ajoutez un calque de bruit séparé

   Utilisez l’effet de bruit de l’outil ou une texture de bruit sur son propre calque au-dessus du dégradé, pour pouvoir l’ajuster sans toucher à la couleur.

3. 3

   Rendez-le monochrome

   Désaturez le bruit pour qu’il n’ajoute pas de mouchetures colorées, puis réglez le calque sur Incrustation ou Lumière douce.

4. 4

   Baissez l’opacité jusqu’à ce qu’il disparaisse, puis remontez un peu

   La bonne dose se situe en général juste au-dessus du point où vous cessez de le remarquer.

5. 5

   Exportez à la taille finale, sans perte si possible

   Agrandir une image granuleuse transforme le grain en taches. Exportez en PNG à la taille exacte, ou en JPEG de haute qualité pour les photos.

Le grain à l’impression

Un grain conçu pour un écran de téléphone peut se comporter autrement sur papier. À 300 dpi, un bruit très fin peut disparaître complètement, et un bruit grossier peut ressembler à un défaut d’impression. Pour les affiches et les flyers, créez le grain à la résolution d’impression et testez-le sur le vrai papier. Imprimer des dégradés couvre le reste du processus.

Le grain est aussi l’une des nombreuses matières. Le papier, le verre et la soie changent chacun ce que dit un dégradé ; la texture de dégradé les compare. Chaque Mark porte son propre réglage de grain à côté de ses couleurs et de ses matières : l’équilibre est donc déjà réglé quand vous commencez à créer.