Dark Web 2.0ish Layout

Create a new document 760px x 900px. This gives us a width that will fit on all browsers 800x600 and higher (unless they have a sidebar on, or the browser window isn't maximized and the large height allows us to see what the page would look like in full.

Fill the background with #1A1A1A.

Create a new layer and make a selection around 20px high that covers the whole width of the page, place this at the top of the page and fill with #68cc58.

Make another selection this time around 10px high covering the whole width and fill with white on a new layer. Place this rectangle at the very top of the page and set the opacity to 40%.

Make another selection 100% width 30px high, fill this with a pattern similar or the same as the image below on a new layer

If you used black on your pattern, press Ctrl + I to invert it to white, if you created your pattern using white leave it at white. Set the opacity of this layer to 10%

You should have something like this:

(This is a cropped image)

On a new layer make another selection this time 100% width 28px high. Fill this with #68cc58. Place this layer below the layer with the diagonal lines.

Add another shine effect like we did on the first bar at the top.

You should now have this:

On your 2nd green bar, go in to Blending Options and add a 1px black stroke.

Now to create our navigation.

Create a new rectangular selection 160px wide, 25px high.

On a new layer fill this with Black (#000000)

In blending options add a 1px white stroke to the layer and set the opacity of the stroke to 20%

And create a shine effect on this layer like we have done for the other 2 layers, this time setting the opacity to 20% as opposed to 40%.

You should have something like this:

Create another selection slightly slimmer than the rectangle we just made, and make it as tall as you want your navigation. Fill this with #0A0A0A on a new layer, below that of the last rectangle layer.

Right click the previous rectangle layer and select Copy Layer Style, then right click the new rectangle layer and select Paste Layer Style.

You should have something like this:

Duplicate all of the navigation and stretch it so you have a larger section for the content, as we used a stroke in blending options the rectangles shouldn't be derranged. Then just select the bigger rectangle and stretch it down for the content area.

You should get something like this, I have added a second bit of navigation:

For the footer we will use the same process as we used for the second bar.

Create a new layer, fill it with the pattern and set the opacity to 10%. Below this layer add a rectangle a couple of pixels smaller in height and fill with #68cc58 and add a 1px black stroke. Then add a shine to it. You should get something like this:

Create a new selection around 10px smaller in width and height that the green bar we used to the footer. Fill this with white on a new layer above all the other footer layers. Center it exactly with in the green rectangle.

Then go in to blending options and add a 1px black stroke and set the opacity of the stroke to 30%.

You should get something like this:

Add your website name and content and you are complete, here is what I got:

Click for larger version