Portfolio Web Layout #3 Tutorial

Create a new document 820×700, 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).

CLICK HERE TO SEE RESULT SO FAR.

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 inbetween your text on your navigation. Use the colors #d9d9d9 and #ffffff.

You should have something like this (see link below)

CLICK HERE TO SEE RESULT SO FAR.

For this next part your going to need some “nature brushes”, a great site for some free brushes isbrusheezy. 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, ive 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 (see link below)

CLICK HERE TO SEE RESULT SO FAR.

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 abit 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 HERE TO SEE RESULT SO FAR.

And with some content it could look like this.

3 thoughts on “Portfolio Web Layout #3 Tutorial”

  1. Very nice one!

    but which brush did you use.. cant find one with those flower things (Used some good-looking grass instead :p)

Leave a Reply

Your email address will not be published. Required fields are marked *