Tuto : Créer une texture bruit transparente sur Photoshop

Parmi les nombreuses textures utilisées en web design, le bruit (noize) reste parmi les plus populaires. Nous allons voir aujourd’hui comment créer une texture bruit transparente sur Photoshop. L’idée est de pouvoir la superposer à n’importe quelle couleur dans nos pages web grâce à la puissance des css…

Il n’est pas compliqué de créer des motifs transparents pour les utiliser dans nos sites web. Tant que le motif se superpose à la grille de pixels, nous pouvons le découper sans problème. Il en existe d’ailleurs de nombreux sets à télécharger sur le web mais, malgré mes recherches, je n’ai pas trouvé de texture bruit transparente.

La structure du bruit est en effet bien plus complèxe que celle des motifs géométriques (lignes, points, carrés etc.). Pour obtenir un bruit transparent il faut réussir à isoler le motif de la couleur de fond. Cependant, l’effet granuleux de ce type de texture n’est pas régulier et, si l’on y regarde de plus près, il présente même différents niveaux de transparence.

Grace aux possibilités offerte par Photoshop, j’ai finalement trouvé un moyen de parvenir au résultat escompté et je voulais partager ma méthode avec vous dans cet article.

Vous pouvez télécharger les fichiers dès maintenant :

Télécharger : texture bruit transparente

Ce tutoriel est divisé en 2 parties : nous verrons premièrement comment créer la texture avec Photoshop puis dans un second temps, comment l’utiliser concrètement sur un élément d’une page web.

La création d’un motif « bruit » transparent sur photoshop

Nous allons créer un nouveau document dans Photoshop : 150px x 150px / 72ppi / arrière-plan : blanc.

Tutoriel web design : créer un motif de bruit - etape1

Premièrement nous allons déverrouiller le calque de fond et le renommer : « Noize ».

Tutoriel web design : créer un motif de bruit - etape2

Nous allons ensuite convertir ce calque pour qu’il supporte des filtres dynamiques (Nous pourrons ainsi utiliser les filtres de façon non destructive et revenir sur leurs réglages si besoin). Pour cela, faites : Filtre > convertir pour les filtres dynamiques.

Note : Cette étape est facultative. Pour les versions de Photoshop ne supportant pas cette option, vous pouvez passer à l’étape suivante.

Tutoriel web design : créer un motif de bruit - etape3

On ajoute ensuite le bruit sur notre objet dynamique (ou sur un calque classique pour les anciennes versions de Photoshop) en faisant : Filtre > Bruit > Ajout de Bruit.

Tutoriel web design : créer un motif de bruit - etape4

Voici les réglages que j’ai utilisé : quantité 10% / répartition uniforme / Monochromatique.

Tutoriel web design : créer un motif de bruit - etape5

Nous allons maintenant créer un nouveau calque vide au dessus du précédent et le renommer : « Noize png ».

Tutoriel web design : créer un motif de bruit - etape6

Nous allons ensuite chercher à dissocier la texture de la couleur de fond afin de pouvoir réutiliser le bruit sur n’importe quelle couleur. Il y a plusieurs possibilités pour effectuer ce type d’opération. Je vous propose d’utiliser la selection par plage de couleurs en faisant ceci : Sélection > Plage de couleurs. Ce type de sélection nous permet de conserver les différents niveaux de transparence de notre texture initiale.

Tutoriel web design : créer un motif de bruit - etape7

Le curseur s’est transformé en pipette. Nous allons sélectionner un pixel dans les tons foncés en cliquant dessus. Sélectionnez les paramètres suivants : Décochez « Clusters de couleurs localisées » / Tolérence 20. Cliquez sur « OK » pour valider.

Note : la tolérence est un paramètre à ajuster en fonction du résultat souhaité. Plus la valeur de la tolérence est élevée, plus la texture est dense.

Tutoriel web design : créer un motif de bruit - etape8

Notre sélection est faite, nous allons maintenant la remplir. Pour cela faites : Edition > Remplir (vérifiez de bien être positionné sur le calque vide « Noize png »)

Tutoriel web design : créer un motif de bruit - etape9

Pour le remplissage nous utiliserons une couleur foncée si la texture est appliquée sur un fond clair, et inversement. Pour cet exemple, nous opterons pour du noir (100% d’opacité et décochez « conserver les zones transparentes »). Cliquez sur « OK » pour valider le remplissage du claque Noize png.

Tutoriel web design : créer un motif de bruit - etape10

Notre motif est créé mais son contraste trop élevé le rend difficilement utilisable en l’état.

Tutoriel web design : créer un motif de bruit - etape11

Nous allons donc simplement réduire l’opacité du calque « Noize png » à 5% et rendre invisible le calque d’arrière plan (qui nous a simplement servi à créer notre sélection).

Note : l’opacité du bruit est un paramètre à ajuster en fonction de votre utilisation.

Tutoriel web design : créer un motif de bruit - etape12

Pour pouvoir visualiser le rendu de notre texture nous allons créer un nouveau calque juste en dessous du calque « Noize png », et nous allons le remplir avec une couleur au choix. Pour notre exemple j’ai utilisé la couleur beige #cccc99.

Tutoriel web design : créer un motif de bruit - etape13

Avant d’enregistrer n’oubliez pas de rendre invisible le calque d’arrière plan (objet dynamique) et le calque de couleur que nous venons de créer. Seul le calque à 5% d’opacité doit rester visible.

Tutoriel web design : créer un motif de bruit - etape13

Nous allons maintenant enregistrer notre texture en faisant : Fichier > Enregistrer pour le web et les périphériques.

Note : A ce stade, nous pouvons également enregistrer la texture sous forme de « motif » Photoshop (Edition > Utiliser comme motif).

Tutoriel web design : créer un motif de bruit - etape14

Pour conserver la transparence nous utiliserons le format png24.

Tutoriel web design : créer un motif de bruit - etape15

Et voilà c’est terminé, nous venons de créer une texture bruit sur fond transparent. Nous allons maintenant voir comment l’utiliser concrètement dans une page web.

Application de la texture avec les css

Grace à la transparence du format png nous allons pouvoir superposer notre motif à une couleur.

Exemple : un paragraphe de fond beige (background-color:#cccc99) sur lequel viendra s’ajouter le bruit.

le code HTML :

Pour appliquer facilement notre texture nous allons créer une classe css : .noize.

<p class="noize"> Ceci est un paragraphe d'exemple avec une texture bruit </p>

Le code css associé

Nous allons appliquer notre texture avec la propriété background-image.

Note : L’image de fond va se répéter par défaut, inutile d’ajouter : background-repeat:repeat à notre texture.


.noize{background-image: url(noize.png);}

Le résultat de notre exemple :

Ceci est un paragraphe d’exemple avec texture bruit

Téléchargez les fichiers du tutoriel :

Télécharger : texture bruit transparente

Conclusion

Cette méthode permet d’utiliser cette texture « bruit » de façon plus flexible. Plus besoin de repasser par Photoshop (ou autre) pour changer de couleur de fond. Notons qu’il est aussi possible de l’employer avec un fond en dégradé pour les navigateurs supportant les multiple-background. Couplé avec un sélecteur de couleurs dans une interface d’administration, cette technique permet à l’utilisateur de changer la couleur de certains éléments tout en conservant la texture des éléments.

Une petite remarque au niveau du format .png qui peut poser un problème avec certains navigateurs qui gèrent difficilement (voir pas du tout) la transparence. Dans ce cas nous pourrions par exemple utiliser des commentaires conditionnels pour servir une texture format « .gif » beaucoup moins détaillée ou bien nous en passer tout simplement. Répétons-le, inutile d’avoir un rendu strictement identique sur tous les navigateurs, l’essentiel étant de conserver l’accessibilité du contenu de nos sites web.

5 réflexions au sujet de « Tuto : Créer une texture bruit transparente sur Photoshop »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

CommentLuv badge