As a writer and a trainer, I am frequently asked how to make the popular curved navigation graphic. You know the one, top banner area, side bar with an inside curve (see Figure 1). Using Fireworks you'll be amazed at how simple this can be. You'll learn how to make the curve in two different ways. One way is automated and the other is not. By learning how to do it yourself, you'll learn a technique that will allow you to make any shape, not just the inverted L.

Once you learn how to make the graphic, then what? What do you do with it? Export it from Fireworks and use it as a Web page? You could, but please don't even think of doing that. Although Fireworks can generate HTML code, it is not what Fireworks does best. Fireworks is a graphics editor, so let's use it to its full potential. Once you learn how to slice, optimize, and export the graphic, you'll then learn how to put it together in Dreamweaver.

Curved Navigation Graphic

1.  Choose File>New. In the New in Document dialog box, type 700 in to the width field. In the Height field, type in 400. For the Canvas Color, click on the radio button next to White to select it. Click OK.
2.  In the Tools panel select the Rectangle tool. Click on the canvas and drag on the rectangle tool to draw a rectangle, don't worry about the size.
3.  In the Property inspector (below the canvas area), change the width to 700 and the height to120. Click in the Fill color box (which has a paint bucket) and use the dropper tool to select the color you'd like. You can even select a color from a graphic on your page which is a great way to get colors that are complementary to your design images.
4.  Draw another rectangle and in the Property inspector, change its Width to 120 and Height to 400. I'm using green so you can better see what I'm doing.
5.  Place the rectangles together to form an upside down L shape (see Figure 2).

Note: I am using two different colors so you can identify the objects more easily.

6.  Shift+select both rectangles.
7.  Choose Modify>Combine Paths>Union. The shape is now one shape instead of two (see Figure 3).

Note: The shape on the bottom will become the color of the new combined shape.

You've just learned how you can combine any shapes together using the Union command. With this technique you are not limited to the same size for the top and the side. You are also not limited to rectangles. The easy way to make a basic L shape with sides and top of the same thickness is to use a Smart Shape.

Smart Shape
As an alternative, you can make the basic L shape using one of the smart shapes that ships with Fireworks.

Note: In the flyout menu of the Rectangle tool, you'll see the L-Shape tool. Select it and drag it onto your canvas. Notice the yellow diamonds. If you drag on the one on the top end or the bottom center, it will make the side or top longer. To increase the width of the top and side, drag on the yellow diamond on the bottom right side of the left bar.

You can use either method of producing your navigation shape before proceeding to the next step.

Cookie Cutter
1.  Select the Rectangle tool and drag a rectangle on the canvas.
2.  In the Property inspector locate Roundness and type in or select a setting of 50. Set the Width to 650 and the Height to 400.

Note: I made my rounded rectangle gold so you could see it more easily; any color will work and will have no effect at all on your graphic. This graphic will be used as a cookie cutter.

3.  Position the rounded rectangle into the corner of the L shape. Place it so that what you see beyond the rounded rectangle is what you want. Whatever is below this "cookie cutter" will be removed (see Figure 4).

Note: Be sure that the curve of the rounded rectangle clears the end of the top of the shape and the bottom of the side shape. Otherwise you won't get a nice straight edge. If it doesn't, make your rounded rectangle larger.

4.  Shift+select the L shape and the rounded rectangle; it doesn't matter which object you select first.
5.  Choose Modify>Combine Paths>Punch. You now have an L shape with a curved inside corner (see Figure 5).
6.  In the Property inspector, click the plus sign next to the word Effects and select Shadow and Glow>Drop Shadow. Change the Distance to 10 and the Opacity to 50%.
7.  Press Enter (Return) to activate the change.
8.  Save your file. You are now ready to slice, optimize, and export the graphic for use in a Web page.

Slice, Optimize, and Export
1.  Select the Slice tool and draw a slice over the top left corner. Be sure you get the entire curve (see Figure 6). You'll see a light green overlay.

Note: In the Layers panel there is a layer called Web Layer. You can see any of your slices here. This is a permanent layer and can't be removed.

2.  Using the Slice tool, draw another thin slice for the top bar, making sure you get all of the shadow. Draw another thin slice across the side bar as seen in Figure 6.
3.  Select the large corner slice and click the Preview tab (see Figure 7).
4.  Open the Optimize panel and use these settings: Export File Format: GIF; the Index Palette: Adaptive; Colors: 16 and No Transparency (see Figure 8).

Note: For a more in-depth explanation of optimization, see my article in the October issue (MXDJ, Vol 2, issue 10).

You are using the GIF format because the image has a lot of flat color. JPEG is best for photos, GIF is best for flat colors. You don't need any transparency for this image. If you did need transparency then GIF wouldn't be the best option because of the drop shadow.

5.  In the Property inspector, highlight the default slice name and rename it something useful (see Figure 9).
6.  Select the top thin slice and change the optimization to 16 colors; give the slice a name as you did in step 5.
7.  Repeat steps 3–5 for the side slice.
8.  Shift+select all three slices (see Figure 10).
9.  Right-click (Control-click) on the slice and select "Export Selected Slice." Navigate to the folder you want to export your images into. It should be a folder within your root folder for the site you are building. Don't worry about the name of the file, it won't affect the slice names you gave the slices. Notice that the Selected Slices Only option is checked.

Note: You can also access the Export dialog by choosing File>Export. I prefer the right-click method to export specific slices because the "Selected Slices Only" dialog is prechecked. Otherwise it isn't and I often forget to check it and end up with a ton of other images I didn't want. Any part of your document that isn't sliced will be exported anyway (as defined by the red lines you see after adding a slice) if you don't select "Selected Slices Only."

10.  Click Save to save your file.

You are now ready to use these three images to make a stretchy or fluid table in Dreamweaver.