Photoshop/CrazyBump/Maya - Hand Painted Tileable Texture Tutorial

This tutorial sets out to guide you through a process of creating hand painted tiling textures for use in game engines.  The tutorial will primarily be in Photoshop, but will also be using CrazyBump for Normal and Specular maps.  I have chosen CrazyBump over other applications such as NDO because it is simple to use and runs stand alone.  I find that the results are usually better with NDO but because it is a photoshop plug in I often have difficulties in getting it to run properly.  However as the differences in work flow is similar between the applications you can apply this to whichever normal map creation software you prefer.

Step 1 - Reference
To start with try to get some idea of the texture you wish to create, if it is for a wall for instance, what is the wall made of?  For this one I have chosen a plaster wall that is damaged and showing underlying brick.  The image I have chosen is from CG Textures and is available here:
http://www.cgtextures.com/texview.php?id=71118&PHPSESSID=c3b150v7mbuor09m7kpqvncdl3

Once you have gathered your reference open up Photoshop and open a new document, for this one I am going to initially start with 1024x1024 sized texture but then raise it up to 2048x2048 for the final image by duplicating the texture which will allow me to check it tiles correctly.

Open up your reference and put it up beside your new image so that you can quickly refer to it.

Step 2 - Basic Form and Colour

Video sped up to x4

To get started I pick a dark shadow colour and fill the image with that.  I then start laying out the basic forms of the brick work in a new layer, I will paint the plaster over these bricks, but its easier than trying to paint bricks in the gaps.

When I've covered the screen I do an Offset to make sure they tile, this is found in the Filter menu under other, offset...

In the offset window enter values for half of your image size for both Horizontal and Vertical, in this example that would be 512 for both values.

I then paint out the edges that appear and repeat until no edge lines appear with an offset.

When I have the basic brick forms I want I select them with CTRL + A and transform (CTRL + T) then to fit one quarter of the image.  I then Switch to the move tool (V) and holding down Alt when I click to drag creates a duplicate of the brick work, which I move into position to fill the image with the now smaller bricks.

I ended up with a slight line running through the middle so I clean this up with the brush tool (b).

When I am happy with that I create a new layer and start blocking in the plaster, trying to capture the feel of the plaster on the reference image without copying it directly.

Step 3 - Normal and Spec Map Creation.

Video is sped up to x2

I am now ready to generate the normal and specular maps.  It may seem early in the process but I have noticed that applications such as CrazyBump seem to get better results with base colours rather than the fully rendered diffuse, as things like added rim light will stick out in the normal.

As the image is not fully rendered at this stage I wanted to add some noise to the image to give some variance in the normals.  To do so I created a new layer, filled it with the paint bucket tool (G) in the same colour as the plaster.  I then add a difference cloud by going filter, render, Difference Clouds.

Now I set the layer type to multiply so that it blends with the image, and adjust the opacity more to my liking.

I then save the image out that will be used in CrazyBump.  In the video I save as a JPG format, but after getting some artifacts in the final image, I suggest saving as PNG for better quality.

Open up CrazyBump and click the open button.  Select open photograph from file, and then select your image and click open.  Select the shaped map that you want (in this case the one with the bricks coming out rather than recessed).  As this is a wall texture and will be displayed on a flat surface I change the preview sphere to a Cube, and start tweaking the settings.  Once I am fairly happy with it I check out the other maps.

I save out the normal, occlusion and Specularity maps (again save these as PNG unlike in the video, I realised this mistake at the end) and close CrazyBump

Step 4 - Brick Shading

Video is sped up to x6.5

I'm now going to refine the brickwork a little more, but I don't want to waste time detailing bricks that are not going to be visible, so I lower the opacity on the plaster layer so I can see the bricks more clearly while still seeing where it sits.

I then go through and start adding a dark edge around the bricks, and then start defining the faces of the brick, and then with a lighter colour start to add some rim light to the front face of the brick.

To add some variety to the brick work I then some groups of brick and using the Hue/Saturation Adjustment (CTRL + U)  and ticking the colorize tick box adjust it to a desired colour.  Repeat for a few different colours, and then add a little refinement to those.

Step 5 - Detailing the Plaster

Video is sped up to x6

Going back now to the plaster layer, I turn the opacity back up to 100% and Selecting the hard round at a small brush size (around 3pixels) I start adding an edge around the plaster, as well as some cracks.

I then switch to a larger Soft brush and start adding some shadow round those edges, and on the plaster.  I then reduce the size of this brush and with a light colour start adding rim light to the plaster. and switch to a light blue colour and a slightly larger brush continue to add light around those edges.


Step 6 - Detailing the Brick

Video is sped up to x6.5

Now I go back to the brick layer, after reducing the opacity once more on the plaster.   and I go through and add rim lighting to the brick.  with the different coloured sections I try to add bounce light from the different colours around the bricks, for example the bluish grey bricks get some orange around them, and the orange bricks some blue.

At the end of this I do another offset, just to check that they are still tiling correctly.

Step 7 - Polish and Ambient Occulsion

Video is sped up to x8.75

Going back to the plaster level and setting the opacity back up I notice that when zoomed in I missed detailing in a few sections of plaster, so I go and correct this now.  When that is done I do another offset and make sure its still tiling.  As I thought the shading need to be corrected, I do so, and then offset back.

I'm now going to create a custom brush to add some detail to the plaster, to do so I create a new image (CTRL+N) with the dimensions of 512x512.  Using both soft and hard brushes I create a quick paint of bit of stain in the wall with a few cracks.  I then use the Texturizer in the Filter gallery to add some sandstone texture to the image.  I then use a soft eraser to fade some of the edge, and using the wand tool I click on the wight and then invert the selection (Ctrl+ Shift I) and then click the refine edge button on the top bar.  In this window I add some feathering to the selection.   I now create the brush preset by going edit, Define Brush Preset... I then name the brush and click ok.  closing the image I now go back to my texture and select my brush preset.

Before using it however I need to set up the brush.  I turn on shape dynamics and change the size jitter from pen pressure to off, add some angle jitter, turn on Colour Dynamics, and add some hue and saturation jitter, turn on transfer and set opacity jitter to off and flow jitter to pen pressure.  Basically just adjust settings until you are happy with the brush, then click on the brush presets panel to re-add the brush with these settings so that reselect it without having to redo these settings.

As I'm planning to start with the brush in a large size I use the wand tool (W) to select the empty area in the middle and then reverse the selection (Ctrl + Shift I) so that I can preserve this area.  I then start brushing over the plaster.

Then I go back over the brick work, just refining it a bit more and then move back to the plaster layer. This is the polish stage, so its really just adding or fixing elements that stand out to you.

Another offset and correction to maintain the edges.

Once I'm happy with that I go back to the brick layer and create a duplicate of that layer, I then use the texturizer in the filter gallery to add some texture to the brick, and then adjust the layer type until I am happy with the effect, in this case I went with lighten.

I now save out the PSD file and then flatten the image.

I open the Occulsion map we saved from CrazyBump and then Paste it into a new layer, and set this layer to multiply.  I flatten the image once more and then flatten it once more.

Step 8 - Resizing maps to 2048x2048

Video is sped up to x4

Now you don't have to do this step depending on your needs this texture is fine now to use, however I like doing this step to check the tiling is working correctly and allows you to use the texture at a higher resolution.

To do so we go to image, Canvas Size... (Alt+Ctrl C) and add the new size as 2048x2048 Pixels, before hitting ok, click one of the corners in under anchor and click ok.

Then using the move tool (V) and holding down ALT to create a duplicate, then move it into position and fill the image.  Note that as the canvas size has filled the background when you duplicate it will take some of that background, in which case I find it easier to go across, then diagonally down, then across again, as this prevents having to adjust the layers.  I then merge down all the layers.

You can also break up the repetitive nature of the texture at this stage if you like by changing the middle using the clone tool and brush, if you avoid the edges it will still tile correctly.  I'm going to leave it in this case however and so I save the image out as a PNG file.

I repeat this process for the normal map and Specular map.  However I find that the specular is appearing somewhat pixelated, so after merging the layers I apply a little Gaussian blur to the image to soften this, and then use the smudge tool with my textured brush to smooth out the image.

Then with a small brush I go across the image adding scratches and marks to the edges.  This can be done before resizing to make it quicker, however in this case I decided to do it in the larger size so that it would break up the repetition in a subtle way.

Going back to my textured brush I go over the specular making darker patches, and then save the file.

Step 9 - Applying to Mesh

Video is sped up to x2

Going now to Maya, I create an Plane from the polygons bar, and scale it up.  I open up the UV Editor and check that it is filling that square.  Satisfied I right click on the plane and select Assign new Material, I select a Blinn and turn off the reflectivity, and then add the diffuse to the colour.

Going back to the material attributes I add the Normal Map to the Bump Mapping, and the Specular to the Specular Colour.

I found the normal map was appearing a bit stronger than I like so adjusted the bump depth.
You will probably notice at this stage in the video that the bump map makes it a little pixelated, this was due to me saving the normal map as a JPG by mistake.

I then tweak the blinn settings a little, until I'm reasonably happy with the result, and in this case I come to the conclusion that my Specular map is too bright.

Step 10 - Tweaking the specular

Video is sped up to x3

Back to photoshop I bring up the specular map, and open the Brightness/Contrast window, through image, adjustments, brightness/contrast...  I adjust that slightly and then go to images, Adjustments, Levels... (CTRL + L)

I adjust the Light and dark scales, but in the end adjust the mid value towards the light to make the image darker.

I then save and apply it in Maya.  Moving it around I'm more happy with this version, and with that, the textures are finished.