In this tutorial, we are going to make an advanced brick texture from basically nothing.
We will be using GIMP to create our texture.

I'm not going to explain everything about making a texture. I'm just covering how to create the image for your texture, and I'll show you how to make a normal map for it.  A normal map is a way of making your 2D texture look 3D and "bumpy" at the right angles, and with the right lighting.

So then, Lets get started.

Here is the image we will be using, I took this while I was stopped at a stop light. The camera I took it with took it at 1600 by 1200 pixels, plenty of detail, but for this tutorial I shrunk it down for file size and display.

Now what’s wrong with this image?
Well, there are many things wrong with this image, thats why I picked it for the tutorial. Here is what’s wrong.
1. Well to start the blue lines show that its not lined up correctly.
2. The white line on the left.
3. There are only a few bricks. (This makes it easy to notice it repeating over a large area.)
4. Its too lightly colored, it looks like it was dipped in a gray fog and its true color is gone.
Now the first thing we are going to do is bring this image down to size. Then we will cut out the white part on the left. Select the part you want to shrink and size it down. (Shift+T) Then zoom in to a point you feel comfortable working. Here is what we want.

Next we zoom in and use our lovely scissors. (I)
We want to select small portions of the bricks and then using the Size Tool (Shift+T) and Perspective Tool (Shift+P) We adjust them so that the lines between the bricks are parallel with each other and go straight across the image without bending.
This process may take time, but you will get the hang of it. If you can't get the scissors to cut where you want, just zoom in and move the view around using spacebar.
To finish your cut you have to have the end point on the beginning point, then hit enter. This part is a little hard if you are zoomed out to far.
Note: To deselect a selected area just go into Free Select mode (F) and click somewhere.



Here is my end result, it took me a while but little by little just straighten out each line between the bricks.

As I'm sure you will notice, we get big white lines in our bricks once we straighten the lines out. Don’t worry about it, this is simply another chance for use to learn a few more cool new tools of GIMP's.
Lets zoom in on one of these lines, how about a small one...
The Zooming Tool (Z) zooms in a little each click or you can click and drag a box and then it will zoom to the size of that box. hold ctrl to zoom out.


For this let’s start at the top and move down. The first tool we are going to learn is the Band Aid Tool aka the Healing Tool (H).
What we want to do is hold Ctrl and click part of the brick to the left or right of our brick. That will give us a sample for what we are drawing when we click without holding ctrl.
Using this tool we can go from this...

To this.

You can select different brushes and their sizes, as well as their occupancy in the box below your tool box. The box below the tool box will change according to what tool you have selected so be sure you have the correct tool selected.

Next we will use the Free Select tool (F) to fix up this seam.


Select a thin slice to the right of the white area. You could do this in other ways but this is a good way for me to demonstrate a few tricks.

Now with that selected, copy and paste it to the right. You will then have a seam that looks better but you still get a double image.

Just zoom in and doctor it up using the Band Aid Tool and the Free Select Tool.

The farther you zoom in the better it comes out. However, I think we are already in a rather high quality detail for just a texture. Now, just repeat these steps using the Free Select tool and the Band-Aid tool to fix the rest of the white lines. Its not to hard once you get the hang of it, and most of it is learn as you work anyway.
Here is what I finished with.

You will notice that some bricks are taller than others and may look stretched. If it doesn’t bother you, then leave it. If you want to fix it, you can select that row of bricks, scale the height, then patch it together. It doesn’t matter to me much so I'm leaving it.
What we want to do next is use the scissors (I) to cut out a brick. Once you cut it out, press enter and go to the Free Select Tool (F) and copy-paste it. What we want to do is take the few bricks we have and make more.

As you Copy and paste and fit together you will notice a recognizable features between the bricks, just use the band aid tool on a large scale and you can change things. For example, there is a red brick that has a grayish color in its middle that looks like it go paint spilled on it. you can use the band aid tool to cover it up. See the other 2 red bricks? They were made using that same brick. You could also try rotating them upside down or using the Flip Tool (Shift+F) to make your texture look better.

I'm now going to show you a very cool trick with Gimp. For those of you who already know this stuff you may think I'm a noob but hey, I think its an awesome tool and its cool enough that I should show it to you all.

You may notice there is a brownish brick in that picture. That’s because I changed the lighting settings, To demonstrate this select a brick, any brick you want using the Scissors Tool(I). Next, go up to the Colors drop down menu. There are a lot of different ways you can play with the colors and it would be a good idea for you to play with them on your own but for now we are just going to play with 'Brightness and Contrast'. Just move the brightness bar around a little to change the color of your brick.
See?

Now using color as a new tool, continue on adding more and more bricks to the texture until you think you have enough.
You can also use the Band Aid Tool from brick to brick, even if their colors are different from each other. Like from a red brick to a brown brick. (Although it doesn’t always work.)
About half an hour to an hour later here is what I come out with.

And As I'm sure you noticed my lines aren’t straight. So, I'm gonna fix that. Well, Not really, What I'm gonna do is I'm gonna show you how to make this texture repeatable, and while doing that I'll fix it. What you want to do is select the whole texture and copy-paste it 4 times, lining the corners up in the middle.
For each time you copy-paste it, you will have to right click, go to Layer> New layer.

Now, in case you don’t have the layers menu open.

You can open the layer menu by pressing Ctrl+L. (Heh heh, there may be other ways to open it but that’s the only one I know.)

If you could select all 4 layers the end result is this.
Note: You don’t need to flip them or anything, just line the corners up.

However I don’t know if you can select all the layers at once. I just photoshopped it to look like I had all 4 for demonstrational purposes.
What we want to do now is merge the layers together, simply select the top layer in your layers menu, right click, and Merge Down. Repeat this process until you only have 1 layer left. Wahahaha! *Evil laugh* We've got you cornered now you nasty lonely little layer. All your friends are gone, because you ate them WHAHAHAAAaaaa**


Now then, what we want to do is fill in all the white without touching the outer edges of the image.

Here is what I got.

Now, you should be able to move it to the left copy-paste it and put the copy-paste on the right and they should line up nicely.

So, copy-paste the image and line it up to the right of itself and the bricks should just fit together. The same goes for the top and bottom. Now you can apply the texture to a surface larger then itself without any lines where it connects.

Here is our result:

Okay, Our texture is nearly finished, just a few things left to do.  The following steps are optional.

Creating Normal Maps in GIMP

If you want your texture to have a normal map (and it's a good idea for a brick wall like ours), you'll need to download the normal map plugin for GIMP.  you can get it here:

http://registry.gimp.org/node/69

The zip file has a README.txt that tells you how to install it.  Once you have it installed, restart GIMP, and open up your final image.  click "Filters" -> "map" -> "Normalmap...".  That will open the Normalmap window.

Hit the "3d preview" button to open up another window that lets you check out your texture on different shapes with light shining on it.  Each time you make a change in the Normalmap window the 3d preview window will automatically update, which is pretty useful for creating your normal map.

Back to the Normalmap window... Mostly we will leave these settings as they are, but I do encourage you to try them all for yourself.  I'm not a normal map expert, so I don't know what they all do, but I know what we want is a result that shows the bumpy detail of our texture.  You'll notice that the default (4 sample, 1 scale) doesn't seem to do much, so we'll want to adjust a bit. Our goal is a normal map that is bumpy, but not too bumpy.  If you go for too much detail, the normal map can wind up looking bad in-game.  Sometimes it takes some trial and error until you get a feel for what works.

You'll probably want to click the "wrap" check box, but again, feel free to try it out for yourself.  This attempts to make the normalmap wrap but If your texture already wraps, there shouldn't be much difference.

The "Invert X" and/or "Invert Y" are sometimes needed.  If your bump map seems to bump "out" where you wanted it to bump "in" and vice versa, then make your normal map again, and this time try it with one or both of these options.

The only other options we're going to change for this texture are the filter, and the scale.  If you want to use the 4 Sample filter, then I would bump the scale up to about 6 - 8.  Other wise I would recommend the Sobel 3x3 or Prewitt 3x3 filters with the scale at 1 or 2.

I feel I must say this again: try these things out for yourselves!  If you don't like the result, change some stuff and try again.  Eventually you should be able to get what you want.

Here is one possible result (used Sobel 3x3 with scale 2)

Experiment with Colors

Select your whole image, remember to save, and then mess with the colors settings. You can come up with many different brick textures just by playing with the color settings, If you mess it up to bad just load your last save and start over.

Here are our final products.




And just think, all this was made out of this:

By the way, dont forget — To convert the images into Jpeg just add .jpg to the end of the file name when you save it.

Hope this tutorial helped you out.

If you need further help please contact us on the forums.

No wait, contact us on the forums anyway, we love new members.

catagories: tutorial, texturing, gimp, normal mapping