Professional Header

Open Photoshop and create a new image, 800x150.

Select the gradient tool and draw a gradient of #e2e2e2 to #bababa

You should get this. Now select the single horizontal marquee tool.

Draw a horizontal line across the canvas and fill with black on a new layer. Change the opacity to 50%.

Repeat again on a new layer but fill with white and change the opacity to 30%.

Make it so that the black line is just above the white line. You should get something like this:

Merge the 2 layers and move to the very bottom of the image.

Duplicate the layer by pressing Ctrl + J then press V to select the Move Tool and press and hold shift then press the Up Arrow 3 times:

Insert your logo and add your company text or site name.

Now you need to slice up the image ready for your html.

Using the slice tool create a large slice that covers the whole of your logo area but make sure it doesn't cross the black and white line.

Create another slice to the right but make it very thin 1px or 2px the same height as the previous slice.

Create a giant slice covering everything to the right of the previous slice covering the whole height.

Create a small 1px or 2px slice depending on which width you used before to create the navigation bar background.

Go to File » Save For Web

Choose whatever format you wish to use and press Save. In the Save As Type either select HTML and Images then modify their code to match your needs or create the HTML yourself.

Your Own HTML:

You can easily create the HTML by using a table with 2 rows. Set to 100%. For the first rows background use the first small slice we made and insert the first slice with the company logo and text on. Then for the second row set the background to be the 2nd small slice we made. Then set the height of the 2nd row to whatever the height of the background image is. For the table make sure the Cell Padding and Cell Spacing and Border are all set to 0.

Modifying Photoshop HTML:

Delete the large image taking up most of the right hand side. Then right click in the cell and select Delete Column. Delete the image in the bottom left cell. To the right of that cell we have the image we need for the background of the navigation bar. Click this image and get the url to the image then paste the url in to the background of the bottom left cell. Click the small image again and see what height the image is. Now delete the small image in the bottom right that we just used and merge the bottom row cells to make 1 large cell. In the bottom row set the height to whatever the height of the image was. To the top right there is an image that we need to use for the background for the first row. Using the same technique, take the image url and apply the url to the top left cells background. Now delete the top right image and merge the cells on the top row. Delete any spacers that remain.

As you can tell in this instance creating your own HTML is easier.

This is the code for my preview including the CSS I added.