This is the fist part to a 4 part tutorial set that shows you how to make a cool interface for your site.

The first step is to make a new 800x600 image in Photoshop. Fill your bg with a dark gray.

The first thing I did was make a little side bar to the left, maybe to hold small updates, or link buttons. Use the square selection tool to make a rectangular selection of the right side of your page and fill it with a medium gray.

The next step is to begin to make the navigation bar to the left. To do this, we are going to use some gradients. So, make your bg color a medium gray, and your foreground color and light gray. Get out your gradient tool and make a nice gradient by selecting a nice rectangular shape with your square selection tool, and drag the gradient tool to add the gradient. Make sure that the lightest gray section is located to the left. This gives it that beveled look.

Now we are going to continue with the side bar. So, using your square selection tool, select a small portion of your side bar I like have below.

Press ctrl and + to zoom in on your selection. Now we are going to use the gradient tool again. So, as before, take out your gradient tool, selection a d medium and dark gray for your foreground and bg colors and make your gradient. Again, making sure that the lightest potion is to the left.

No, go to select>modify>contract and contract your selection by a few pixels. Now get out your gradient tool again and make another gradient in your new selection. But, this time making sure that the lightest potion is to the right.

Zoom out and your should have a side bar that looks similar to mine below.

Now we are going to use the same method, but this time making it on the top. So use your selection tool to selection a rectangular portion of the top of your page like the picture below. Again use your gradient tool to make a gradient so that the lightest portion is on the top.

Use the same method as before to add the other bevels on the bottom portion, so that your title bar looks similar to mine.

Now, if you like you can select your side navigation bar, copy it and past it on the other side like the picture below, or leave it how it is. Its up to you.

Now you are done with this portion of the tutorial, On to section 2!