Design Learning Guide for Fireworks: Using Smart Guides and tooltips for precise positioning and layout

Web developers and designers are always striving to achieve pixel-perfect accuracy. Fireworks CS4 includes new layout tools that offer many new capabilities for aligning, measuring, and laying out the elements in your document.

This section describes how to add, hide, and clear guides and how you can set the new consolidated guide and grid preferences. I show you how to use the new guide measurements so you can quickly find the dimensions for a particular area of your design. I also cover two features that are brand new to Fireworks CS4: Smart Guides and tooltips.

Smart Guides are very intuitive to use, and make it extremely easy to ensure that your objects are in correct alignment. The tooltips feature provides valuable feedback regarding the exact x and y location of any object on the canvas. These new capabilities complement the existing layout tools in Fireworks and make it a snap to mock up and finalize your designs.

Using guides

Guides are a familiar and useful feature, and they've been enhanced in Fireworks CS4. Guides allow you to drag out vertical and horizontal lines anywhere you'd like to help you layout elements on the page. To use the guides, you must first access the rulers. Choose View > Rulers to see the rulers surround the current document. Place your cursor on either the top or left ruler and click-drag to pull out a vertical or horizontal guide onto the document (see Figure 1).

It is likely that you've worked with guides in earlier versions of Fireworks, or in other image editing tools, such as Photoshop. However, Fireworks CS4 includes a new measuring feature that complements the guides.

Place the Selection tool between any two guides, then press and hold the Shift key. Numeric indicators appear that display the exact distance (in pixels) between any two guides (both horizontally and vertically) and the edge of the canvas (see Figure 2).

Guide measurements are extremely helpful when designing application interfaces or web layouts where pixel accuracy is desired.

Move the Selection tool around the canvas and press the Shift key to see the measurements displayed for any of the spaces between guides and the edge of the document. The measurements allow you to place elements at the precise pixel location desired, and make it easy to check that objects are spaced evenly.

If you wish to remove a guide, use the Selection tool to drag it off the canvas. To permanently remove all of the guides at once from a document, choose View > Guides > Clear Guides. If you want to ensure you don't accidently move the guides while you are working, choose View > Guides > Lock Guides.

Tip: To temporarily hide the guides in order to check your artwork, press Ctrl+semicolon on Windows or Command+semicolon on Mac OS. This keyboard shortcut is a toggle that will alternatively hide and show the guides of the current open document.

Using Smart Guides

New to Fireworks CS4, Smart Guides offer a new way to quickly align objects on the canvas. To use Smart Guides, choose View > Smart Guides > Show Smart Guides.

When Smart Guides are enabled, dashed lines will appear as you use the Selection tool to drag any object around on the canvas. Smart Guides intuitively "line up" with any other element, so that you can visually see when two objects are aligned by their top, sides, bottom or center (see Figure 3).

The Smart Guides appear as pink and white dashed lines. As you move an object with the Selection tool, the Smart Guides update to draw alignment guides to any other objects in the document, as well as the center of the canvas. You may find you rarely need to use the Align panel at all, because Smart Guides encourage you to place objects in alignment with other objects on the page. If you want the objects you are moving to pop into alignment, you can use snapping. When snapping is enabled, Fireworks snaps the object in the aligned position as you drag an object close to the alignment of another object.

To enable snapping with Smart Guides, choose View > Smart Guides > Snap to Smart Guides.

Tip: Smart guides are also very helpful when using the Slice tool.

Working with tooltips

Also new to Fireworks CS4 is a feature that displays the exact X and Y location of any object on the canvas. This feature is also very useful when accuracy matters, because you can place objects precisely at the coordinates you wish.

To enable tooltips, choose View > Tooltips.

Use the Selection tool to drag any object within the document. When tooltips are enabled, you'll see a gray box that temporarily displays the selected object's x and y location on the canvas (see Figure 4).

Tooltips allow you to quickly confirm the location of any object, and eliminate the need to use the Property inspector to check the X and Y values of any element in your design. They make it very easy to add the correct amount of padding between objects, and can assist you in creating other elements of your design, because you can easily calculate the correct pixel dimensions to use.

In earlier versions of Fireworks, settings for the guides and grids were scattered within the interface. But in Fireworks CS4 it is very simple to adjust the way the layout utilities are displayed. Access the Fireworks preferences (choose Edit > Preferences on Windows, or Fireworks > Preferences on Mac OS). In the Preferences panel, choose the category Guides and Grids. Here you'll find a consolidated panel containing all of the setting options available (see Figure 5).

Depending on your artwork, you may find it useful to change the color of the guides and grids so that they stand out against the background of your design.

Where to go from here

Get suggestions and best practices for working with the new layout features in Fireworks CS4 by watching Jim Babbage's video, Smart guides and tooltips. Also research further by reading Design a layout in Fireworks CS4 by Rachna on the Entheos website.

Finally, explore other areas of the Design Learning Guide for Fireworks CS4.