Making a web template in photoshop - Part1

Start off by opening a new canvas in Photoshop, with dimensions around 750x600. Color your background a dark gray, and position another dark rectangle where your header is going to be.

To make the header image I'm going to use one of the tutorials here on voidix to make things easier, I have restated the tutorial here.

Create a new image, 800 x 800. Make your foreground color white and your background color black, and lay a gradient across your screen. Choose Filter > Distort > Wave. Choose the "square" option and click Ok. You should have something similar to the image below.

Now choose Filter > Distort > Polar Coordinates.

Duplicate your layer, and set the mode to "overlay." Now choose Filter > Distort > Twirl.

Merge your layers and color them with whatever colors you like, I chose blue/purple.

Copy the image back into your template canvas, and past it into your rectangular header bar.

Now we are going to create the navigation menu. Select a thin rectangle at the base of your header image, stretching the entire length of the image, as seen below.

Use the gradient tool to make a gray gradient in your new selection, with the light color towards the top

Contract your selection by 2 pixels, and make another gradient going the opposite direction.

We are going to make some buttons inside this new inlay, so use your rectangle selection tool to select a small rectangle within the borders of your gradient. Leave 1 pixel on either of the horizontal sides.

Fill this rectangle button with yet another gradient, going to opposite direction again (light at the top now) and give the button a dark border by choosing Edit > Stroke. Copy this button a few times, and lay them along your navigation gradient.

Add some text to your buttons, and you should have something similar to this.

Now select the gray portion above your header image as shown below.

Fill this selection with another gray gradient, dark on the bottom, light on the top.