B Tutorial 2D Extension Tutorial - Texturing, tips and tricks.

Users who are viewing this thread

Yoshiboy

Count
Hello, welcome to another Yoshiboy tutorial, this one doesn't have a nice little structure like all of the others; basically I have divided it up into chapters which are relevant to certain areas of texturing. Because of the nature of texturing the focus of this tutorial will be on tips and tricks and aimed at the new or veteran texture artists starting out and struggling to create some pretty textures. I’ll just point out myself that I am not the greatest texture artist of all time myself, and I am incredibly lazy most of the time with my texture work. So don’t expect me to know everything on this subject. The majority of this tutorial will also be based on the use of Adobe Photoshop, although nearly always it can be very easily applied to other texture applications like GIMP or Paint Shop Pro…or whatever you use, so don’t worry. It may still be useful.

So in no real order, we begin:

Chapter 1 – Photo textures


I’d just like to point out here that using photo textures is not “cheating” and the likelihood is that nearly all great texture artists will work these days with a digital camera, snapping up any useful looking textures they can as they travel around the world.

There no nothing wrong at all with using a picture off Google or a photograph from a texture library, it’s an important part of creating textures.

I have gathered a large collection of textures myself from various places in the internet, my texture library has grown considerably in size and I carry around with my on holiday my digital camera for snapping up any pictures of walls that look nice, or wood, or rust. There is a large collection of texture libraries on the internet, not all are brilliant. Here are a links to a few of them; my favourites are at the top.

http://www.mayang.com/textures/
http://www.animax.it/animax/Textures.htm
http://www.bencloward.com/textures_metal.shtml
http://lemog.free.fr/lemog_v5/index.php?cat=4
http://www.spectralogue.com/textures/index.php?path=26
http://www.kavewall.com/stock/
http://textures.forrest.cz/
http://www.imageafter.com/index.php


Pretty much all of those are excellent, the best are probably Mayang and Animax, both of those I use heavily. Photoshop actually has its own built in texture archive, so you can use them whenever you want, as an overlay or whatever you need. To store a texture as a Photoshop pattern it is very simple. Just have the image open in Photoshop and go edit > define pattern

tt1.jpg


This should add your texture to the Photoshop gallery which can be accessed with the pattern brush, marked in red in the picture below. (if you cannot see that in your version of Photoshop then simply right click and select it from the options given.) Once you have the pattern brush selected click on the pattern option button, also marked in red by the picture. This will open up a preview window with all of your patterns in. There are lots of options of how you sort these patterns and how they are previewed and options related to that – you can find these options by clicking on the little arrow marked out in blue in the screenshot.

tt2.jpg


But stop! There are a few things you will want to do before you go around storing every image gallery on the web in your Photoshop texture library. Because we are working with games here there are some things we need to do to each texture before we want to add it to our gallery.

The two main things are as follows:

1. Make the texture tileable, so it can be used over and over again without looking nasty. If you don’t quite get what this means then it is like when you tile a wallpaper for your desktop background, making it “tileable” is blending the edges so that it looks nice.

2. Make the texture square and then it’s size a multiple of 2 ( 128x128, 256x256, 512x512, 1024x1024, 2048x2048 etc etc). This is very important, as very often a texture will have to be square and a multiple of 2 for it to even work in a game. Its useful to do this to your textures whatever.


Tiling textures

There are two mains ways to do this easily, depending on your situation.




Way number 1 - (and the best way)


This can be done only if you have a very high resolution texture as it reduces the quality of the texture. The advantage of this technique is that it makes the seams more or less invisible, and leaves a near perfect blend. The technique is illustrated in the screenshot below.

tt3.jpg


The yellow lines mark out the square texture we are extracting from the photo. The blue lines represent a piece that we cut out and place on top of one end. If you think about it then you can see how this would make one seam blend perfectly. What we then do is take the rubber tool
tt4.jpg
with about 20-30% Opacity and slowly rub away at the seam showed in green until it blends nicely.

Once we have done this, we repeat the process on the bottom of the texture as well, taking a part that is below the bottom and placing it on the top. We then blend in the other seam.

Way number 2

If you have a little less room and no space outside the texture you want to make you can still make a texture tileable, it’s just not as pretty and you might get some nasty seams. This picture shows what you have to do:

tt5.jpg


Basically you copy the bottom of the texture (marked out in yellow) then flip it horizontally and place it at the top of the texture. Then you blend in the bottom seam with the rubber at about 20-30% Opacity again. This makes the seam a little like a mirror effect and sometimes looks good, sometimes looks bad. It just depends on the texture.

This process is then repeated again horizontally, copying one side, flipping horizontally and then placing on the opposite side before blending in again with out rubber.



Once you have done either of these you should have a square texture, and your only job is to re-size to the nearest multiple of 2. ( 128x128, 256x256, 512x512, 1024x1024, 2048x2048 etc etc). This is very easily done.

Go – “Image > resize image…” from the top menu and you will get the screen shown below.

tt6.jpg


Change the width and height values to pixels and then change both to whatever value you want. Having the constraint proportions box ticked at the bottom will make sure that the image is fixed as a square or whatever other shape it is and that it doesn’t get stretched.

Now, if you are using PSP to tile textures, you have the easiest job on earth. Thanks to TakiJap we now know how to do it so easily.



Chapter 2 – Variation.


Variation is something that is key to the creation of a texture. Variation is what stops the texture looking like it was created on paint, and for new texture artists, often this is the hardest thing to get working. Variation, is in fact, with a few tips and tricks from Yoshiboy, incredibly easy.

To demonstrate some techniques I am going to take you through the process of creating a metal texture. First of all, we start with a blank canvas.

tt7.jpg


Then I fill the canvas with a nice grey using a paint-like brush. (you can find it 3rd from last on the default list).

tt8.jpg


Once this is done, I go over the texture with the burn and dodge tools
tt9.jpg
to create some more variation. These are like your darken and lighten tools, the options at the top here are used for bringing out highlights or shadows or just normal mid towns. The “exposure” value is for how powerful you want them to work. For this I have it at around 30%. Instead of switching from tool to tool you can also just hold “alt” with one tool out for it to do the opposite.

tt10.jpg


Now we want to render some noise onto our texture. So go: Filter > noise > add noise…

tt11.jpg


About 2% or 3% should be good. You can play with the other options if you want, but they won’t make much difference.

Once you have done that we want to create a new layer, this one we are going to render some clouds on. Go: “Layer > New > Layer…” and call this new layer “clouds”. Now, make sure your primary and secondary colours are black and white, as this will affect the clouds that are made. Then go “Filter > Render > Clouds” this will add some clouds to your layer, you can then play with the Opacity and blending options of the layer until it is just right. I think that about 30% Opacity looks good.

tt12.jpg


Once this is done you want to use one of my favourite tricks. Overlay a completely random image, with low opacity.

tt13.jpg


So far I have never found one that is better than the one pictured above.
Simply copy and paste it onto your texture as a new layer, then you can adjust the size by pulling around the bounding box (if this does not appear then select the Move tool (V) and tick show bounding box at the top). Pull it so that it covers your picture, select the tick button at the top and then adjust the Opacity of this layer until it looks nice. Around 15% seems to work in most situations.

tt14.jpg


Now, you may be thinking “what the **** have I just created, that looks nothing like metal” and you are probably right. I might have gone slightly over the top with the creation of variation in this texture but the point is that you can apply any number of these techniques to more or less any texture you create in the way of creating variation and an overall better texture.

In the end, the trick is to mess around, and practice makes perfect.


Chapter 3 – Details

Detail is something that is never easy to do with a texture, there aren’t so many ways you can really achieve it and make it look nice. It really is where the skill lies in texture work. Saying this, there are a number of hints I can tell you to get you going a little if you really have no clue where to start.

First of all, we have the burn and dodge tools again
tt9.jpg
. There are very important for detail as they can create the affect of something “bevelled” or bumped out. With this it is extremely easy to take something and make it look detailed. Just using the burn and dodge tool look what can be done to textures:

tt15.jpg


tt15_b.jpg


All of that only done by lightening and darkening parts of the texture. Alternately you can play around with the “bevel” layer blending technique until you find the right effect. I just never find that quite as effective. You can use this technique to add scratches and dents to the texture quite easily as well. Often the best way to add a scratch in metal is to simply use a full exposure dodge brush 1-3 pixels wide.

Another trick when making detail is to create the illusion of soft lighting that is so hard to create even with beautiful rendering tricks. In the picture below I have tried to point out some areas where you see a little bit of soft shadow. (sorry it’s a crap example, my room sucks.).

tt16.jpg


I want you to mainly take notice of the soft lighting above the radiator and below the window sill. Say we were making a wall texture for my room and decided to texture in the window and the radiator (or even if they were meshes in front) a nice effect would be to create the soft shadow beneath on the wall texture. This isn’t the greatest example, so below I have shown what it would be like to create some metal bars of the top of a wall.

tt17.jpg


tt18.jpg


tt19.jpg


This effect might not look great in my example, but placing it on stuff like windows and ledges when you are working with low-polly, mainly texture based models it works extremely well.

For the moment that’s all I can give you for details, the rest is up to you. Be creative.

Chapter 4 – Normal and Bump maps.

Normal and Bump maps are another texture you apply on top of the normal “diffuse (colour)” texture to tell the computer which parts of the model to make appear “bumped” out. A little bit like out bevel technique for detail apart from that it is bumped out dynamically, so as the lighting in a 3d scene changes, so does the appearance of a bump – it shades one side of the other depending on what side the lighting is on.

A normal map is the same, and yet different. A normal map is like a super enhanced bump map and instead of black or white (in or out on a bump map). It has the complete 255 different values for Red Green and Blue. Each colour is referred to an axis in the 3d scene. Blue refers to depth or the Z axis, Red to side to side, or the X axis and Green refers to up and down, or the Y axis. This means we can have huge amounts more detail when we are making the normal map.

oakelf1.jpg

oakelf3.jpg


But, seeing and mount and blade doesn’t support dynamic normal maps, you wont be able to use them in the cool ways shown above for player characters. Normal maps in M&B are shaded once the scene loads and so are only affected by scene light sources like torches or the skylight. The only way we are going to use them is just like we would use bump maps, adding them only really to scene textures that might need them, like bricks or cave walls or things like that.

Normal maps will typically be generated directly from your texture, or from a custom black and white image you create. Creating normal maps is actually incredibly easy in Photoshop, you create them just like you would a bump map. Before I show you the process, make sure you have downloaded the Nvidia Photoshop tools for normal maps. These can be downloaded here:

http://developer.nvidia.com/object/nv_texture_tools.html

download the ones called “Adobe Photoshop Normal Map and DDS Authoring Plug-ins” this will allow you to create normal maps from your images. So once you have these downloaded and installed open up Photoshop.

Lets say we wanted to create a normal map for a brick texture we were adding to mount and blade. There are various ways you can do this, but by far the easiest is to simply take the normal texture and then use the Nvidia tools on it to change it into a normal map. To get these up you go “Filter > nvidia tools > normalmapfilter

tt20.jpg


The image above gives you a little run down on your options. The best thing to do to try and create the best effect is good old trial and error, so mess around. When you apply your normal map to a material in mount and blade, unlike the native normal maps, you have to remember to create a new texture reference entry for your normal map. It should then work fine.

This is what thorgrim said about adding normal maps to M&B:

"To add normal maps, load up BRFEdit.  Open the material file with the material you wish to add the normal map to, then drag your normal map into BRFEdit (or select the texture tab and type in the file name).  Then go to the material tab, select the material and put the normal maps name in the "bump" field.  You must also make sure the material has a shader that will display the normal map, such as dot3, dot3_alpha or bump_shader."


Chapter 5 – Alpha channels

So, first of all, what the hell are alpha channels. Alpha channels are another channel you add to a texture (apart from red blue and green). This channel is a grey style one, which means its only in black and white. This is more or less another creation used specifically for 3D art. Typically it doesn’t affect the colour of the RGB (red green and blue) channels but it can in some cases.

The most common two uses for alpha channel are for transparency and for secularity or shininess to you commoners. Of course, mount and blade uses both of these and which one it use depends on the material “Shader” (and material tags) that you have applied.

So, the biggest problem people seem to have with alpha channels is the shiney armour bug. I know that “TLD”, “Holy war” and “Hundred years war” mods all had this bug, and it’s so easy to fix. This bug was due to the alpha channel of their armour textures being completely white and them having a “Shader” on the armour material that made the texture appear more shiney depending on how white parts of it were. This is the “Iron shader” for future reference.

Now, in Photoshop, to access the alpha channel of a texture is so damn easy. If you have the layer window open then simply select channels from the tabs at the top and you should see the alpha channel listed below all of the others.

tt21.jpg


The shiny armour bug can be fixed so quickly for reference in the future. Just open up the default version of whatever armour texture you had, and copy the alpha channel from one to the other.

If you’re creating a new texture that you want to use alpha channel then this is very simple as well.

tt22.jpg


Simply go onto the channels pallet again and click the little arrow, then select new channel from this list. This will automatically make an alpha channel.

Now, because you are lucky, lucky people and that I used to use a copy of Paint Shop Pro, I’ll go over using the alpha channel of that as well.

tt23.jpg


Ok, so in PSP your alpha channel is a little less accessible, you can only add to it with selections, although remembers selections can be feathered and have a tolerance, so its still possible to have varying greyness, and not just all white. Basically, what you do is select what you want to be on the alpha channel and then go “selections > save to alpha channel…” and you get a new window open with some options about how you save it. Sorry I can’t go into any more detail about that, but as I said before, I only worked a little with PSP.

Now, when you are saving your .DDS files you might have noticed that you are given a whole load of CRAZY options about how you would like to save it. I’ll give you a run down of what they are in Photoshop – hopefully you can apply it to the other programs in use.

tt25.jpg


So, if I haven’t made that any un-clearer than it was. Good. Have fun with your alpha textures in future. And remember, they take up space! So save with no alpha if you don’t need them.



That’s all for now, tell me what you found useful and what you didn’t and what other areas you would like to be covered please.

Yoshiboy



 
Nice tutorial Yoshi.
I made my textures using MS paint (and a simple image editing program) and I used a different way to tile textures, what you posted I never tried. Although I can't do it because I don't have a tool to rub away the seams.
 
Fantastic tutorial Yoshi.  :grin:

Could you explain how to make a new texture reference entry?
It's almost certainly me being stupid, and something I know how to do already, but just in case.
 
Ursca said:
Fantsatic tutorial Yoshi.  :grin:

Could you explain how to make a new texture reference entry?
It's almost certainly me being stupid, and something I know how to do already, but just in case.

Everything to do with that is covered in my tutorial here
 
Very good tutorial as always. Went straight to my favorites, because I really really want to get hang of alpha channels. I have some problems trying to keep alpha channels in the texture throughout saving process. They just always disappear after saving. Paint shop pro just says that the DDS's won't support alphas, so it just deletes them.

Also I actually find it funny how difficult it is for you to do seamless tilings, when I can just press a single button and have perfect tiles.

That's from an old version of PSP, but I think it might work with newer versions.

So everybody using PSPs have lot easier time. I wonder if there would be need for same kind of tutorial for Paint shop pros.


P.S. That's a one excllent metal photo you've found.  :wink:
 
For new alphas in Paint Shop Pro:


1. make new texture
        a. Your on your own
        b. Save as your choice of file type (NOT .tga or .dds. for backup purposes)

2. Select areas you want alpha'd
        a. First a broad selection with Freehand or Box select
        b. Selections > Edit Selctions (this should bring up a transperant red mask)
        c. Using Erase and Push Edit the mask to your liking
                      -varying opacity with Erase will turn the alpha lighter or darker. The more transparant the darker the     
                      alpha (less shine)
        d. In Layers, go back to background to apply the mask as a selection

3. Make detailed greyscale alpha
        a. Selections > Modify > Select Color Range...
        b. I've found that the best settings are:
                      Tolerance 0
                      Softness  256
                      Reference color: black (default)
                      Subtract color range
        c. Click OK
        d. Selections > Load/Save Secection > Save Selection to Alpha Channel
        e. Several options appear
                      Alpha Channels - leave it alone
                      Name - leave as it is, or "Alpha 1" is always a good option. DO NOT CHECK THE BOX
                      Preview - self explanitory
        f. Click Save

4. Now save file as .tga (.dds will NOT save the alpha channel in PSP)

5. Use your choice of programs to convert .tga to .dds
        a. Convert your .tga as a DXT3 .dds
        b. There should be on option to save alpha channels, make sure the box IS checked

6. ALL DONE :grin:

Talon
 
is there any chance of putting the pictures back in to show the options used in each stage?

as you said there are a lot of options when saving a .dds with an alpha
 
Back
Top Bottom