Portfolio Web Layout #3

Create a new document 820x700, color background #89887c. Select the rounded rectangle tool and draw out a rectangle leaving about 100pixels at the bottom. Color the rectangle with a gradient using the colors #c4c5b6 & #ebebe2, add a 2 pixel white stroke to your rectangle. You should have something like this.

Select the rectangular marquee tool and draw out to rectangles the same width as your rounded rectangle, color the 1st rectangle the color #f0f0f0 and the second rectangle #e5e5e5. You should have something like this.

Merge the two rectangles together and add a 1pixel white stroke to it. You should have something like this. (see link below).

Select your type tool and add some text to your navigation.

Create a new layer and select the "pencil tool" select a 1 pixel brush and draw two 1 pixel lines in between your text on your navigation. Use the colors #d9d9d9 and #ffffff.

You should have something like this:

Click to enlarge

For this next part your going to need some "nature brushes", a great site for some free brushes is "brusheezy". Once you have your brushes select one and add them above your navigation.

I used a total of 2 brushes to create the effect above.

Now add your site title, I've added a gradient overlay, drop shadow and a stroke, the effects used are very easy to create, all the options are standard apart from colors, just choose what ever works best.

You should have something like this:

Click to enlarge

Now lets add our content boxes, select the rounded rectangle tool, draw out a small rectangle color it with the color #e7e7d8 and add a 1 pixel stroke to it using the color #c2c2b4.

Now duplicate your navigation bar and drag over the top of your content box at the top. (be sure to drag the layer over your content box layer).

Click your content box layer whilst hold the the key "Ctrl" on the keyboard to make a selection. Select the duplicated nav bar layer and goto "select > inverse" then hit the delete key. You should be left with this.

Press "ctrl + t" to enter free transform mode, just make your content box header a bit smaller, and change the layers stroke to the same as the content box. Add more boxes to suit your style following the steps above, You should end up with something like this.

Click to enlarge

And with some content it could look like this.

Click to enlarge