I create all of my mock ups for websites in Photoshop. Basically I lay everything out the way I want, work with my clients to get everything approved and then move on to development. One of the things that I have thought has been very helpful in this process is the ability to create cool backgrounds. I will show you how I created the background for this website and how I applied it.
1. Create a New file in Photoshop that is 20 x 20 pixels wide, RGB.
2. Next, I used the fill tool and fill it with a dark background color.
3.Use the line tool and make a few lines and such. patterns can be tricky, when they repeat you might not get what you expect. You can also create a grid. Make sure the lines are not too contrasting, otherwise the background may look a little busy. This is an easy way to learn how it works with random lines.
4. Once you have finished your pattern, select Edit > Define Pattern
You will be asked to name your pattern.
5. Once you have defined your pattern, all you have to do is apply it to any background. I usually create a back ground for my webpage, however try it with a new file. Create a new file that is 200 x 200 px. For the background layer, make sure to define it as a layer. You can do this by double clicking on it and renaming it. After it is renamed, you need create a layer affect. Do this by selecting Layer > Layer Style > Pattern Overlay.
After selecting Pattern Overlay, you will be prompted to a layer dialog box. Choose the arrow by the pattern and then you will see your pattern in the selectable squares. Select it.
After doing this, your page will have a tile of the pattern you created. This works on any size layer or shape, like a rectangle. Experimenting with patterns is a lot of fun!
As you can see the tiles just repeats itself over an over. There is definitely a science.
Below are 2 few example of cool pattern from Kaliber10000
Speak Visual -
