Faire une texture de porte en bois

Écrit le 08/07/2003 par piGfreeZer
Dernière mise à jour : 01/02/2006

Introduction

-Dans ce tutorial, je vais vous guider dans la création d'une porte en bois. Bien entendu, j'expliquerai pas-à-pas, mais j'expliquerai la méthode pour que vous compreniez ce que vous faites et donc essayer de refaire quelque chose dans le même esprit aprés ce tutorial.
Faire une texture à partir de rien est assez simple, mais le résultat n'est pas extrémement photoréaliste; par contre, c'est très utile pour les jeux, et vous obtenez exactement ce que vous voulez. (pour peu que vous saviez vous servir de Photoshop, et c'est le but des tutoriaux de ce site).
Libre à vous d'ajouter modifications et détails pour que votre porte soit plus agréable à l'oeil.

Niveau: Intermédiaire. Quelques notions sont à connaître.
Logiciel: Photoshop. J'utilise la version 7 pour ce tutorial.

Le bois de la porte

-Commencez par créer une nouvelle image; dimensions 128 pixels en largeur et 256 en hauteur. File > New (Fichier > Nouveau).

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/01.jpg

-Pour le fond de la porte (le bois), choisissez 2 couleurs principales dans les tons bruns/beige.

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/02.jpg

-Certaines personnes n'utilisent qu'une seule couleur pour le fond, mais je préfére utiliser 2 couleurs car j'applique l'effet Nuage qui mélange parfaitement les 2 tons. Très utile je trouve pour les fonds de texture.
Allez donc chercher cet effet Filter > Render > Clouds (Filtre > Rendu > Nuages)

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/03.jpg

-Comme dans le tutorial sur la texture de bois. Ajoutez du bruit. Filter > Noise > Add Noise (Filter > Bruit > Ajouter du bruit...)

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/04.jpg

-Ensuite, appliquez un effet de Flou Directionnel. Filter > Blur > Motion Blur (Filtre > Atténuation > Flou Directionnel)

Entrez plus ou moins ces paramètres.

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/05.jpg

Voici le résultat:

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/06.jpg

(Note: cette méthode est expliquée dans le tutorial sur les textures de bois d'invalide)

-Passons aux détails qui feront de cette texture, une porte...

Les cadres de la porte

-Je vais ajouter quelques détails à ma porte en bois. J'ai pensé à des cadres (qui peuvent servir à creuser une fenêtre dans un niveau de jeu par exemple).

-Faites une sélection de 100*100 pixels. Pour être certain de la taille, n'y allez pas à la main, c'est trop long... Il y a une petit option dans Photoshop 7 qui permet de faire une sélection de taille fixée.
Placez la en haut, et au milieu horizontalement pour l'instant.

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/07.jpg

Efficace pour faire des cadres, n'est-ce pas ?

-Copier la sélection (Ctrl+C) et coller la (Ctrl+V). Un nouveau calque s'est créé.
Sélectionnez tout le document (Ctrl+A) puis allez chercher l'option Layer > Align To Selection > Horizontal Centers (Calque > Aligner sur la sélection > Centres horizontaux)

-Maintenez la trouche Ctrl enfoncé en cliquant sur le calque du rectangle de 100*100. Ceci aura pour effet de sélectionner le calque par ses contours.

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/08.jpg

-Pour faire un cadre, allez dans Selection > Modify > Expand (Sélection > Modifier > Dilater)
Entrez 4 ou 5 pixels comme valeur.

-Maintenant, sans déselectionner, maintenez Ctrl et Alt enfoncés et cliquez sur le calque1.
Toujours sans déselectionner, retournez dans le calque de fond, et faites un copier/coller.
Vous avez votre cadre.
Vous pouvez supprimer le calque1, qui ne sert plus à rien.
(Note: on peut utiliser la méthode du cadre, accesible par Selection > Modify > Border, mais la sélection est "lissée", ce qui complique pour la suite)

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/09.jpg

-Passons au relief du cadre:
Double-cliquez sur le calque du cadre.
Vous atteindrez les options de fusions du calques. Ces options/effets sont assez utiles et sont très éfficaces.

A défaut de longues explications des options à choisir, voici les paramètres que j'ai utilisé pour faire mon relief de cadre:

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/10.jpg
http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/11.jpg

Avec ces options, voici la texture que j'obtiens:

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/12.jpg

-Vous pouvez dupliquer ce calque pour faire un cadre dans la partie inférieure de la porte.
Layer > Duplicate Layer... (Calque > Dupliquer le Calque...)

Voici où vous devriez en être:

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/13.jpg

La clanche

-Passons maintenant à la clanche de la porte. Certains jeux récents peuvent avoir des portes bien détaillées avec la clanche en 3D. Mais dans ce tutorial, je vais expliquer comment je fais ma clanche en 2D.

-Commencez par créer un nouveau calque. Tracez une sélection en cercle avec l'outil Elliptical Marquee Tool (Outil Ellipse de sélection) pour la base de la clanche.
Arrangez vos couleurs: du gris et du beige pour la base de la clanche, pour imiter un métal un peu couleur sable.

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/14.jpg

-Maintenant, faites Filters > Render > Clouds (Filtres > Rendu > Nuages), puis ajoutez du bruit Filters > Noise > Add Noise... (Filtres > Bruit > Ajouter du bruit...)

-Avec les outils Burn et Dodge (Densité + et -) eclaircissez le haut du calque et noircissez le bas:

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/15.jpg

La base est finie, passons à la clanche en elle même.
Un simple rectangle suffira.

-Créez un nouveau calque.
Choisissez des couleurs plutôt métalliques: Gris Clair et Foncé...
Répètez la méthode que pour la base. (Nuages, Bruit, Densité)
Utilisez la méthode des options de fusion pour appliquer une ombre à la clanche.
Vous devriez avoir une bonne clanche:

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/16.jpg

Conclusion

Voilà, mon tutorial touche à sa fin. Pour fini, je vous montre quelques exemples commentés:

Même genre, avec bois plus foncé.

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/17.jpg

Même technique de bois, plus d'autres détails utilisants les méthodes employées dans ce tutorial

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/18.jpg

Une autre sorte de porte en bois, plus ancienne.

http://www.game-lab.com/images/tuts/photoshop_2dwoodendoor/19.jpg