Site Header for liquid layouts

Open Photoshop and create a new image. I am using 500px x 150px.

Fill the background with the colour of your choice.

Create a bar around 20-30px high covering the whole width. Fill this with a colour that contrasts the background you chose on a new layer.

With the selection still active create a new layer, then go to Select » Modify » Contract and set to 1px. Fill this with any colour of your choice.

You should have something like this:

Create a new selection 1/2 the height of the contracted selection, fill this with white on a new layer and set the opacity to 20%.

Add the text on for your site like this:

Create a new selection with a 45 degree angle on the side. Fill this with a gradient from grey to white.

You can now touch this up with more details, here some more that I made.

The image can then be sliced to be used in a liquid layout.

Here are some examples of the outcome of slicing.

View Examples Here