Tuto vidéo : créer vos propres textures (seamless)

,
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;
}

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

0 réponses

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 *