With abstract layouts being a very hot design trend, creating a usable and trendy background is key.  This tutorial will show you how to create an abstract background in Photoshop and give you the tools to use your imagination and create artsy and innovative layouts.

Step 1
To get started, we will open a new document with the dimensions of your website.  I will use 1024×576 for my image.

Step 2
Create 1 line, using your line tool at 30 px.  If you hold the shift key while making your line, it will be perfectly angled.  Start off the page a little ways and go down past the page a little ways.  The go to your layer bar and copy that layer 3 times so you have 4 layers.  Move the newly created 3 layers over to the right, having each sit right next to the other. Change the colors to whatever your color scheme is.  I am using earthy tones.

Step 2
Create 4 squares with the rounded corner tool, each a bit smaller than the other under the lined pattern.  I used mostly the same colors.

Step 3
Use the Circle Tool and Custom Shape Tool to fill up the background.  You can overlap the shapes, use them sparingly, and be creative with your use of shapes.  I also used the paint brush tool to splatter some paint around the background.  This is the basis of our background.

Step 4
Now we are going to give the background some more definition.  We are going to use a layer mask to add a grunge effect to the image.  Select All by pressing holding Ctrl and pressing A.  This selects everything on the canvas.  I then go to Edit > Copy Merge (Shft + Ctrl + C).  Then open a new document and paste (Ctrl + V).

Step 5
Create a layer mask by clicking the Rectangle  inside a circle in the layer panel.  Create a square that goes completely over the image and color it similar, light color in your color scheme. Make the opacity of this layer 60% or so.

Step 6
Add Noise to this layer by Filter > Noise > Add Noise.  This gives the grungy look to the image.  Feel free to play around with other filters to get the exact look you desire.

The final product:

Enjoy!

Related posts:

1. How to create an elegant web layout in Photoshop
2. Tutorial: Creating a Grunge Effect Using Only Photoshop
3. Essential Photoshop Keyboard Shortcuts
4. Photoshop Displacement Mapping
5. How To Create Professional Looking Website Layout With Photoshop