Multi-layer Background for Your Website

Obviously, the first thing we should do is create a new document. For this tutorial I'm using not very big size of 1000x700 pixels. Then fill the canvas with a black color. After that we will create background step by step.

Now create a new one layer, after that get out Rectangular Marquee Tool and make selection as on picture below and fill it with color of #302f13:

Deselect image with Select > Deselect and apply Filter > Noise > Add Noise with a low settings:

Your image should look as mine:

After that apply Inner Shadow layer style to this layer:

Now duplicate this layer with Ctrl+J and move it down, after that actions change the angle of Inner Shadow from -90 to +90 degrees:

Ok, let's make farther steps in creating our website background. Select Rectangular Marquee Tool again and make the selection of about half the remaining black field, then create a new layer and fill it with colors of #2a400f and #1a2f06.

Now I would like to apply some pattern to the gradient line. For this create a new one document sized 3x3 pixels and draw a skew line by using Pencil Tool as on picture below:

Then go to Edit > Define Pattern and save it as pattern. After that go back to our main document and apply the Pattern Overlay layer style to get the next picture:

Looking good! Isn't it? Now select again Rectangular Marquee Tool and select remainder of the black field then create a new layer and fill it with gradient, using colors of #374a20 and #1a2d08.

I think we should add a couple of lines to the background. Now get out Single Row Marquee Tool, create a new layer and fill the selection with a black color. Then move the selection one pixel lower and fill it with a white color. Press Ctrl+D to deselect chosen area and change layer opacity to 20%.

Add one more line at the bottom of the brown field of background.

Ok, we are almost done!

Now we need to add the window to finish off the website background. Start by making a new layer. Now find and get out the Rounded Rectangle Tool, set up the radius about 10 pixels and draw a rounded rectangle onto your canvas, this will be the main window.

If you need you can apply Drop Shadow, Outer Glow, Inner Glow, Gradient Overlay and Stroke layer styles to this layer:

To finish of the background we should add vertical dark lines from the left and right sides of the canvas (we need to add black lines to make website coding more easer). Now create a new layer, after that activate the Gradient Tool and a black to transparent gradient, fill in the work area as on picture below:

That is it for now! We are done with multi-layer website background. Hope this tutorial was useful for you.