Intro
Ever wanted to make your own tiling metal or mix stone surface background that no one else has? I've been to many sites that have some awesome tiling background textures and I always wanted to figure out how to make them but could not find any examples. There are separate tutorials on the web for just making stone/rock surfaces or metal surfaces and tiling textures but never a combination of them both at the same time.

I spent so many hours up late last night drinking a lot of coffee and surfing the web reading up and looking at others design trying to figure out how its done. The way I done it may not be the best way since its long and tedious but if you know a better way share with us . The starcraft 2 website is a good example of a neat tiling metal surface texture.

Note: This is not a step by step tutorial from start to end. I will assume you know how to use Photoshop to a proficient level. I may come back and add more details where I feel is needed but this is just to point out one of the ways of doing it.

Key Points
1. Photoshop filters that tile will only tile if your document dimensions are to the power of 2. 2, 4, 8, 16, 32, 64, 128, 256 etc. Keeping to these dimensions will reduce the amount of offset and retouching of seams later.
2. You need a good surface texture or two ready. You can make your own or use already made ones.

Preview

This is the finish product. Its my first attempt so I'm not fully happy with the texture. I need to learn how to create texture properly so if you have some pointers let me know.

Setup
I am using 512 x 512 size canvas because I can re size it to a smaller size for use later without lose of quality. My final version is about half 256 x 256.

setup your layers like this.

Any BG color you like just so you can see.
your texture layers. I have two of them (Stone and metal). Forget the mask on the stone layer at this time its there just to show you the other texture underneath it.
A empty folder is a good idea because you will be making a lot of copies of the textures stone and metal for use. You stick them in there later for less clutter.
A lines layer or sketch so you can get a quick layout if you like or you can just improvise as you go.

Squares/Shapes
You duplicate one of the texture layers and then add a layer mask to it to the desired shape you like. Add a drop down shadow and bevel to that layer to get the desired effect. A color overlay to control the brightness and darkness for each square.

Copy the entire layer styles for each shape you make and adjust according to your taste.

Note: to make your job easier for removing seams on your initial sketch you should make sure all shape edges are alighted from top-bottom left-right. The more precised they are the easier removing seams is.


Here I've made sure my corners are aligned up so they tile perfectly. I only had to remove seams from the bevel effect.

Removing Seams

Once you have all your shapes define its time to make sure they tile and remove the seams. Because we are using 512 x 512 canvas we use the offset filter in PS to bring the seams to the middle. Offset by 256 will do this to the x and y ordinates. Use the clone stamp tool to remove the seams 50% opacity stamp is what I used and I just go over it a few times if needed to remove seams. offset again to return it to its original layout.

Extra Steps
You can adjust contrast or color as you like. I made a pattern of the original tile, You probably have to flatten all layers so make another copy and do it on that. I had two layers 1 with 1x tile 512 x 512 pattern and another layer with 4x tile 128 x 128. Adjusted opacity so they blending in a bit better and I got a less repeated tiling effect you.