Dreamweaver Article

Designing and implementing a Spry menu

Designing a Spry menu bar in Fireworks

In this section I'll cover how to create a custom menu bar design in Fireworks CS3, so that you can make the Spry menu fit your site's look and feel.

The Spryte site structure includes a Fireworks PNG file called spryte_layout.fw.jpg. This is the file I used to produce the design that currently appears on the page. You can find the PNG file in the design > layout folder.

1. Open spryte_layout.fw.jpg in Fireworks. You can do this from within Dreamweaver if you've configured Fireworks as the external editor for PNG files in the Dreamweaver preferences. If so, you can simply double-click the PNG file and Fireworks will launch.

   Alternately, you can open Fireworks first, and then browse to open the PNG file. Once the PNG is open, you'll see that guides are placed in the correct positions for the navigation.

   Note: If you cannot see the guides, verify that View > Guides > Show Guides is selected. You will also need to enable Rulers (if they are not already showing) by choosing View > Rulers. This is important as you'll be creating guides yourself later on.

   In the Layers panel you can see that the existing components of the design have been stored in three layers: Content, Header, and Background. Each of these layers has been locked to prevent accidental editing.

   Note: If you cannot see the Layers panel, open it with Windows > Layers.

2. Click the New/Duplicate Layer icon at the bottom of the Layers panel to insert an empty layer for the navigation design.
3. Double-click this newly created layer to rename it. Name it Main Navigation and press Enter (Windows) or Return (Mac).
4. Select View > Magnification > 400% so that you are viewing the area with the pre-defined guides (see Figure 3).

|

Figure 3. Use the Zoom tool or the view menu to zoom in to 400% in the area with guides.

Now you are ready to begin creating the selected/hover main navigation state of the navigation bar.

1. Click the Stroke color chip and select the "no stroke" (red diagonal line) icon from the color palette. Then use the Rectangle tool to draw a 146 × 29 pixels rectangle that sits 1 pixel in from the guides. You can nudge the selected object into the desired position using the cursor keys. Holding down the Shift key while nudging will move the selection by 10 pixels in the respective direction.

   Note: While using the drawing tools, you can see the size and position of selected objects displayed in the Property inspector (Window > Properties). In addition to using the arrow keys to move the rectangle, you can also reposition it by entering numeric values into the fields of the Property inspector to place it in the desired location.

2. Use the Pointer tool to select the rectangle. By default the fill color is a solid color, but you want to make it a gradient. In the Property Inspector, set the Fill drop-down menu from Solid to Gradient > Linear.

3. Click the Fill color chip to open the Gradient dialog box. Edit the gradient so that it has three evenly spaced color nodes (see Figure 4).

   

   Figure 4. Edit the gradient fill to use the hexadecimal colors shown in the example.

4. Going left to right, set the first node color to #DD0D56, the second node color to #E43E79 and the third node color to #DD0D56.

   Note: I recommend using Grant Hinkson's Gradient panel to set the position of the gradient nodes precisely at 0%, 50%, and 100%, respectively.

   The next step involves adding two Inner Shadow effects.

5. In the Property inspector, click the plus (+) button next to Filters and select Shadow and Glow > Inner Shadow. The Inner Shadow dialog box appears. Use the following values to set the properties of the shadow filter (see Figure 5):

   • Color: #000000
   • Distance: 2
   • Opacity: 45%
   • Softness: 4
   • Direction: 125

   

   Figure 5. Set the properties of the Inner Shadow to match those shown above.

6. Click the Property Inspector to close the Inner Shadow dialog box.
7. Apply a second Inner Shadow using identical properties as the first one, except this time set the Direction to 315.

8. Select the Rectangle tool and draw a 148 × 31 pixels rectangle that spans the width of the guides, and overlaps the other rectangle by 1 pixel on each side. Give this rectangle the following properties:

   • Fill: None
   • Stroke: 1-Pixel Hard Line #CB1D63
   • Opacity: 70%
9. In the Layers panel, click the New Sub Layer icon. Double-click the layer and rename it Labels.

10. Draw two new guides and place them 10 pixel inside the guides currently lined up with the edge of the navigation bar rectangle.

    Note: By double-clicking a guide when the Pointer tool is active, you can determine its current position and set a new one. I regularly use the Crop tool to measure and position guides, as it is just a keyboard shortcut press away (C). A selection can be created regardless of the type of object that is selected and it has nodes for easy resizing (see Figure 6).

    

    Figure 6. Use the Crop tool to help you measure and position the guides.

11. Select the Text tool. Position the cursor over the rectangle and in line with the newly created left side inner guide.

12. Click and drag the Text tool to the newly created guide created on the right, to create a fixed-width, area text object (see Figure 7).

    

    Figure 7. Drag the Text tool inside the rectangle, to line it up with the inner guides.

    Note: If your initial attempt did not position the text object exactly as desired, you can press the Space bar to use the Hand tool to reposition it.

13. Once you release the mouse button, type Home. Then, use the mouse to select the Pointer tool in the Tools panel.

    Note: Attempting to use a keyboard shortcut with an active text object will result in typing those characters, rather than toggling tools.

14. With the Text object selected, set its properties using the following values:

    • Font: Verdana
    • Size: 13
    • Color: #FFFFFF
    • Bold
    • Alignment: Left
    • Anti-alias: System Anti-Alias
    • Auto kern: Unchecked

15. Hold down the Shift key and click the rectangle behind the text, selecting both objects. Then choose Modify > Align > Center Vertical.

    At this point you've created the basic selected state for the navigation menu (see Figure 8).

    

    Figure 8. The design of the selected state of the menu.

    Next, you'll clone the elements of the selected state to create the normal state of the menu item (see Figure 9).

    

    Figure 9. The design of the normal state of the menu, when the item is not selected.

16. In Step 15 you selected the rectangle and the text. Hold down the Shift key again and select the other rectangle so that all three objects are selected. Then choose Edit > Clone to make a clone of all three objects.
17. Use the arrow keys to nudge the three, cloned objects down so that they are located 3 pixels below the first navigation option. Once you've moved the three cloned objects down, deselect all three objects by choosing Select > Deselect.

18. Reselect the inner pink rectangle and click the plus (+) next to Filters in the Property inspector. Apply a Hue/Saturation filter by selecting Adjust Color > Hue/Saturation. In the dialog box that appears set the following properties:

    • Hue: 0
    • Saturation: -100
    • Lightness: -70
    • Colorize: Unchecked

19. Select the outer rectangle and apply a Hue/Saturation filter with the following properties:

    • Hue: 0
    • Saturation: -100
    • Lightness: -45
    • Colorize: Unchecked

Note: You may notice that the quality of the main rectangle has degraded. Unfortunately, Fireworks can encounter issues with color depth when you apply a Hue/Saturation filter. Due to this known issue, I avoid applying Hue/Saturation filters to production-quality material. Instead, I recommend manually changing the fill and stroke colors of the object to match the colors originally created by the filter.

Creating the top-level navigation options

Now that the selected and normal states of the menu are finished, you can move on to the next task—creating the look of the top-level menu items. After you've completed one design, it's usually easier to begin by copying the existing set of objects and then modifying them, rather than starting again from scratch.

1. Hold down the Shift key and select the two rectangles and the Home text. While all three objects are selected, make a clone by selecting Edit > Clone.
2. Again, nudge the three, cloned objects down so that they are located 3 pixels below their original position.
3. Repeat Step 2 twice, to create two more navigation items. After you've cloned and nudged each set 3 pixels below the last, you should have a total of five menu items. Deselect all of the objects by choosing Select > Deselect.
4. Select the Text tool. Double-click the second Home label on the canvas and type over it. Replace the word Home with What is Spry?
5. Select the remaining text labels one-by-one, and replace the Home text with Tutorials, Downloads, and ContactUs, respectively.

Now all of the top-level items have their unique labels for the navigation menu.

Creating the flyout indicators

When you create a flyout menu it is a best practice to add design elements that indicate to the user which menu options have flyout submenu items.

The default Spry menu bar implementation uses a simple arrow as the indicator. For the purposes of this sample project I've adhered to this convention, adding a more aesthetically pleasing arrow design to help users navigate through the menu options.

Since there are two states of the menu (active/hover and inactive), you'll need to create two different versions of the indicator to match each state.

Start with the selected/hover (rollover) state. This next part involves creating the pink circular arrow icon that will appear on the right side of menu items that have flyout submenu items (see Figure 10).

Figure 10. Adding the arrow will help users navigate to the submenu items.

1. Select the Contact Us label, add a new layer and name it Indicators. Zoom or scroll as needed until you see the Home menu item on the canvas.
2. Select the Ellipse tool. Hold down the Shift key and drag the Ellipse tool to create a perfectly round circle that is 18 × 18 pixels.

3. While the circle is selected, use the Property inspector to apply a Linear Gradient fill using the following two values:

   • 1st node color: #E33C77
   • 2nd node color: #E64F84

4. In the Property inspector, click the plus (+) next to Filters. Apply a Drop Shadow filter by selecting Shadow and Glow > Drop Shadow using these properties:

   • Color: #FFFFFF
   • Distance: 0
   • Opacity: 53
   • Softness: 1
   • Angle: 315
5. Now select the Rectangle tool. Hold down the Shift key and drag a tiny symmetrical square that is only 2 × 2 pixels. This rectangle should have no stroke and a solid fill of #FFFFFF. While the square is selected, choose Edit > Clone to make a clone of the square.
6. Use the arrow keys to nudge the square 2 pixels right and 2 pixels down.
7. Clone this rectangle and nudge it 2 pixels away again. Then create another clone of this clone, and this time nudge it 2 pixels left and 2 pixels down.
8. Clone and nudge the square left and down one more time. You should now have five small squares arranged to form a blocky arrow shape. If you need to make any adjustments to line them up into a sideways V shape, select each square with the Pointer tool and use the arrow keys to move each one a pixel at a time.
9. After the squares are positioned as desired, hold down the Shift key and select all five rectangles. Choose Modify > Combine Paths > Join to create one single object from the five small squares.
10. While the arrow object is selected, hold down the Shift key to also select the circle. Now both the arrow and the circle should be selected. Choose Modify > Align > Center Horizontal, then Modify > Align > Center Vertical to make the arrow align perfectly in the center of the circle.

11. Shift-click the circle to de-select it, then use the arrow key to nudge the arrow object 1 pixel to the right.

    Note: Although the arrow and circle were perfectly aligned before nudging the arrow one pixel to the right, it looks better when you nudge the arrow over to balance the design. To the eye, the perfectly aligned arrow looks unbalanced inside the circle due to the weight of the left side of the arrow compared to the right. By nudging the arrow object one pixel to the right, the eye perceives the arrow as centered within the circle, even though it is actually offset slightly.

12. Select both the arrow and the circle again and group them by selecting Modify > Group. Next, move the group to the following location:

    • X: 244
    • Y: 128

    The right edge of the circle should touch the guide located 10 pixels in from the navigation bar's edge.

    Note: In the step above you moved the indicator arrow icon manually (rather than using the Align panel), because Fireworks does not snap to pixels when aligning. Since the height of our indicator circle is an even number (18 pixels) and the height of the navigation item is uneven (31 pixels), the shape would have blurred when placed on a half-pixel coordinate by the auto align feature. A full explanation of this behavior can be found in the TechNote Vector path rendering in Fireworks.

    Next, you'll create the unselected state for the indicator. As I mentioned previously, it is much easier to clone an existing object than start creating it again from scratch. This strategy also results in more consistent design elements. Since the normal, unselected state is dark gray, you'll change the colors of the existing indicator to match (see Figure 11).

    

    Figure 11. The arrow indicator for the normal (Up) state of the menu item.

13. The group comprising the selected indicator arrow icon should still be selected. Clone the indicator group by choosing Edit > Clone. With the clone group selected, move it to following location:

    • X: 244
    • Y: 162

14. Now, click the plus (+) next to the Filter option in the Property inspector to apply a Hue/Saturation filter with the following properties:

    • Hue: 0
    • Saturation: -100
    • Lightness: -69
    • Colorize: Unchecked

    Note: Once again, you'll notice that the Hue/Saturation filter has produced color depth problems, and the gradient no longer appears smooth. If that bothers you, you can choose to edit the circle's gradient colors to match the results produced by adding the Hue/Saturation filter.

Creating the subnavigation flyout menu

The design of the subnavigation menu items is a simplified version of the main navigation items. The subnavigation items are the same dimensions as the main navigation, and they are positioned 3 pixels from the main navigation's right edge. The appropriate guides have already been created for you (see Figure 12).

Figure 12. The submenu items in the navigation bar use the same colors as the main navigation.

1. Select the Main Navigation layer in the Layers panel. Create a new layer and name it Sub Navigation. You'll add the new artwork to this layer.
2. Select the Rectangle tool and draw a 148 × 31 pixels rectangle that is flush against the sub-navigation guides, aligned to the top of the main navigation. Set the Fill color to #2E2E2E and set the Stroke to #383838 with a 1 pixel basic hard line.
3. In the Layers panel, click the New Sub Layer icon. Rename the layer Sub Labels.
4. Draw two new guides, 11 pixels in from each edge of the existing guides.
5. Select the Text tool, and position the cursor over the rectangle and in line with the newly created left guide. Click and drag with the Text tool to the newly created guide created on the right, to create a fixed-width, area text object.
6. Release the mouse button, and type Spry in a Nutshell.

7. Use the mouse to select the Pointer tool in the Tools panel to switch from the Text tool. While the Spry in a Nutshell text is selected, use the Property inspector to set its properties to the following values:

   • Font: Verdana
   • Size: 11
   • Color: #FFFFFF
   • Alignment: Left
   • Anti-alias: System Anti-Alias
   • Auto kern: Unchecked
8. Hold down the Shift key and click the rectangle behind to select both the text and the rectangle. Choose Modify > Align > Center Vertical to align them. Then select Edit > Clone to clone the two objects.
9. Nudge the two new cloned objects down 30 pixels. Hold Shift and press the down arrow key three times. Then, repeat the clone and nudge procedure to create three more navigation elements. You should end up with a total of five.

10. Replace the text of the duplicated labels with Ajax for Everyone, Spry Widgets, Spry Data, and Spry Effects.

    Now the sub navigation items have unique labels. This part of the navigation bar is finished. The only thing left to do is create the hover state.

11. Change the fill of the third sub navigation rectangle, the one with the label Spry Widgets to a linear gradient using the drop-down menu in the Property inspector. Edit the gradient to use three evenly spaced nodes with these hexadecimal values:

    • 1st node color: #DD0D56
    • 2nd node color: #E43E79
    • 3rd node color: #C10044

At this point the design of the navigation menu is all set. You've just designed a menu in Fireworks that will used to update the default Spry Menu Bar design. In the next section, I'll cover how to cut up the design into slices, and how to export the Fireworks document so that it can be integrated into the HTML page using Dreamweaver.

Page 3 of 6

Previous Page

Next Page