# Texture de grain : ajouter un grain argentique aux designs numériques [Canonical HTML page](https://gradiently.design/fr/guide/textured-background) Un peu de grain est le moyen le plus rapide de donner à un design numérique l’air d’un objet fabriqué. Trop, et on dirait un écran cassé. Voici comment juger la quantité, la taille et la couleur du grain. ## The short version - La texture de grain est un fin moucheté aléatoire posé sur un design pour que la couleur numérique plate se lise comme du film, du papier ou de l’impression. - Le grain aide de trois façons : il masque les bandes dans les fondus lisses, il relie photos et graphismes plats, et il donne aux formes nettes une surface physique. - Pour la plupart des designs à l’écran, le grain doit être tout juste visible en taille réelle et invisible à bout de bras ; si on le remarque en premier, il y en a trop. - Le grain monochrome est le choix sûr par défaut ; le grain coloré ressemble davantage à un vrai film mais peut décaler une palette. - Une forte compression JPEG lisse le grain, alors exportez les images granuleuses en PNG ou en JPEG haute qualité et donnez aux vidéos granuleuses un débit généreux. 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é](https://gradiently.design/fr/guide/gradient-banding) 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](https://gradiently.design/fr/guide/background-texture). Un post de torréfacteur avec un fond chaud et texturé et un court titre Un fond chaud et doucement texturé se lit comme un objet artisanal, ce qui convient à un produit fait à la main. Un post montrant un grand chiffre sur un fond coloré doucement granuleux La même impression porte un simple fait. Le grain empêche un grand chiffre de ressembler à un tableur. ## 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. | Usage | Quantité | Taille du grain | Pourquoi | | --- | --- | --- | --- | | Fond de site web | Très léger, 3 à 6 % d’opacité | Fin | Les grandes surfaces et une longue lecture rendent le grain évident | | Post sur les réseaux sociaux | Léger, 6 à 12 % | Fin à moyen | Survit à la recompression et aux écrans de téléphone | | Affiche ou flyer | Moyen, 10 à 18 % | Moyen | Vu de loin, le grain se lit comme de l’impression | | Style rétro ou argentique | Fort, 18 à 30 % | Moyen à grossier | Le grain fait partie du style | | Boucle vidéo | Léger, animé | Fin | Un grain fixe sur une vidéo en mouvement ressemble à de la saleté sur l’objectif | Points de départ, exprimés en opacité d’une couche de bruit en mode Incrustation ou Lumière tamisée. Ajustez à l’œil ; les écrans et les couleurs varient. > **Les designs sombres en demandent moins** Le grain se voit davantage sur les tons sombres et moyens que sur les quasi-blancs. Sur un fond sombre, commencez à la moitié de la quantité que vous mettriez sur un fond clair. ## 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. ### Grain monochrome - Garde votre palette exactement telle que choisie - Se lit comme de l’impression, du papier ou de la risographie - Sans risque pour les couleurs de marque et les logos - Le bon choix par défaut pour la plupart des travaux ### Grain coloré - Ressemble à un film argentique - Donne de la vie aux photos et aux carnations - Peut légèrement décaler une couleur de marque plate - Idéal pour les styles photographiques et nostalgiques 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. **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. **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. **Baissez l’opacité** Ramenez-la au dosage du tableau ci-dessus. Vérifiez à 100 % de zoom, puis sur votre téléphone. 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. **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](https://gradiently.design/fr/guide/grainy-gradients) donnent les réglages, et [les dégradés à bruit](https://gradiently.design/fr/guide/noise-background) 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. ```html ``` Une couche de grain fixe sur toute une page. Augmentez `baseFrequency` pour un grain plus fin, baissez-le pour un grain plus grossier. Retirez la matrice de couleur pour un bruit coloré. 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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](https://gradiently.design/fr/guide/seamless-loop-video) 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é. ## FAQ ### Qu’est-ce que la texture de grain en design ? Un fin moucheté aléatoire de clair et de sombre posé sur un design pour que la couleur numérique plate ressemble à du film, du papier ou de l’impression. ### Quelle quantité de grain ajouter à une image ? Assez pour le voir à 100 % de zoom et pas à bout de bras. Pour les posts, une couche de bruit à environ 6 à 12 % d’opacité en Incrustation est un bon début. ### Le grain corrige-t-il les bandes de dégradé ? En général, oui. Un bruit aléatoire casse les bords nets entre les bandes pour que l’œil lise un fondu lisse. ### Pourquoi mon grain disparaît-il après la publication ? Les plateformes recompressent les images et traitent le grain fin comme un détail à supprimer. Mettez un peu plus de grain, exportez en PNG ou en JPEG haute qualité, et publiez à la taille exacte de la plateforme. ### Le grain argentique doit-il être coloré ou noir et blanc ? Le grain monochrome garde les couleurs de marque exactes et convient à la plupart des travaux. Le grain coloré ressemble davantage à un film argentique et convient aux styles photographiques.