Vous êtes-vous déjà demandé comment des concepteurs de sites Web proposent de telles superbes textures de fond? C'est en fait beaucoup plus facile que vous ne le pensez. Cela ne prend que quelques minutes et un seul filtre Photoshop que vous n'avez probablement jamais utilisé.
Intrigué? Lisez la suite pour voir les instructions étape par étape pour la création de textures mosaïques à partir de presque toutes les images.
La voie facile ou la voie dure
Vous pouvez démarrer ce projet de deux manières. Vous pouvez soit récupérer une texture prédéfinie, soit créer la vôtre à partir de rien. Pour ce tutoriel, je veux vous en donner pour votre argent, nous allons donc prendre la route la plus haute et créer notre texture de base à partir de zéro.
Cependant, si vous êtes pressé, prenez simplement une texture libre de quelque part et sautez les premières étapes. Voici trois excellentes ressources pour bien commencer (de notre article? 40 Ressources étonnantes pour des freebies de conception?).
Perdu et pris
Textures CG
Texture roi
Si vous voulez quelque chose de plus unique, ouvrez Photoshop et suivez-le.
Étape 1: Nouvelle toile
Il est assez facile de repérer les images d'arrière-plan en mosaïque lorsqu'elles sont petites; je vais donc agrandir la mienne. Nous allons l'enregistrer au format JPG afin que la taille du fichier reste suffisamment petite pour permettre un chargement rapide sur la plupart des connexions. Si vous n'êtes pas d'accord avec la grande taille, réduisez simplement le vôtre!
Dans Photoshop, créez un nouveau document de 800 pixels sur 800 pixels à 72 dpi et en RVB.
Remplissez maintenant votre toile avec une couleur unie moyenne à sombre. Vous pouvez choisir ce que vous voulez, mais je suis allé avec # 80ac4b.
Étape 2: Créer un pinceau personnalisé
J'ai remarqué que les textures de bokeh semblent être très populaires ces derniers temps, j'ai décidé de vous montrer comment en construire une. C'est un bon exemple car cela donnera une texture un peu plus difficile à paver que la plupart des autres.
Pour commencer, créez un nouveau document, prenez un pinceau rond et dur et cliquez une fois au centre de la zone de travail pour créer un point noir. J'ai donné au mien une légère lueur extérieure noire pour ajouter un peu à l'effet bokeh. Maintenant, allez dans Edition> Définir le préréglage du pinceau.
Nommez votre pinceau, enregistrez-le et revenez à votre autre toile.
Sélectionnez maintenant ce pinceau, accédez à la palette des pinceaux et appliquez les options suivantes pour obtenir un effet de dispersion agréable.
Ste 3: peindre
Maintenant que vous avez un bon pinceau, peignez un peu de bokeh. Ne vous laissez pas emporter, rappelez-vous que plus il est complexe, plus il sera difficile d'entrer et de le réparer lorsque nous le convertirons en un motif répétitif.
Voici le modèle que je suis venu avec:
Étape 4: décalage
C'est la partie où Photoshop prend le relais et fait une astuce qui nous fait gagner beaucoup de temps. Tout d’abord, assurez-vous que vos calques sont fusionnés dans un document plat. Maintenant, allez dans le menu et choisissez Filtre> Autre> Décalage.
Définissez votre décalage horizontal et vertical sur la moitié des dimensions en pixels de votre toile et sélectionnez l'option Enrouler.
Voila! Une texture de fond transparente. Ok peut-être pas. Cependant, une grande partie du travail a été faite pour nous et nous avons juste besoin d'un peu de nettoyage pour le faire fonctionner.
Étape 5: Nettoyer les coutures
Si nous travaillions avec une texture photographique, nous allions cloner le long des coutures pour nous assurer que tout avait l'air correct. Cependant, ici nous avons un fond de couleur unie qui nous permet de peindre avec un pinceau vert.
Entrez et peignez complètement sur toutes les zones problématiques. Ce n'est pas grave si vous détruisez un bokeh dans le processus. Comme vous pouvez le voir sur l'image ci-dessous, j'ai un peu aplati l'un de mes cercles tout en réparant la texture. Nous allons résoudre ce problème à la prochaine étape.
Étape 6: Ajouter un peu plus de bokeh
Maintenant, prenez le pinceau bokeh que vous avez créé et désactivez tous les effets de diffusion que vous avez activés précédemment. Ajoutez quelques bokeh supplémentaires, un clic à la fois, où il y a des espaces vides au centre de l'image (éloignez-vous des bords!). Utilisez quelques calques et des opacités différentes pour le rendre plus beau et remplacez tous les cercles que vous avez brisés avec l'étape précédente en les superposant.
Lorsque vous avez terminé cette étape, vous devez disposer d’un beau fond graphique parfaitement lisible. Maintenant, enregistrez-le au format JPG, en maintenant la taille de votre fichier aussi basse que possible tout en conservant une image nette. J'ai décidé de sauvegarder le mien à 500px par 500px afin de pouvoir facilement repérer le motif qui se répète et rechercher les zones gênantes.
Ensuite, nous allons le tester dans un navigateur Web pour nous assurer qu'il fonctionne.
Étape 7: Jetez-le dans une page Web
Le meilleur moyen de tester la texture consiste simplement à créer une page Web rapide. Créez un document HTML vide et mettez en forme le corps avec le code CSS suivant:
Maintenant, visualisez-le dans votre navigateur pour voir comment vous l'avez fait. Ne vous inquiétez pas si ce n'est pas parfait, revenez en arrière et modifiez les zones à réparer. Comme vous pouvez le voir sur l'image ci-dessous, nous carrelons plutôt bien! Pas mal pour seulement quelques minutes de travail.
Textures Organiques
Pour être précis, je veux également vous montrer comment cela fonctionne avec une texture un peu plus typique avec les ressources que vous trouverez en ligne. En voici un que j'ai récupéré sur Flickr.
D'abord coupé des bords, ils seront trop faciles à repérer dans un motif répété. Exécutez ensuite la commande offset comme nous l’avions fait auparavant.
Comme vous pouvez le voir sur l'image ci-dessus, cette texture est si parfaite pour cette technique qu'il est difficile de repérer les coutures avant même de procéder au nettoyage! Néanmoins, suivez les coutures avec l'outil de clonage ou le pinceau cicatrisant pour vous assurer que les transitions sont agréables et progressives.
Lorsque vous avez terminé, enregistrez-le et chargez-le dans le navigateur comme auparavant pour voir si vous avez des zones laides.
L'image ci-dessus montre mon produit final. En le parcourant une seconde fois avec une texture beaucoup plus facile à travailler, j'ai été en mesure de réduire mon temps à environ deux minutes!
Conclusion
Cette méthode est si simple et rapide que vous n'avez vraiment aucune excuse pour ne pas tenter l'expérience la prochaine fois que vous souhaitez pimenter l'arrière-plan de votre conception de sites Web. Créer vos propres textures en mosaïque plutôt que d’en prendre une déjà prête contribuera à donner à votre site un aspect unique et vous donnera beaucoup plus de liberté quant au type de texture que vous souhaitez.
Faites-nous savoir dans les commentaires ci-dessous si vous avez été en mesure de créer une tuile décente en utilisant cette méthode. Laissez un lien vers votre produit final afin que nous puissions le vérifier!