Comment transformer une texture en un arrière-plan parfaitement carrelé

Les arrière-plans en mosaïque sont parfaits pour les arrière-plans de sites Web et pour toutes sortes de travaux sur Photoshop. Ils sont particulièrement utiles lorsque vous travaillez avec des textures nécessitant un arrière-plan global plus large que la petite image avec laquelle vous devez travailler. Dans ce rapide didacticiel, je vais vous expliquer comment transformer une texture en une image d’arrière-plan prête pour un mosaïque sans joint. C'est une petite technique utile qui existe depuis toujours. Nous avons besoin de cette technique pour l’autre tutoriel d’aujourd’hui - Comment une mise en page simple peut-elle être mélangée avec des motifs, des photos et des arrière-plans.

Ce post est le jour 9 de notre session de conception Web. Sessions créatives "Session 8

Pourquoi vous ne pouvez pas mettre en mosaïque une vieille photo

Donc, dans ce tutoriel, nous voulons créer un fond en mosaïque d’une texture d’herbe. Il y a une photo fantastique d'herbe sur Flickr par 100kr

que nous pouvons utiliser. Cependant, si on ne met que l'image en mosaïque telle quelle, le résultat n'est pas très bon. Comme vous pouvez le voir ci-dessus, il est très clair que l'image est répétée et que les zones sombres sont plutôt étranges. Donc, pour transformer cette photo en arrière-plan en mosaïque, nous devons d’abord éliminer les irrégularités, puis associer les bords les uns aux autres..


Étape 1

La première étape consiste donc à saisir l'image principale, puis à la découper dans une section qui ne présente pas les correctifs de coins vraiment sombres. Quelque chose comme la boîte montrée ci-dessus.


Étape 2

Voici notre segment. En fait, je l'ai un peu réduit pour que la texture ne soit pas trop grise. Maintenant, bien que la couleur soit presque uniforme, nous pourrions éclaircir les bords. Plus nous pouvons obtenir l'image, mieux c'est, car de légères différences sont assez criantes lorsque l'arrière-plan est en mosaïque..

Alors prenez juste la Outil d'esquive (O) et avec une grande brosse douce, il suffit de brosser doucement les bords gauche et droit pour les éclairer légèrement. N'allez pas trop loin car l'herbe aura l'air délavée.


Étape 3

Comme vous pouvez le voir ci-dessus, l’herbe a une couleur beaucoup plus uniforme. Mais il y a une petite feuille en haut à gauche, ce sera un cadeau mort si la même feuille apparaît encore et encore, alors nous devrions nous en débarrasser. Pour ce faire, prenez le Outil de correction (J) et dessinez une forme autour de la feuille puis faites glisser avec votre souris pour obtenir une zone à proximité pour la patcher. (Notez que l'outil Patch doit être défini sur Source et non sur Destination, sinon vous l'utilisez légèrement différemment.)


Étape 4

Donc, notre arrière-plan est plutôt joli et uniforme maintenant. Nous avons juste besoin de faire saigner les bords les uns dans les autres. Donc, dupliquez la couche d'herbe. Déplacez ensuite le premier calque vers la gauche et le deuxième calque vers la droite. Continuez ainsi jusqu'à ce que vous puissiez voir les deux couches avec un espace blanc entre les deux. Maintenant, rapprochez-les pour que le bord le plus à droite du premier calque touche le bord le plus à gauche du second calque.


Étape 5

Ici, vous pouvez voir les deux couches presque se toucher. Rassemblez-les pour qu'il n'y ait pas de blanc entre eux et fusionnez les deux couches en une seule.


Étape 6

Maintenant, nous utilisons à nouveau l'outil de correction pour tracer une forme approximative autour du bord où les deux couches se rencontrent, puis nous utilisons votre souris pour faire glisser une zone proche sur celle-ci pour la corriger..


Étape 7

L'outil patch fait ce genre d'opération vraiment facile, surtout avec un fond aussi bruyant que cette herbe. Comme vous pouvez le constater, à moins que vous ne regardiez très attentivement, l'emplacement de la ligne de mélange n'est pas évident. Si vous le souhaitez, vous pouvez entrer dans les moindres détails et cloner des brins d'herbe individuels - mais cela convient à nos besoins..


Étape 8

Maintenant, nous répétons le même processus verticalement. Donc, dupliquez le calque et déplacez-en un vers le bas et un vers le haut jusqu'à ce que les bords inférieur et supérieur se rejoignent. Fusionnez le calque et utilisez l'outil Patch pour éliminer le contour..


Étape 9

Et maintenant nous sommes prêts pour le carrelage!

La raison pour laquelle cela fonctionnera est que nous nous sommes effectivement débarrassés de ces bords. Les nouveaux bords du document sont déjà identiques, car nous avons déplacé les calques de manière égale, de sorte que le bord droit de ce document est le pixel suivant le long du bord gauche.


Étape 10

Alors appuyez sur CTRL-A tout sélectionner et aller à Édition> Définir un motif.


Étape 11

Maintenant, nous donnons un nom au motif


Étape 12

Désormais, sur n’importe quel calque, si vous sélectionnez des options de fusion et cochez la case Superposition de motifs, vous pouvez choisir parmi votre ensemble de motifs personnalisés, comme indiqué, y compris celui de l’herbe que nous venons de créer. Dans l'image ci-dessus, vous pouvez me voir appliquer le motif dans un arrière-plan de site Web..

Bien sûr, vous devez également enregistrer l'image de motif au format PSD ou JPG lui-même, car vous en aurez peut-être besoin en tant qu'image autonome. Par exemple, si vous deviez l'utiliser comme image d'arrière-plan dans un document HTML, vous n'auriez besoin que d'une seule image JPG, et non d'un "motif" Photoshop..


Finito!

Voici notre herbe en mosaïque. Comme vous pouvez le constater, il y a un aspect assez sombre qui le trahit, mais comme je vais utiliser cela comme arrière-plan pour un site Web, ce n'est pas grave, car il y aura beaucoup de choses sur le dessus. Néanmoins, vous pouvez facilement revenir en arrière et corriger cet endroit pour le rendre plus transparent..


Mise à jour - Filtre> Autre> Décalage

Merci aux commentateurs qui ont souligné qu’il existe en fait un moyen plus simple de compenser l’arrière-plan à l’aide d’un filtre! Il suffit d'aller à Filtre> Autre> Décalage et sélectionnez une quantité de pixels pour déplacer l'image horizontalement et verticalement. Merci pour le tuyau les gars! J'apprends quelque chose de nouveau tous les jours :-)

Ce post est le jour 9 de notre session de conception Web. Sessions créatives "Session 8