Content Area Header Bar

Posted on Sat, 2005-12-10 19:27

Content Area Header Bar

This tutorial with guide you through how to make a bar for a header to the content section, but can also be used for other section headers. This tutorials takes in to account that you have a reasonable knowledge of Photoshop:

View Example

1.

Make a new document. For this tutorial i am using 80x30 with a resolution of 72 pixels/inch with colour mode set to RGB Colour 8 bit. You may feel that a width of 80px is a bit small for the content area header, but once it is sliced and in dreamweaver, we can make it stretch to whatever size we want.

2.

Right click the background layer and click Layer from Background.

3.

This will create a new layer from the background and delete the background. This is to make the bar transparent from around the edges. Alternatively you can fill the background which ever colour you will be putting the bar on top of and create a new layer.

4.

Using the rounded rectangle tool with a radius of 10px. Draw a rectangle that takes up most of the canvas.

5.

Rasterize this layer
6.

Right click the rasterized shape and click Blending Options

7.

You can use these blending options but with different colours if you wish:

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

8.

Click OK

9.

Now select the slice tool and slice it in to 3 parts like this:

Make sure you stop the edges after the bend has finished so that the middle is constant.

10.

Save as PNG 8-bit and set to HTML.

11.

Now in Dreamweaver, set the middle image, to the background image of the table and delete the image.

12.

For the 2 ends, set the width of the table cells to the width of the images.

13.

Now change the width of the whole table to something like 500

14.

The middle should now of stretched out with the sides on perfectly.