Texture de grain : ajouter un grain argentique aux designs numériques

La texture de grain est une fine couche de bruit aléatoire placée sur un design pour qu’une couleur numérique parfaitement plate ait l’air imprimée, photographiée sur pellicule ou pressée dans du papier. Elle est subtile par nature : au bon dosage, personne ne la nomme, on sent simplement que l’image a une surface. Bien la régler tient à quatre paramètres : quantité, taille, couleur et mode de fusion.

Pourquoi le grain embellit les designs numériques

Les écrans peuvent afficher des couleurs qu’aucun matériau physique ne peut produire : parfaitement uniformes, parfaitement propres. C’est cette propreté qui donne à beaucoup de designs numériques un air bon marché ou inachevé. Le grain rend un peu de l’irrégularité de toute vraie surface. Il remplit aussi trois rôles pratiques.

• Il masque les bandes. Les fondus lisses se découpent en bandes visibles sur les écrans 8 bits. Un bruit aléatoire casse ces bords pour que l’œil lise un fondu continu. Les bandes de dégradé en expliquent la cause.
• Il unifie des éléments disparates. Une photo a un grain naturel, une forme plate n’en a aucun. Une seule couche de grain sur les deux donne l’impression qu’ils appartiennent à la même image.
• Il ajoute une surface. Une couleur plate se lit comme un écran ; une couleur avec du grain se lit comme une matière. C’est pourquoi le grain est au cœur de la plupart des choix de texture de fond.

Quelle quantité de grain ajouter

Le vrai test, c’est la distance. Regardez le design à 100 % : vous devez tout juste voir le grain. Puis regardez-le sur votre téléphone tenu à bout de bras : vous ne devez plus le voir. Si le grain est la première chose qu’on remarque, divisez-le par deux. Chaque usage demande un dosage différent.

Grain monochrome ou coloré

Le vrai grain de film est coloré : de minuscules points rouges, verts et bleus qui changent d’une image à l’autre. Le grain numérique monochrome n’est que clair et sombre. Les deux ont leur place.

La taille du grain compte autant que sa couleur. Un grain fin paraît haut de gamme et moderne. Un grain grossier paraît artisanal, brut et bruyant. Adaptez le grain au support : un post de 1080×1350 demande un grain plus fin qu’une affiche A3 en 3508×4961, car l’affiche se regarde de plus loin.

Ajouter une texture de grain dans n’importe quel outil de design

1. 1

   Créez une couche de bruit

   Remplissez un nouveau calque de gris moyen (#808080) et ajoutez du bruit. Dans la plupart des éditeurs, c’est un filtre appelé Ajout de bruit, Bruit ou Grain. Choisissez gaussien et monochromatique pour un départ propre.

2. 2

   Réglez le mode de fusion

   Passez le calque en Incrustation ou Lumière tamisée. Le gris disparaît et seul le moucheté reste, éclaircissant et assombrissant les couleurs en dessous.

3. 3

   Baissez l’opacité

   Ramenez-la au dosage du tableau ci-dessus. Vérifiez à 100 % de zoom, puis sur votre téléphone.

4. 4

   Gardez-le au-dessus

   Le grain se place au-dessus du fond et des photos. Laissez le petit texte et les logos au-dessus du grain si vous les voulez nets, ou en dessous pour un rendu imprimé.

5. 5

   Exportez avec soin

   Exportez en PNG ou en JPEG haute qualité. Une forte compression étale le grain en taches, ce qui est pire que pas de grain du tout.

Si vous ajoutez du grain à un fondu de couleurs en particulier, les dégradés granuleux donnent les réglages, et les dégradés à bruit proposent des recettes toutes prêtes.

La texture de grain sur le web

Sur un site web, pas besoin de fichier image pour le grain. Un SVG intégré avec le filtre feTurbulence dessine le bruit dans le navigateur à toute taille, il reste donc net sur chaque écran et ne pèse presque rien.

<svg class="grain" aria-hidden="true">
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>

<style>
  .grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.06;
  }
</style>

Gardez une opacité faible : une page entière de grain, c’est une grande surface, et 6 % suffisent souvent. La référence MDN de feTurbulence liste tous les réglages.

Le grain en vidéo et en animation

Sur des images en mouvement, le grain doit bouger aussi. Une seule couche de grain fixe sur une vidéo ressemble à un objectif sale. Utilisez un grain animé qui change à chaque image, gardez-le fin, et exportez avec un débit généreux, car la compression vidéo traite le grain comme un détail à jeter. Pour les boucles, lisez la vidéo en boucle parfaite avant d’ajouter de la texture.

Gradiently intègre le grain à chaque Mark dans sa recette, avec la couleur, la matière, la lumière et le mouvement, si bien que la texture est rendue à neuf à chaque taille de design au lieu d’être étirée depuis une seule image. Si vous voulez un fond qui a déjà sa surface, parcourez le Marché et créez avec n’importe quel Mark non réservé.