Step 1:
To start off with create a new document (Fill > New) 800 by 800 pixels. Fill the background layer (Edit > Fill) with the colour #252913.
Step 2:
Next up create a new layer (Layer > New > Layer) and make a selection of 1000 by 20 pixels at the top of the document and fill the selection with a gradient using the Gradient Tool from #a3c109 to #6b7e0a.
Step 3:
Thirdly we are going to be adding a navigation background so on a new layer make a selection of 800 by 90 pixels underneath your top bar. Fill the selection with a gradient from #3b411e to #252913.
Step 4:
Next up we are going to be adding some navigation text links, so using the Text Tool add some text. And give a little outer glow effect (Layer > Layer Style > Outer Glow) to the layer with a dark colour.
Step 5:
On a new layer below your text layer, using the Rounded rectangular Marquee Tool (radius at 15 pixels) make a selection behind one of the text links and fill with a radial gradient from #a3c109 to #6b7e0a.
Step 6:
Now we are going to be adding a banner for the web layout. So create a new layer and using the Rounded Rectangular Marquee Tool make a fixed sized selection of 600 by 150 pixels under the navigation. Fill the selection with a gradient from #a3c109 to #6b7e0a. Apply the following blending options to this layer:
You should now have something looking like:
Step 7:
Add some text using the Text Tool, and add an outer glow effect like we did before for the navigation text links.
Step 8:
Next up we are going to be making the content header, so on a new layer make a selection of 390 by 30 pixels in the center underneath your banner. Fill the selection with a gradient from #a3c109 to #6b7e0a and apply the same effects as we did for the banner (you can simply copy and paste the layer styles in the layers window).
Step 9:
Now add some text for your header (using the same fonts as we did for the banner).
Step 10:
Now for the content area. Create a new layer and using the Rounded Rectangular Marquee Tool again make a selection of 600 by 350 pixels and fill with a gradient from #a3c109 to #6b7e0a from the top left of the selection to the bottom right. Add an inner glow (Layer > Layer Style > Inner Glow) to this layer using the settings below.
You should now have something looking like:
Step 11:
Now head over to lipsum.com and grab some fill in text. Using the Text Tool add in some lorem ipsum into your content box. The font settings that I have used here is Tahoma, Regular, 14pt, None, #34391c.
Step 12:
Duplicate your content header layer and move it below your content box. Do the same with the content header text and rename it. Now you are complete :)
