Frames

We've just described guides and how they can be used for doing horizontal and vertical alignment. Now we'll add another dimension with the Frames tool: its toolbar icon is shown above.

This tool is ideal for tasks where you are working with areas: creating a UI in a fixed window size, visualizing a CSS box definition, or any other measurement that requires an origin (x,y) and size (width, height.)

As with guides, there are several ways to create a frame:

Use the Frames Wizard

The wizard makes it easy to create a new frame. Just press ⌘F to get things started.

The wizard dialog gives you two choices for creating a frame: Numeric and Visual. The numeric method can be used when you have the exact dimensions of a design element. If you want to draw the frame interactively, use the visual method.

When you choose the visual method, the screen will dim and wait for you to click and drag the mouse. The frame's origin (upper-left corner) will be where the click begins; the width and height is determined by how far you drag down and to the right.

Use the Menu

There is a shortcut key for creating a new frame. Just press ⇧⌘F to create a frame at the center of the screen.

Frames have several controls that allow you to manipulate the size and position:

frames
  1. Removes the frame
  2. Adjusts the frame position
  3. Creates a copy of the frame
  4. Links the frame to another frame
  5. Displays a menu of frame sizing options
  6. Displays a menu of grid options
  7. Saves a screenshot of the contents of the frame
  8. Adjusts the frame size
As you adjust the frame's position, you'll see a number appear—this is the distance in pixels measured from the top-left corner of the screen. The width of the frame is always displayed along the bottom edge; the height is on the right edge. You can resize the frame by dragging on either the width or height indicator.

When you click on the frame sizing options, you'll be presented with a list of common aspect ratios (such as 4:3 for standard TV and 16:9 for HDTV.) You can also select "Unlocked" if you don't want to use an aspect ratio. The current ratio is always displayed when you click on the resize control: non-standard ratios can be locked by selecting "Lock This".

Clicking on the grid options icon allows you to select one or more overlays. The 2x2 grid is useful for centering items while the 3x3 grid can be helpful for a "Rule of Thirds" composition.

Linked frames (with the chain icon) will move together as a group. To link the frames, select one of the frames by clicking on its position icon. Then click on the chain icon of all the frames you want link to the selected frame. To unlink, click on the chain icon again.

You can use the menu options, located under Frames in the menu bar, to save and open files with frames. In the open dialog, there is an option to add the frames in the file to the existing set of frames.

The "Remove All Frames" menu item lets you quickly remove all frames.

And, if you weren't already getting bored with the similarity of frames to guides, the toggle feature in the toolbar can hide the frames.

Click on the home button to return to the index or proceed to the next tool: Crosshair.