Creating a background image in Photoshop.

We will now create a column bar for the faux columns in our layout.

Open the Start menu, then select Photoshop.

Select File > New.

In the New dialog box, call the image project “columnbar.”

Make the width 960 pixels (to span across the page)...

...and the height 20 pixels.

15. We now have a blank canvas in the shape of a narrow rectangle. We will divide this narrow rectangle into three even sections.

To add color to this bar (or rectangle), click into the color picker on the toolbar...

...then select a light color, such as yellow, for the base color.

Select and hold the gradient tool for the paint bucket to appear. Then select the paint bucket.

Click into the bar, and it changes to yellow.

We now have one narrow bar that is yellow. We will divide the space into thirds by changing the center third of the space to a darker color. Placing this section in the center of the image will divide the bar into three equal areas.

Select File > New.

This time, create an image that is 320 by 20 pixels.

Using the color picker, select a darker color as the foreground color.

Again, use the paint bucket, then click into the rectangle to change the color to the new foreground color.

Select this entire image with the rectangular marquee tool...

...then select Edit > Copy.

Click on the columnbar tab to return to that screen.

Select Edit > Paste.

This pastes the column directly into the middle of the bar.

The bar is now divided into thirds, with the darker section in the center, and the two lighter sections on each side.

First, save the complete Photoshop (or psd) file in your images folder.

Next, select File > Save As to save the file as columnbar.png.

This image file will be used in your Dreamweaver document.

You are now ready to complete the faux columns.