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.
|
 The original photo / la photo originale
 The skewed photo / la photo "skew"
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)
|
 prepared photo / photo preparée
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:
|
 flipped, step one / étape un
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:
|
 flipped, step two / étape deux
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 tiled fake texture / la fausse texture empilée
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 ;)
|
the final result: tile_01 tiled 4 times
le résulat final tile_01 empilée 4 fois
|