Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Building the Tab Graphic Symbol

Before you begin this project, take a look at the finished file (ca_final.png) on the accompanying CD-ROM to get an idea of what you will build. Use a browser to open site_final.htm from the Finished_site folder inside the Project 6 folder. Move your mouse over the four section choices to see the remote rollover effects.

Each hotspot triggers an animated tab element that provides additional information about each section of the site. In this part of the project, you'll build the tab shape in the page layout and convert it to a graphic symbol. The Library panel of ca_start.png contains a sample tab element (submenu_sample) that can be used if you want to skip building the tab shape.

  1. Open ca_start.png from the Project 6 folder. In the Layers panel, select the menu animations layer to make it active. You can lock and hide all the layers to give you enough room to work.

  2. Figure 6.1 Layers help you control which elements will overlap others in your rollover animations.

    Using layers to organize your elements and control their positioning can be critical to the success of your layout. In this case, all the animated tab elements will be placed on the menu animations layer. The elements in the layers above lay on top of the tab animations to provide depth to the design.

  3. Use the Rounded Rectangle tool (click and hold on the Rectangle tool to reveal the Rounded Rectangle tool) to draw a box that is 490x40. Use the Properties Inspector to position the element at exactly 0,73. Press Enter to snap the rectangle to the location coordinates. This rectangle will ultimately become one of your tabbed buttons after you make modifications to it.

  4. NOTE

    Fireworks now uses the Properties Inspector to provide the settings formerly found only in the Info panel. These settings, however, can also be found in the Info panel in the Window menu.

  5. In the Properties Inspector, give the rectangle a single-pixel blue (#003366) stroke along its edge. Set the Fill to green (#99FF66).

  6. Figure 6.2 Start with a regular rectangle to build a tab shape.

  7. With the Rectangle selected, use the Properties Inspector to set the Rectangle Roundness property to 80%. Choose Modify | Ungroup.

  8. Rectangles are grouped by default to make the corners editable. If you ungroup, you no longer can adjust the corner radius. Ungrouping, however, enables you to edit the rectangle's anchor points.


    Using the Scale tool to change the width or height of your rectangle can adversely affect the corner radius. Also your rectangle is twice the height needed because you will cut it and use only the bottom half.

  9. Unlock and turn on the visibility of the photo area layer if you've turned it off. Switch to the Knife tool. See the anchor points for the rectangle's path? With the Shift key pressed to constrain your cut, horizontally drag the Knife tool completely across the rounded rectangle right at the top level of the photograph.

  10. Figure 6.3 Hold down the Shift key to create a perfect horizontal cut.

  11. Switch to the Subselection tool and Shift+click the bottom half of the rectangle to deselect it. Use the Delete key to get rid of the top half that is still selected.

  12. To make the remaining half into a completed path, select the Pen tool and click once on the upper-left point. Then click the upper-right path.

  13. When you deleted the top portion, you left an open path of the half rectangle. The stroke, therefore, did not continue along the top line.


    You can use the Command (Mac) or Control (PC) key to temporarily switch from your current tool to a selection tool. Depending on your active tool, this will switch you to either the Selection or Subselection tool.

  14. With the Subselection tool, alter the right corner to be straight instead of curved. Click the lower-right point to reveal its Beziér handles. Click the handle and drag it back to the point.

  15. Figure 6.4 Use the Subselection tool to straighten the curved path.

  16. When finished, select the tab element and choose Modify | Symbol | Convert to Symbol. Select Graphic Symbol and name it tab_default.

  17. In the Layers panel, name the instance of your new symbol after its x,y coordinates 0,73. After you create a symbol, the symbol itself lives in the Library panel. What you see in your document is an instance, or copy, of the symbol.

  18. Choose File | Save As and save the file as myca.png.

  • + Share This
  • 🔖 Save To Your Account