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

Home > Articles > Web Design & Development > Usability

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

Aligning Objects

When you are creating several objects on your page, you may want to align the objects with each other or align them to the canvas. You can also distribute objects equally on the page.

  1. Draw a square on the Specials layer. Use the Rectangle tool and hold down Shift as you draw to constrain the rectangle to a square.

    The square needs to be white (no texture) with a stroke of black. If you did not set your colors to the default colors in the last exercise, use the Tip and press D to apply the defaults to the square.

  2. Use the Property inspector to change the size of the square to 165 pixels.

    Make sure you change both the width and the height of the rectangle to 165 pixels to ensure that you have a square.

  3. Move the square on top of the other rectangle you created in the “On Your Own” section. Place it toward the bottom of the other rectangle. Then select both rectangles.

    You can Shift-click each rectangle to select the rectangles, or you can use the selection rectangle to select them. When you click and drag on the canvas, a selection rectangle appears. All objects within the selection rectangle are selected when you release the mouse button.

  4. Choose Modify > Align > Center Vertical.

    The square and rectangle are centered along the vertical axis.

    Fireworks aligns objects on the left based on the leftmost object in the selected group, and it aligns objects on the right based on the rightmost object in the selected group. The topmost object controls Align Top, and the bottommost object controls Align Bottom. For Distribute Widths, Fireworks creates an equal amount of space between the objects, divided between the right edge of the leftmost and left edge of the rightmost objects. For Distribute Heights, Fireworks creates an equal amount of space between the objects, divided between the bottom edge of the highest and top edge of the lowest objects.

    You can also use the Align panel to align objects. Choose Window > Align to open the panel. The Align panel contains all the alignment options found on the Modify menu as well as an option to align objects to the canvas, an option to create equal spacing between objects, and an option to match widths or heights of objects.

  5. Choose File > Import and locate the start.png file you created in Lesson 1.

    This is the image of the girl with the candy within an oval with a feathered edge. You can use the file in the Start folder in Lesson03 if you can’t locate the file you created.

  6. Make sure the Specials layer is still selected before you place the image, and then place the image on the white square.

    If you need to size the image to fit within the square, you can use the Scale tool to make it smaller or hold down Shift as you drag a corner.

  7. Save your file.

    You can leave this file open for the next lesson.

  • + Share This
  • 🔖 Save To Your Account