Création et application de textures naturelles
Les textures rendent un site Web tangible.
Ils donnent au contenu une relation avec le monde physique, un sentiment d'appartenance et une réalité à laquelle les gens peuvent s'identifier.
Malheureusement, simuler des textures physiques n'est pas aussi simple que de photographier ou d'exécuter quelques filtres Photoshop.
On doit mélanger le bruit aléatoire et les motifs reconnaissables, en cherchant des similitudes plutôt que des répétitions pures.
Nous discuterons ici de ce qui donne aux textures une qualité organique et nous examinerons des techniques pour créer et appliquer des textures d'aspect naturel et des tuiles sans soudure.
Sens du toucher via la vue
Une "texture" est la surface d'une substance physique ou d'un objet. Comme la vue, notre sens du toucher nous aide à comprendre les objets. Rugueuse, lisse, lisse et friable sont des textures et disent à quelqu'un de quoi un objet est fait, où il a été et s'il est lié à autre chose.
Sur le Web, le sens du toucher d'une personne est limité à son périphérique de saisie. Mais tous les sites Web ne doivent pas "ressentir" la même chose. En se basant sur leur expérience de la manipulation d'objets courants, les gens associent certaines apparences à certaines textures. En art numérique, on pourrait dire que la texture est ce que quelque chose «sent» à ses yeux.
Alors que les éditeurs d'images modernes facilitent la création de textures, toutes les textures ne sont pas des gagnants infaillibles. Créer une texture d'apparence naturelle est une tâche délicate qui mêle motif, chaos et usage pour créer du caractère.
Les textures naturelles ont une mesure du hasard
De nombreuses textures se situent entre deux extrêmes: les motifs réguliers et le bruit aléatoire. Les textures basées sur des motifs ne s'excusent pas pour leur apparence artificielle. Ils peuvent être composés d'un symbole ou d'un texte connu, et ils ont toujours un arrangement prévisible.
Ci-dessus, des échantillons de motifs en mosaïque.
À l'autre extrême, les textures basées sur le bruit incorporent une statique aléatoire. Ils sont faciles à créer. Photoshop a son propre filtre "Ajouter du bruit", et il est facile à afficher car ils ne comportent pas de caractéristiques bizarres lorsqu’ils sont coupés.
Ci-dessus, des échantillons de textures bruyantes.
Les textures d'aspect naturel se situent quelque part entre les motifs réguliers et le bruit aléatoire.
Au-dessus, une gamme de textures mélangent les motifs et le bruit à des degrés divers.
Bien que rien ne soit faux avec les deux extrêmes, beaucoup de bonnes textures ont les deux caractéristiques. Dans les textures naturelles, les joints sont absents ou difficiles à repérer, et nous ne pouvons identifier aucun motif dans les carreaux répétés. Leur apparence est aussi distincte et efficace que tout modèle régulier, mais moins flagrante.
Les textures "organiques" ont la bonne combinaison de bruit et de motif.
Chaos rationnel, bruit ordonné
Dans le contexte de la texture, le "bruit" fait référence aux variations irrégulières d'un groupe de pixels. Le grain du film, les artefacts de faible luminosité et le tramage sont trois types de bruit courants qui, souhaitables ou non, se retrouvent souvent dans les images complexes.
Le bruit de la texture est ce qui rend les surfaces naturelles naturelles. Mais ce n'est pas simplement statique. Au contraire, le bruit de texture équilibre le chaos et l'ordre.
Au-dessus, une seule forme géométrique répétée plusieurs fois crée un motif. A gauche, la forme ne varie que dans le placement: les lignes ne sont pas tout à fait égales.
Les autres images montrent les changements d’angle, de densité et de taille de la forme. Les textures créées à partir de ces variations de forme sembleraient plus chaotiques, mais toutes les textures conserveraient le caractère unique de l'original, car les variations sont basées sur la même forme de base.
Bien sûr, le résultat est toujours artificiel. Les répétitions évidentes dans les textures basées sur le bruit gâchent l'effet parce que les gens sont très bons pour reconnaître les motifs. Les textures dans le monde réel ont des formes, des couleurs et des profondeurs variables.
Au-dessus, les textures du monde réel montrent à la fois du bruit et de la répétition. La toile de jute, le granit rose et le papier ciré ont leurs propres motifs "irréguliers réguliers", mais chacun reste distinct des autres.
- Avec ses lignes horizontales et verticales prévisibles, la toile de jute est la plus régulière. Mais les lignes ne sont pas parfaites. De légères variations de ton et de direction empêchent le motif de paraître artificiel.
- Les marques de poche dans le granit ne sont pas réparties de manière uniforme. Voir les inégalités de près est difficile. La caractéristique devient plus apparente quand on la voit sur une grande surface.
- Le papier ciré présente à la fois le moins de contraste et la moindre personnalité. Quelques touffes de nuances sombres l'empêchent d'être un bruit aléatoire.
Chaque texture a certaines caractéristiques - marques de couture, stries, taches ou rigoles - qui la rendent unique. Les variations de ces caractéristiques le font fonctionner.
Au-dessus, une texture métallique incorpore des formes à bords irréguliers qui se chevauchent sans ordre particulier, mais elle conserve son caractère distinct. (Courtoisie de la texture Le Design Mag .)
Gamme de profondeur et de contraste des murmures aux cris
Une variable clé de toute texture naturelle est la profondeur. La "bosselure" d'une texture procure un sentiment de tactilité plus que la couleur ou la taille. Mais la profondeur ajoute aussi du contraste, ce qui attire l’attention et risque de dégrader la lisibilité.
Une texture hurlante en arrière-plan augmentera le volume du contenu lui-même. A quel point est-ce trop fort? Cela dépend de la force du contenu et de la disposition du public.
Si une texture forte correspond au sujet, elle contribue à l'ambiance. Mais si cela interfère avec la lisibilité, alors vous avez un problème.
Lequel des écrits ci-dessus est le plus facile à lire? Quelle texture reflète le mieux le message dans l'écriture? Il peut y avoir plus d'une bonne réponse, mais il n'y a qu'une seule ligne directrice: lorsque vous mélangez des textures et du contenu, en particulier du contenu textuel, assurez-vous que les bords du contenu restent visibles.
En parlant de bords, pour plus de réalisme, faites attention à la fin de la texture. Les textures fines ou granuleuses, par exemple, ne doivent pas nécessairement se terminer dans une ligne parfaite. Au lieu de cela, laissez-les suinter ou s'effondrer dans la surface suivante. L'astuce consiste à considérer tout sur la page comme une surface avec une texture, même si c'est une couleur unie.
Des textures apparentes avec des sources lumineuses
Toutes les textures n'ont pas besoin de fissures profondes pour être tangibles. Considérez la peinture brillante. Sans crêtes ni bosses, sa sensation d'émail lisse vient de son éclat.
Les textures ci-dessus montrent que la surface d'un objet ne doit pas nécessairement être rugueuse. Ils peuvent ne pas fonctionner comme des tuiles répétitives, mais l'éclat, la réflexion et la translucidité fournissent des indices visuels sur ce à quoi un objet peut ressembler dans le monde réel.
Le sweet spot entre le caractère et la taille du fichier
Un problème commun à toute texture naturelle est de savoir comment le répéter. Lorsque les gens repèrent la répétition, toute illusion de réalité est détruite. La solution la plus simple consiste à utiliser des tuiles plus grandes et donc moins nombreuses. Avec plus de variation, la répétition de repérage devient plus difficile.
Comme indiqué ci-dessus, plus les carreaux sont larges, plus il y a de chances que les personnes repèrent. Malheureusement, les tuiles plus larges permettent également de créer des fichiers plus volumineux, ce qui ralentit le chargement des pages. Pour beaucoup de gens, un panneau de chargement en vol stationnaire tue l’humeur autant qu’un bord.
Une autre solution consiste à réduire les formes de la tuile individuelle.
Comme nous le voyons, la répétition de textures plus fines a moins de chances d'être repérée. Mais plus la texture est fine, moins vous pouvez lui donner de caractère. La texture la plus fine serait un bruit pur, mais cela ne vous aide pas. Les textures naturelles évoquent toujours une surface connue.
En résumé, les textures naturelles devraient:
- Avoir assez de personnalité pour qu'ils ne soient pas uniquement du bruit aléatoire. Cela signifie que les formes ou "groupes" de pixels doivent être similaires mais pas identiques.
- Avoir assez de personnalité pour qu'une scène ou une ambiance soit établie, mais pas trop pour que les utilisateurs soient distraits du contenu. Cela signifie qu’aucune "agglomération" distincte ou d’autres caractéristiques ne devraient apparaître lorsque l’on les voit de loin.
- Soyez assez aléatoire pour éviter les répétitions. Les caractéristiques de la texture ne doivent pas former un motif que les gens pourraient repérer sans se focaliser.
Comment faisons-nous tout cela?
Création de textures dans Photoshop
De nombreux programmes permettent aux concepteurs de créer leurs propres textures naturelles. Et le Web ne manque pas de textures téléchargeables. La création de votre propre texture peut être une expérience enrichissante, sans violation des droits d'auteur, qui contribue à un design vraiment unique.
1. Créez un nouveau document Photoshop avec un arrière-plan blanc. Pour cet exemple, nous allons faire 600 x 300 pixels.
2. Remplissez le fond avec du noir.
3. Dessinez des traits blancs aléatoires pointés dans la même direction générale. Dans cet exemple, nous utilisons un simple pinceau à bords droits. Différentes pointes de brosse créeront des résultats différents. 
4. Utilisez l’outil de maculage pour salir les contours de façon aléatoire. Une pointe à bord flou (avec une dureté inférieure à 30) fonctionne mieux. Quelle que soit la distorsion de la texture, les meilleurs résultats auront plusieurs nuances de gris. 
5. Accédez à Filtrer> Bruit> Ajouter du bruit et ajoutez du statique en fonction de vos goûts. Puis filtrez> Autre> High Pass . Ensemble, ils ajoutent plus de tons de gris (vital pour l'étape 6) et un peu de grain. 
6. Créez un calque de dégradé. Cette couche spéciale applique la couleur aux couches sous-jacentes en fonction de leur tonalité. Contrairement aux dégradés normaux, dont la couleur en pixels est fonction de l'emplacement, le dégradé mappe les couleurs dans les zones claires, les tons moyens et les ombres. Utilisez des couleurs peu saturées, en particulier le vert, le marron et le bleu, pour simuler les couleurs de la nature. 
Ci-dessus, le résultat de l'application d'une carte de dégradé marron et jaune.
7. Recadrer une partie intéressante de la texture. Essayez de ne pas utiliser plus de la moitié de l'image entière. Nous utiliserons le reste sous peu. 
8. Important: Enregistrez la tuile recadrée dans un fichier séparé. Vous aurez besoin du fichier original plus tard.
Les détails présentés ici sont volontairement volumineux pour démontrer la technique, mais le résultat n'est pas mauvais pour une texture. Voici comment fonctionne le processus en général:
- Toute taille que vous estimez appropriée fera l'affaire. Les tuiles plus grandes auront des traits plus réalistes, mais leur taille sera plus grande. Commencez toujours beaucoup plus que nécessaire, car les bords d'une texture créée à partir de rien correspondent rarement aux bords du canevas.
- Créez une série de marques avec le ou les mêmes outils. L'essence d'une texture est établie en choisissant une ou deux techniques similaires et en les utilisant plusieurs fois.
- Ajoutez un peu de chaos avec les filtres Photoshop.
- Ajouter de la couleur: dégradé des cartes pour accentuer la profondeur et des taches de couleur aléatoire pour les éclaboussures. Utilisez des couleurs peu saturées, en particulier le vert, le marron et le bleu, pour simuler les couleurs de la nature.
Faire des carreaux sans soudure
D'un aspect naturel ou non, la plupart des textures et des motifs doivent être sans couture. C'est-à-dire que les visiteurs ne devraient pas pouvoir voir les bords de la tuile répétitive. Comment faisons-nous cela? La tuile elle-même fournit la solution.
9. Ci-dessus, l'image est divisée le long des lignes bleues et rouges. Étant donné que les pixels de la séparation correspondent déjà, les déplacer d'un côté ou de l'autre garantit que les bords gauche et droit correspondent. Bien sûr, le problème existe toujours, mais il est plus facile à résoudre.
10. Ce carreau carré provient d'une image plus grande. Au-dessus, la partition de la tuile est remplie de matériel provenant de l'image complète. Répétez l'étape 8 pour fixer la couture horizontale (en haut et en bas de l'image).
La propriété finale
La texture simple créée ci-dessus présente un défaut flagrant: car elle a été conçue pour démontrer le processus, ses caractéristiques se répètent trop souvent.
Les caractéristiques d'une texture naturelle sont généralement inférieures au dixième de la tuile entière. Autrement dit, pour une tuile mesurant 500 x 100 pixels, la plus grande marque de ride, de rill ou autre mesure 50 x 10 pixels ou moins.
Les textures bien conçues nécessitent une autre caractéristique: le temps. À moins de télécharger un billet de faveur, vous devez prendre le temps de développer et d'affiner une texture excellente. Mais n'y pensez pas comme une corvée. Cela fait naturellement partie du processus.
Écrit exclusivement pour Webdesigner Depot par Ben Gremillion. Ben est un freelance concepteur web qui résout les problèmes de communication avec une meilleure conception.
Comment créez-vous des textures naturelles? Partagez vos idées dans les commentaires ci-dessous.