Align and Distribute

The five elements need to be distributed in a pleasing way. We could "eyeball" and play around with the text quite a bit before reaching an acceptable result. To save time Fireworks has built in functions that allow us to distribute objects equally in either the vertical or the horizontal direction.

In order to adjust the spacing we need to select all objects. You can add one by one through holding the SHIFT key and clicking on them, the fastest way is to select all objects in the frame by pressing CTRL+A (Mac: Command+A) on the keyboard. You can also pull open a selection windows with the mouse.

All objects are selected, the blue selection markers appear:

As you can see in the screen shot, I did not do so well in placing the labels. All of them are on the same level, because I created them as duplicates and constrained the movement with the SHIFT key. The spacing is off - it needs to be adjusted.

Select the alignment options from the modify toolbar and click on the list menu icon: This will display the alignment options. Select the horizontal distribution icon from the bottom left.

You can achieve the same thing by selecting the menu command Modify > Align > Distribute Widths.

When you distribute objects the outer limits will be preserved and all other objects proportionally placed. The result looks better than anything I could have done manually. Sometimes a manual adjustment is necessary.

As long as all labels are selected we should also group them, so that we can move or manipulate them as a unit. You can use the keyboard shortcut Ctrl+G (Mac: Command+G) or the group icon from the modify toolbar:

To delimit our navbar to the bottom let's use a one (1) pixel solid black line. We use the line tool and constrain the line with the SHIFT key to draw absolutely horizontal.

If the line is not in the position you want it to be you can specify the position via the Info panel or nudge the line in increments of 1-pixel or 10 pixels by using the arrow keys. To nudge objects pixel by pixel just press the according arrow on the keyboard, if you want to move in 10 pixel increments hold the SHIFT key.

We want the line to extend from position 210 on the x-axis and 21 on the y-axis to the end of the canvas. The width of our line object will therefore be 370 pixels and the height 1 pixel.