Creating Textures With Photoshop

[tweetygwee]

I’ve noticed there isn’t much in the way of texture creation tutorials for people who have image software, so here goes :D Please tell me if this is useful to you, if not I’ll shut up! This was done using Photoshop CS2, but it may be useful for people with other software.

I have got Luke Ahearn’s excellent book called “3D Game Textures using Photoshop”, you may want to look into that as it really is helpful. I got my texture-creating experience from that book!

I’m not going to make specific tuts on how to create every surface under the sun, these are just general examples to get you texture-creating!

Some general tips:

1. Try to work with a big 512 by 512 canvas, as you can resize with T-builder. Save as PSD format (or the equivalent for your program). This makes it easier to edit and you keep layers in tact.

2. Remember that T-Builder supports drag-and-drop for image files from windows explorer! I remember searching through all those Legend textures using T-builder’s “load source file” and crashing my computer before I discovered this.

3. Save different edits of your textures as BMP or JPEG on highest quality. If you want, you can just have everything as PSD, since T-builder supports the format.

4. Textures are usually done with the help of filters and layer styles. Remember that filters are permanent (there’s always undo though!) and layer styles are always editable.

Wood and Panelling

For this you need a “Fibres” filter. I don’t think earlier versions of Photoshop have it, unfortunately, but you might be able to find a custom wood filter on the net.
You also need to be familiar with the pen tool. You should be able to find some tuts for it again, on the net.

1. Open a new 512 by 512 image. Press Ctrl+Shift+N to create a new layer, and call it “Wood”
2. Fill the layer with brown (I used 92,46,12).
3. Switch your foreground and background colours by pressing X (keyboard) and change your foreground colour to black.
4. Go to Filter – Render – Fibres. I used Variance 9, Strength 6, and clicked Randomize a few times to get what I wanted. Then press Ctrl+Shift+F to bring up the Fade window. This fades your filter only directly after you applied it. I set the opacity down to 30%. You can also change the blending mode of the fade in this window, but I found leaving it on Normal mode was best for this.

http://i169.photobucket.com/albums/u213/tweetygwee/after4.jpg

5. Do another new layer and name it Panel.
6. Go to Edit – Preferences – Guides, grid and slices. Put a gridline every 32 pixels and 1 subdivision. Toggle the grid on and off by using Ctrl+’ (apostrophe key, also the @ symbol)
7. Select the pen tool from the left panel.

-click 3 across and 1 down from top left
- click 3 across and 1 down from top right
Read all of the next step before continuing, you can’t let go of the mouse to check back here!
-click 1 across and 3 down from top right and drag 2 grid units to the right, making that curve.
-click on the middle point (1 across, 3 down) again and drag the outlying thingy in, so your path looks like this:

http://i169.photobucket.com/albums/u213/tweetygwee/pentut.jpg

-now click 1 across and three up from the bottom right

Repeat the same method for each corner, visualising where to click and drag each time. You always have the undo tool! It should now look like this:

http://i169.photobucket.com/albums/u213/tweetygwee/pentut2.jpg

Don’t worry about the lines the pen tool creates, they don’t show up on the final image.

8. You can now turn the grid off. Right click, still with the pen tool and select “fill path” just hit ok, the colour doesn’t matter, and you’ll see why in a minute!
9. Look at the Layers window, bottom right. “Panel” should be selected. On the options above, put the Fill to 0%.
10. Bring up the layer styles by double clicking the panel layer.
11. Tick and select Bevel and Emboss. Use these settings (and/or your judgement!):

Inner Bevel
Chisel Hard
Depth: 100 %
Direction: Down
Size: 10
Soften: 1

Down where it says Highlight mode and Shadow mode, change these to 40% and 50% respectively. I left the modes as screen and multiply, but you can change them as you see fit.

12. Tick and select gradient overlay. Use these:

Your default gradient style should be the black to white one, but select it if it isn’t.
Opacity: 30%
Change the blend mode from Normal to Overlay. See the difference?

The panel so far:

http://i169.photobucket.com/albums/u213/tweetygwee/panel.jpg

Save as a PSD file! Tomorrow, I’ll show you how to make more varieties on this panel base and explain how to sort out those textures that just won’t tile!

[Uvavoo]

Great tutorial. I hope you keep adding to it 20g. Thanks.

[Anajrob]

This is very helpfull. Thank you. :) :tmb:

[tweetygwee]

Whoops, completely forgot :o . I'll be adding to it in the next few days. Thanks everyone. :)

[sharalex]

I hope there are more in the pipeline.

[tweetygwee]

Update! Thanks for the feedback :hug:

--------------------------------------

So, we now have a nice wood panel, which we can manipulate how we like. In this section I will show you how to add dirt and chips, as well as the skill of creating many different textures from one PSD file by showing or hiding layers.

1. Press Ctrl+Shift+N to create a new layer and name it “Dirt”.
2. Press D on your keyboard to set your colours to black and white. Fill your new layer with black using the paint bucket.
3. Filter – Render – Clouds.
4. Filter – Render – Difference clouds. You can repeat this filter using Ctrl+F a few times to get a stronger effect.
5. Filter – Noise – Add noise. Add what you feel, I added 10.
6. Fade this layer’s opacity to 20 % in the layers window (bottom right of screen) and set the Blending mode (dropdown menu where it currently says Normal) to Multiply.

http://i169.photobucket.com/albums/u213/tweetygwee/2-3.jpg

To see the difference with and without this layer, you can use the eye icon (see below).

http://i169.photobucket.com/albums/u213/tweetygwee/1-3.jpg

7. Create a new layer and call it “Weathering”.
8. Fill the new layer with black (in theory it could be any colour, as the filter – render options are what determines the colours of the layer)
9. Make sure you have black and white as your colours (press D if you don’t) and go to Filter- Render – Fibres. Variance 11, Strength 4, and hit randomize to get the effect you want.
10. Set the opacity of the layer to 20%, blending mode Soft Light.
11. Filter- Brush Strokes- Spatter. Use the default settings.
12. Filter – Artistic – Sponge. Put the brush size down to 1.

This gives the texture a weathered look, useful if this panel is in a ruined building. Next, we will add chips in the wood. If the other effects are putting you off, you can turn them off using the “eyes”.

13. Fill the layer with black.
14. Filter – Noise – Add Noise. Amount: 40.
15. Filter – Artistic- Cutout. Settings from top to bottom: 4, 3, 1.
16. Select the Magic Wand tool (or hit W) and set its tolerance to about 5. Select the grey baking portion and press delete to clear the layer except for the chips. Press Ctrl+D to deselect.
17. Set the “Fill” of this layer (not opacity!) to 0%. What’s the point of that, you may think, but trust me and continue!
18. Double click the layer in the layer window to bring up the “Layer Style” window.
19. Bevel and Emboss (change the following, keep everything else default):
Inner Bevel
Chisel Hard
Direction: Down
Soften: 2 pixels
Highlight Mode – Opacity 45%
20. Take the opacity of the layer down to 65%
21. Select the Eraser tool (or hit E) and set the size of it to about 24 pixels. Erase chips where you want, remembering to leave more near the bottom where the wood would have naturally taken more damage.

That’s it! The great thing about layers is that you can now go to them and change their styles, opacities or even visibility to create a variety of textures from one .psd file!

The texture with all three "effect" layers applied:

http://i169.photobucket.com/albums/u213/tweetygwee/3-2.jpg

[Los Angeles]

Please don't shut up! :D This tutorial is very helpful^^

[Legend Killer]

Nice tutorial tweetygwee. I am going to try this out when I get a little time here :tmb:

[tweetygwee]

Part III: Tiling Textures

Well, here I am with another tutorial! :) Before I start, I’ll just remind everyone I’m using Photoshop. These tutorials should be okay for GIMP as well, but a lot of what I say (especially keyboard controls and tips) is Photoshop-specific.

Getting textures to tile properly is important. There are several ways to achieve it, I’ll go through a couple here. Ideally, a texture that you want to apply over a large area should be quite regular, with no bright or dark spots. You can get textures to tile well, but still have a distinctive pattern which is noticeable.

http://i169.photobucket.com/albums/u213/tweetygwee/Badtexscreen.jpg

Here is a bad texture (intentionally bad for this tutorial, of course!) where you can see a seam, and it has harsh shadows and highlights making a pattern very obvious. It may not look terrible, but that’s probably because I’ve put it in a well-lit room of the Karnak level. Good lighting can counter bad texturing slightly, although I wouldn’t recommend that kind of dodgy level building. :p Now on to good tiling!

The offset filter

The offset filter is probably the most famous method, but not always the best.

Offset filter in Photoshop: Filter > Other > Offset
And in GIMP: Filters > Channel ops > Offset (as a google search tells me, I don’t have GIMP myself)

Start by downloading (right-click) this quickly slapped together rock texture I made using clouds, lighting and a few other filters, or just use your own currently non-tileable texture.

http://i169.photobucket.com/albums/u213/tweetygwee/Rock.jpg

Tip 1: This is a 512 by 512 texture. It’s generally best to work with big images, save these as PSDs (or GIMP’s native format, whatever that may be) to preserve layers. When you want to export for T-Builder, for example, just scale the image down (Ctrl+Alt+I in PS) to 256 or 128 and save as a JPG on highest quality, or BMP in OS format (T-Builder doesn’t like windows BMP format for some reason). Of course the texture can be scaled in T-Builder, so I only do this when I work on a really huge texture, as these take forever to select in T-Builder.

Tip 2: Other than putting a texture a few times over in T-Builder to see if it tiles well, Photoshop has a tiling feature. Select all (Ctrl A) and go to Edit > Define Pattern, then open a new image (1024 by 1024, maybe). Now use the fill bucket, and on the top toolbar change ‘Foreground’ to ‘Pattern’. Find your pattern at the end of the list and fill the image.

On to the method:

1. Go to Filter > Other > Offset, and offset it by half in each direction (my image is a 512 pixel square, so you would use 256 in both fields). The offset filter does what you would expect from the name – it moves it a certain number of pixels and whatever goes off the edge appears on the other side. So now, we are seeing the 4 corners of the image as if we are looking at the part where 4 of the same texture tiles meet in game.

http://i169.photobucket.com/albums/u213/tweetygwee/offsetguide.jpg

2. There are strong seams, so we need to get rid of them. Use either the clone stamp or healing tool to get rid of them.

http://i169.photobucket.com/albums/u213/tweetygwee/healing-clone.jpg

They both work by holding alt and clicking on an area of the image you want to sample from. You then paint along the seam with it, and the source marker will move with you, showing you what is being copied. I found Healing better for this image, as it automatically corrects lighting for you, but it’s not always best. These tools take a bit of practice, and you’re probably better off looking at your image program’s manual to get the hang of them. Do your best and you should end up with something like this:

http://i169.photobucket.com/albums/u213/tweetygwee/Rockhealed.jpg

Tip 3: When working with brushes, erasers, cloning tools etc. the size can be changed with the [ and ] keys.


3. Offset again by the same amount and you’re back to something similar to the original, only now it will tile! There’s still a noticeable pattern, but I’ll cover this issue in the next tutorial. Save this and get the original image back. Now for 2 more tiling methods.

http://i169.photobucket.com/albums/u213/tweetygwee/tilingrock.jpg

Offset method 2

Similar, this, but you don’t necessarily have to use the clone/ heal tool.

1. Go to the layers panel, right click and duplicate your layer.

2. Offset as you did before.

3. Add a layer mask (Layer > Layer Mask > Reveal all)

http://i169.photobucket.com/albums/u213/tweetygwee/layermask.jpg

4. You are now working in the layer mask. You can switch between this and the normal layer by clicking as in the above screen.

5. Anything you paint black in this mode disappears, anything you paint white comes back again. Paint with black along the seam, revealing the un-offset layer below. You should be able to make this look good, perhaps by decreasing the hardness and opacity of the brush so the layers blend better.

6. Now flatten the image (Ctrl+Shift+E) and if you have a noticeable difference where you removed the seam, you can always use heal and clone. That’s it!

Copying edges method
This is in my opinion the best method. With the other methods, if you rotate the texture, it won’t tile. This method uses one common edge for all four sides of the texture, so any amount of flipping and mirroring you do in the editor won’t be a problem. Here’s another texture to use, this time off an image search. This type of simple texture with few harsh bits that stand out is good for tiling.

http://i169.photobucket.com/albums/u213/tweetygwee/sandtex.jpg

We want to copy one edge, so I’ll go for the left side because it’s the simplest.

http://i169.photobucket.com/albums/u213/tweetygwee/diagram.jpg

1. Select about a 20-30 pixel wide piece at the edge using the marquee selection tool. Don’t worry about exact amounts, look at the diagram for guidance.
2. Copy with Ctrl+C and paste with Ctrl+V three times. This creates Layers 2, 3 and 4.
3. On the layers panel select layer 2. Use the move tool (next to the selection tool) and click on the central crosshair, which will take you into the rotate and flip mode, rather than move mode.
4. Type 90 into the set rotation box (on the top toolbar with a little angle symbol). Now move it up to the top of the image, where it will snap into place (if not, View > Snap to > All does the trick).
5. Select layer 3, and flip this one horizontally (click, then right click on the central cross and click Flip Horizontal). Move this over to the left side.
6. Now layer 4. This is the same as step 4 but we rotate by -90 degrees, or 270 if you like as it’s the same thing. Move this to the bottom.
7. We have a few seams:

http://i169.photobucket.com/albums/u213/tweetygwee/seams.jpg

but we know what to do by now surely? Flatten the image, and then clone and heal away!

We have a texture sharing the same edge all around, so test this in the editor, flipping and rotating, and still having a perfect surface!

http://i169.photobucket.com/albums/u213/tweetygwee/tilingsandscreen.jpg

Hopefully this has given you an overview of texture tiling, an important factor for creating your own textures or using internet images. You can find a good tutorial on this subject of tiling and terrain here (http://www.gamasutra.com/features/20011024/peasley_01.htm). In the next tutorial (when it happens) I’ll collect together a few tips and useful features, like blending layers and using filters to create materials.

:cool: