Création d'une texture sans soudure avec Photoshop


Ce tutoriel vous permettra de créer vos propres textures dîtes « seamless« , c’est-à-dire sans soudure ni couture à partir de vos photos ou de votre visuel préféré.
Les éléments suivants seront abordés dans cette leçon :
– Recadrage et création de calque à partir du menu contextuel
– Utilisation des masques et paramétrage fin avec l’utilisation de l’outil pinceau
– Création d’un motif utilisable directement dans Photoshop ou sur votre site web.

Cette mini-formation est avant tout destinée aux utilisateurs de Photoshop (quel que soit leur version), mais vous pourrez aisément reproduire cette recette sur le logiciel libre GIMP (je vous promets de mettre alors à jour cet article).

Ce principe de tuilage est également applicable sur Illustrator. Très prochainement un tuto lui sera également dédié.

Pour utiliser une texture sur votre site, il vous suffit d’exporter sa structure minimale (l’espace dans lequel vous avez créé votre motif) et d’appliquer une règle CSS à votre background, de préférence sur votre body par exemple (désolé de parler geek).

body {
background: url('image/TextureSeamless.jpg') repeat center top #fff;
}[/php]
Vous trouverez dans les éléments à télécharger un exemple d'utilisation de la texture pour un site internet sous la forme d'un fichier CSS (ou feuille de style en cascade) qui sera aisément transformable.

[blue]Le fichier source correspondant à de cette leçon est téléchargeable sur mon site. Il comprends le fichier source Photoshop, le motif au format Photoshop, et un exemple d'utilisation de cette texture pour un site internet à l'aide d'un fichier XHTML et de règle CSS. Regards to PEEJ0E for sharing his photography[/blue]

Toujours pas convaincu ?
Il ne vous reste plus qu'à vous adresser à un des nombreux (et pour certains géniaux) site de fabrication de motif (pattern)

http://www.tartanmaker.com/
>un générateur de tartan très complet.

http://www.theinspirationgallery.com/
>les patterns sont ici d'inspiration vintage avec une possibilité immédiate des les pré-visualiser.

http://www.bgpatterns.com/
>un générateur très ludique et hautement paramétrable

16 réponses
  1. domi
    domi dit :

    Bonjour,
    Avant tout,merci pour ce tuto super simple a utiliser et a mettre en œuvre.
    J’ai bien réussi toutes les étapes de ce tuto, cela dis, la texture que j’ai crée est beaucoup plus grande que l’image dans laquelle je veux l’intégrer.
    Comment résoudre ce problème?
    Merci de votre réponse.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Domi,
      Sauf si je n’ai pas parfaitement compris votre cas de figure (ce dont alors vous voudrez bien m’excuser), la solution est facile à mettre en oeuvre : il vous suffit de recadrer la texture qui habillera votre image.

      Répondre
  2. shyme
    shyme dit :

    Merci pour ce tutoriel, je rencontre un problème lorsque j’ajoute la portion de gauche sur la droite, celle-ci passe en dessous de la matière initiale de la texture, j’ai essayer en diminuant l’opacité mais cela n’est pas génial, auriez vous une solution ou ai-je mal fait une étape ?

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Shyme
      Merci de votre commentaire. Difficile de vous répondre sans constater la structure de votre document. Il s’agit sans doute d’un problème d’étagement des calques. Je vous propose de tous les masquer (éteindre « l’oeil ») et les rallumer ou les afficher un à un pour savoir ce qui passe au dessus (et changer l’étagement des calques si besoin). Si vous n’y parvenez pas, ne manquez pas de m’envoyer une ou plusieurs copies d’écran pour que je puisse vous aider.

      Répondre
  3. Cloe
    Cloe dit :

    Bonjour,
    Après avoir créé le masque de la partie droite 7:10, je vérifie mes couleurs en noir et blanc originel, je mets en noir, je prends l’outil Brush… Mais ça me peint des cercles noir. Je ne comprends pas pourquoi, vous, ca efface de façon diffuse votre image?

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      calque de masque Photoshop tuto Bonjour Cloe
      Je pense que vous ne sélectionnez pas la bonne zone. Lorsque vous créez un masque deux vignettes sont présentes : la vignette de prévisualisation de votre calque en (1) sur l’image et la vignette du calque de fusion en (2). Il faut cliquer sur cette vignette du calque de fusion pour travailler dans le calque et masquer (pinceau noir) ou révéler (à moins que cela ne soit déjà présent – pinceau blanc) le contenu sur lequel vous travaillez. Cliquez à nouveau sur la vignette de prévisualisation pour sortir du masque de fusion.


      Il existe également des raccourcis intéressants :
      MAJ + Clic sur la vignette du masque de fusion : afficher ou masquer le masque.
      ALT + Clic sur la vignette du masque de fusion : afficher ou masquer uniquement la couche de niveaux de gris du masque.
      Bon courage !

      Répondre
  4. Broke
    Broke dit :

    Ah, d’ailleurs, j’ai cherché longtemps sur le net mais je n’ai pas trouvé de texture laquée. Est-ce que c’est très compliqué à faire ? J’ai l’impression qu’on en trouve plus du tout sur les sites depuis quelques années

    Répondre
    • FabriceCourt
      FabriceCourt dit :

      Merci de votre approbation Broke !
      Qu’entendez-vous par une ‘texture laquée’ ? S’il s’agit d’une laque brillante que vous souhaitez reproduire, un jeu de texture seamless ne pourra pas répondre à votre problématique. Vous devez en effet reproduire des spéculaires, soit des réflexions ce qui n’est pas aisé si l’on veut atteindre un rendu photo-réaliste. La meilleure des solutions, mais pas la plus simple, est d’utiliser un logiciel 3D pour reproduire cela avec exactement, tel que vous l’imaginez.
      Si je suis hors-sujet sur ma réponse, ne manquez pas de reposter !

      Je vous souhaite une belle semaine.

      Répondre
  5. Hel Imag'In
    Hel Imag'In dit :

    Merci pour ce tuto…. Très intéressant d’autant que je prends moi-même mes photos pour en faire des textures et j’avais jamais pensé à cette technique pour les raccords qui étaient mon casse-tête!!!!

    Répondre

Ajouter un commentaire

Rejoindre la discussion?
N'hésitez pas à contribuer !

Laisser un commentaire

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