Q.

How did you create the graphics for your dhtml tabbed interface in the Dreamweaver Magic book?

I've finally realized (sometimes you need to hit me with a hammer) that if I don't publish a tutorial on how I did the tabs for the Tabbed Interface chapter of the Dreamweaver 4 Magic book, I'll be haunted by requests forever. :-P

All new projects in Fireworks begin with...

The Canvas

Open a new canvas in Fireworks 4 (File > New). Enter 640 for Width and 45 for Height. For canvas color, select the Custom radio button and click inside the color box to open the custom color palette. Click on the #999966 color chip. Note that this is the same Olive Drab color used in the embossed tile tutorial.

Creating a tab

Step 1: Drawing the Base Shape

Click on the Rectangle tool in the main toolbox to activate it. Drag out a 102 X 25 pixel rectangle.

Set the fill of the rectangle to #B5B582. Open the Stroke panel and set the Stroke color to #D3D3AB. For Stroke type, choose Pencil > 1-Pixel Soft. The placement of the rectangle on the canvas isn't important just yet.

Step 2: Distorting the Rectangle

Click and hold on the on the Transform tool (main Toolbox) until the other Transform tool options fly open. Select the Distort tool.

When you activate the Distort tool, a black box with handles will appear around the selected rectangle. Move the cursor over the top, right handle until you see the cursor change to a double-headed arrow.

Click on handle and carefully drag toward the left to create an angle. The resulting shape should look something like this one.

Step 3: Positioning the Tab

If the tab image isn't still selected, click on it. Open the Info panel and, using your arrow keys, nudge the tab to the X: 10, Y: 14 position.

Next: Creating the Tab Array-->

Back to top