This tutorial will teach you how to create the following urban green and brown layout…

Note - Click on the images in this tutorial to see them in full size. Let’s Begin…

Step 1: Create a new document 800×800 pixels. Fill the background with #4f402b (Edit > Fill).

Step 2: Create a new layer (Layer > New > Layer) named “banner”.

Step 3: Make a selection using the Rectangular Marquee Tool of 800×150 pixels at the top of your document.

Step 4: Set your foreground colour to #85c9fa, and your background colour to #97c000. Make a gradient from the top of the selection to the bottom.

You should now have something like this…

Step 5: Create a new layer (Layer > New > Layer) named “title bg”. Fill a selection on the left hand side of your banner with #ffffff.

Step 6: Lower the opacity of the layer down to 5%.

Step 7: Add an outer glow blending option with these settings :

.

You should now have something like this…

Step 8: Add some text for your portfolio’s title, colour #ffffff.

Step 9: Add a subtitle text, colour #ffffff. Change the layer’s blend mode to Soft Light (you can do this from the layers window).

You should now have something that looks like this :

Step 10: Create a new layer (Layer > New > Layer) named “links bg”.

Step 11: Using the Rounded Rectangular Marquee Tool again make some rounded rectangles in the bottom right of your banner and fill with #ffffff.

Step 12: Lower the opacity of the layer to 10% and duplicate the layer a couple of times. Move the duplicates across so you have a few link backgrounds. Add some text on top of the link backgrounds.

You should now have something that looks like this :

Step 14: Create a new layer (Layer > New > Layer) named “main bg”.

Step 15: Using the Rounded Rectangular Tool make a selection like below, fill with #ffffff. Lower the opacity to 5%.

Step 16: Create a new layer (Layer > New > Layer) named “latest works”.

Step 17: Do another selection on the right hand side, fill with #ffffff. Lower the opacity to 5%.

You should now have something that looks like this : 

Step 18: Create a new layer named “brushes”. Set your foreground colour to #4f402b.

Step 19: Brush around the main content and latest works areas with a custom grunge brush or something similar. Add header text to the two content boxes.

Step 20: Add some fill-in text for your main content area, colour #ffffff, opacity of the layer 70%.

Step 21: Add some images on the right hand side content box with a couple of descriptions.

Finished! You should have something like my layout I posted at the top of this tutorial.