Textures-HOWTO

This is the technique I used to create these textures.

Textures-COMMENT

Je présente ici la technique que j'ai utilisé pour créer ces textures

The easy part

First, I add to take a photo and to tweak it. I used PhotoShop's Skew tool to do the thing right. I also use the high pass filter to filter out low frequencies in the image and the variations tool to finally get the color right. This is the preparation phase and it may depends on the photo you're transforming (the high pass filter and the variations tool may be needed in all cases). Some photos may need more work to be used as base data for textures.

La partie facile

Premièrement, j'ai du prendre une photo et la modifier. J'ai utilisé l'outil Skew de Photoshop pour le faire correctement. J'ai aussi utilisé le filtre high pass pour supprimer les fréquences basses dans l'image ainsi que l'outil variations pour finalement obtenir la bonne tonalité. Cette phase de préparation peut dépendre de la photo que vous devez transformer (le filtre high pass et l'outil variations devront probablement être utilisés dans tous les cas). Certaines photos peuvent nécessiter plus de travail que d'autre pour être utilisé comme base pour une texture.

Once the photo is prepared, it is time to make it tileable. We are starting from this point (this is a fake photo):

Une fois que la photo a été préparée, il est temps de la transformer en photo empilable. Nous commençons à partir de ce point (il s'agit d'une fausse photo)

Select the left half of the image, copy-paste it to a new layer, and flip it (left should become right). Do the same with the right part of the image. Merge the two layers together: now you just got something like this:

Sélectionnez la partie gauche de l'image, copiez-collez vers un nouveau calque, et appliquez un miroir d'axe vertical (la gauche devient la droite). Effectuez la même opération avec la partie droite de l'image. Fusionnez les deux calques obtenus: maintenant vous devez avoir quelque chose comme ça:

Do exactly the same on top/bottom (using an horizontal flip) to obtain this one:

Effectuez la même opération sur les parties haut et bas de l'image (en utilisant un miroir d'axe horizontal) pour obtenir ceci:

Now, rotate this texture by 180°, and voilà. Congratulations, you are able to tile this texture!

Maintenant, effectuer une rotation à 180° et voilà. Congratulations, vous êtes à même d'empiler cette texture!

The not-so-easy part

You'd tell me: "wait... it seems easy, but you are working on a fake texture. It can't be so easy in our real life. there must be a trap somwhere...". And you'd be right. Of course, what you just done is simply to add an offset of (w/2, h/2) to your texture. But there is one important thing you are now able to control: the non-tileable part is now inside the texture, not on its edge. This make it really easier to tweak it.

The work you'll have to do now depends on the texture type itself. In the first textures I made, I overlapped the different parts of the texture and I used the eraser and the rubber stamp tools to correct the offending parts. I did this for left/right, merged the layer and then used the free transform tool to resize the whole layer. Then I did this for top/bottom. I applied this technique for mud_01, grass_01 and grass_02. Although these textures are not perfect (mainly because they were the first three texture I created), I believe they are not that bad. They can be used to implement a game prototype without beeing the "ugly thing you'll see" while playing.

Since there is a pattern in both tile_01 and concrete_01, I used a slightly different technique: I used the pattern as a frontier and I cut the texture parts accordingly, following the pattern. concrete_01 was the first texture I created using this technique - it seems there is a alpha problem on the border of this texture, and it may need some modifications. To fine-tune the texture I used the eraser and the rubber stamp tools. tile_01 is the second one I created using this technique. I managed to do a far better job than the first time - maybe I'll continue to improve my skills :)

La partie pas si facile

Vous me direz: "attends... ça semble facile, mais tu ne travaille que sur une fausse texture. Ca ne peut pas être aussi facile dans la vie réelle. Il doit y avoir un piège quelque part...". Et vous aurez raison. Bien évidemment, ce que vous venez de faire n'est autre qu'ajouter une phase de (largeur/2, hauteur/2) à votre texture. Mais maintenant, il y a une chose importante que vous pouvez aisément contrôler car la partie non empilable est maintenant à l'intérieur de la texture, et non pas sur ses bords. Celà la rends beaucoup plus facile à modifier.

Le travail que vous avez à faire maintenant dépends tu type de la texture lui-même. Pour les premières textures que j'ai créé, j'ai recouvert les différentes parties de la textureet j'ai utilisé la gomme et l'outil tampon pour corriger les mauvaises parties. J'ai effectué cette opération pour les parties droite/gauche puis j'ai fusioné les calques et utilisé l'outil transformation libre pour redimensionner le calque de manière correcte. Ensuite j'ai répété l'opération pour les parties haut/bas. J'ai utilisé cette technique pour les textures mud_01, grass_01 et grass_02. Bien qu'elles ne soient pas parfaites - principalement parce que ce sont les trois premières textures que j'ai créé - je pense qu'elle ne sont tout de même pas si mal. Elles peuvent en tout cas être intégrées dans un prototype de jeu sans être les "choses les plus horribles que vous ne verrez jamais" pendant le jeu.

Puisqu'il y a un motif récurrent dans tile_01 et concrete_01, j'ai utilisé une technique légèrment différente: j'ai utilisé les bordures du motif et j'ai coupé la texture de manière à les respecter. concrete_01 a été la première texture que j'ai créé ainsi - il semblerait qu'il y ait un problème sur la couche alpha au bord de l'image, et la texture demande certainement quelques modifications. J'ai utilisé la gomma et le tampon pour améliorer les détails de la texture. tile_01 est la seconde texture que j'ai créé ainsi. Je pense avoir réussi un bien meilleur effet que la première fois - et je continuerais à m'améliorer :)

Conclusion

Fine-tune the texture is hard. But it is far easier when you see what your are doing and therefore doing the first part is really the important thing. When I create textures, I usually do the "flip, step one", fine tune the thing I got, do the "flip, step two", rotate and finally fine-tune the texture to get it right. As you can see, I managed to get very good results with my minimal skills - and beleive me, this is still an euphemism ;)

Conclusion

Affiner un texture est difficile. Mais il est tout de même beacoup plus aisé de le faire que vous voyez les zones à affiner, et donc la première partie de ce tutorial présente une tecnique importante. Lorsque je crée des textures, j'effectue généralement l'étape un, puis j'affine, puis j'effectue l'étape deux, la rotation et finallement j'affine la texture pour obtenir l'effet recherché. Comme vous pouvez le vérifier vous même, les résultats que j'obtiens sont relativement bons, malgré mes très très modestes talents - et encore, il s'agit là d'un euphémisme ;)