|
YOUR FEEDBACK
Did you read today's front page stories & breaking news?
SYS-CON.TV SYS-CON.TV WEBCASTS |
MXDJ TOP LINKS YOU MUST CLICK ON ! Fireworks Stretching the Curve
Moving from Fireworks to Dreamweaver
By: Joyce Evans
Dec. 21, 2004 12:00 AM
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. Note: I am using two different colors so you can identify the objects more easily. 6. Shift+select both rectangles. 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 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 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. Slice, Optimize, and Export 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. 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). 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. LATEST FLEX STORIES & POSTS
SUBSCRIBE TO THE WORLD'S MOST POWERFUL NEWSLETTERS SUBSCRIBE TO OUR RSS FEEDS & GET YOUR SYS-CON NEWS LIVE!
|
SYS-CON FEATURED WHITEPAPERS MOST READ THIS WEEK |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||