This is the third section of the 4 part tutorial on how to make a nice interfere. Make sure you have done sections 1 and 2 before you do this one.

The first step is to make a section for your website's title to go it. So, use your rectangle selection tool to select a rectangle shape in the middle of your top title gradient. Fill it with a dark gray.

Now, using the same method as we used on the other navigation bar, make an inner bevel using the stroke option.

 

(If you forget how to do this here is a reminder)

Select your square, go to edit>stroke and stroke it with 1 px and a dark gray, or black. Now make a new layer and stroke it with a light gray. Delete some of the light gray border using the eraser tool so that it the light border is to the right, and bottom, and the dark border is to the left and top. You should have an image like the one below.

Now, I am just going to add a little flavor to the top. I make a new layer and selection a selection as shown below using the polygon selection tool. I them filled it with a dark gray and lowered the opacity to about 50% or less.

You should have an image like the one below.

Now for the harder part. We are going to add some detail to our side bar. Do do this we are going to use the 2 line inner bevel technique. Make a new layer and on it use your line tool to make a short line with a dark gray color with a thickness of 1 px. Zoom in to make things easier by pressing ctrl and +

Make another layer on top of your line and again, using the line tool, make a line with a light gray color and a thickness of 1 px

Position your light line so that it is right below your dark line. You should have an image like the one below.

Now, press ctrl and E to merge your two line layers, or go to layer drop down menu and select "merge down"

Now lower the opacity so that it looks about like the line below.

Now come the fun/hard part. Duplicate your line layer. Use the rectangle selection tool to select and delete some of your line to make it a little shorter. Now go to edit> transform> rotate. Use this rotating tool to rotate your line so that it connects with the other. Keep duplicating and rotating until you have lots of lines!

Mine came out something like this.

I then merged all my line layers, duplicated the layer and placed a duplicate of my lines on the bottom right corner to add a little more detail to the bottom.

Your interface is starting to come together now, your almost done ;)

You should have an image like the one below.

So, its on to the last and final tutorial!