Parmi les nombreuses textures utilisées en web design, le bruit (noise) 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 aux 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.

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

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.

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.

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

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

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 sélection 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.

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.

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 »)

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.

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

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.

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.

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.

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).

Pour conserver la transparence nous utiliserons le format png24.

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.

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

 

Le résultat de notre exemple 

Ceci est un paragraphe d’exemple avec texture bruit

 

> 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.