i4designer Knowledgebase

i4designer Alignment and Distribution tutorials

Abstract

Check out this article and learn more details about the alignment and distribution features, available in the quick actions toolbar.

Tip

For more details about the alignment and distribution options, please also visit the dedicated article, here.

To demonstrate the alignment and distribution features, we prepared an i4designer project, using four identical Label components. Each Label has a number associated, representing the order in which they were added to the project page.

Page_components.jpg

The project page

Since the Labels were randomly positioned throughout the drawing space, we shall use the alignment and distribution options, available in the quick actions bar, to adjust their position, as follows:

Aligning components relative to the page
Abstract

Check out this article and learn more details on how to align your i4designer components in a vertical direction, using the alignment options.

This tutorial will show how to align objects in i4designer projects using the Relative to page feature. This article can help you create neater projects, by using the following alignment commands available in the i4designer quick actions toolbar:

  • Align to left

  • Align to right

  • Align to top

  • Align to left

  • Vertical centering

  • Horizontal centering

  • Relative to page

Aligning components individually

For this tutorial, we randomly distributed four identical Label components on the drawing surface.

The_drawing_surface.jpg

The drawing surface

To easily adjust the position of each component, please proceed as follows:

  1. Enable the Relative to page alignment mode.

    Relative_page.jpg

    Important

    When aligning components on the drawing surface, the user can choose to align them relative to the page, or relative to another component.

    When the Relative to page alignment mode is enabled, the selected components will consider the page borders, as exemplified by the current tutorial.

  2. Select the first Label component, by clicking it once, and click the Align to left toolbar button.

    Align_to_left_button.jpg
  3. The position of the Label is changed. The position adjustment is also visible in the Properties panel, under the Transform category. The value of the Left property is changed, therefore the component is perfectly aligned with the left page border.

    Left_aligned_component.jpg
  4. Select the second Label component and click the Align to right toolbar button.

    Align_right_button.jpg
  5. The position of the Label is changed. The position adjustment is also visible in the Properties panel, under the Transform category. The value of the Left property is changed, therefore the component is perfectly aligned with the right page border.

    Aligned_right_comp.jpg
  6. Select the third Label component, by clicking it once, and click the Horizontal centering toolbar button.

    Horizontal_centering_button.jpg
  7. The position of the Label is changed. The Label is moved to the center of the project page, to an equal distance between the left and right borders.

    Horizontally_centered_comp.jpg
  8. Select the fourth Label component, by clicking it once, and click the Align to top toolbar button.

    Align_top_button.jpg
  9. The position of the Label is changed. The position adjustment is also visible in the Properties panel, under the Transform category. The value of the Top property is changed, therefore the component is perfectly aligned with the top page border.

    Top_aligned_comp.jpg
  10. Select again the fourth Label component, by clicking it once and click the Align to bottom toolbar button.

    aLIGN_BOTTOM_BUTTON.jpg
  11. The position of the Label is changed. The position adjustment is also visible in the Properties panel, under the Transform category. The value of the Top property is changed, therefore the component is perfectly aligned with the bottom page border.

    Bottom_aligned_comp.jpg
  12. To move the fourth Label component to the center of the page, select it and click the Vertical centering toolbar button.

    Vertically_centereing_button.jpg
  13. The position of the Label is changed. The Label is moved to the center of the project page, to an equal distance between the top and bottom borders.

    Vertically_centered_button.jpg
Aligning multiple components

For this tutorial, we shall proceed with the four Label components that we have previously randomly distributed on the drawing surface.

Project.jpg

The drawing surface

Please proceed as follows to align multiple components:

  1. Enable the Relative to page alignment mode.

    Relative_page.jpg

    Important

    When aligning components on the drawing surface, the user can choose to align them relative to the page, or relative to another component.

    When the Relative to page alignment mode is enabled, the selected components will consider the page borders, as exemplified by the current tutorial.

  2. Select all components and click the Align to left Align_to_left.jpg toolbar button.

    Tip

    You can select multiple components either by holding down the right/left mouse button and dragging a selection rectangle over the components of interest or by holding down the CTRL keyboard button and individually clicking the components of interest.

  3. The position of the selected components is changed. The position adjustment is also visible in the Properties panel. The value of the Left property is changed, therefore the components are perfectly aligned with the left page border.

    Left_aligned_multiple_comp.jpg
  4. Select all components and click the Align to right Align_to_right.jpg toolbar button.

  5. The position of the selected components is changed. The position adjustment is also visible in the Properties panel. The value of the Left property is changed, therefore the components are perfectly aligned with the right page border.

    Aligned_to_right_multiple.jpg
  6. Select all components and click the Align to top Align_to_top.jpg toolbar button.

  7. The position of the selected components is changed. The position adjustment is also visible in the Properties panel. The value of the Top property is changed, therefore the components are perfectly aligned with the top page border.

    Align_top.jpg
  8. Select all components and click the Align to bottom Align_to_bottom.jpg toolbar button.

  9. The position of the selected components is changed. The position adjustment is also visible in the Properties panel. The value of the Top property is changed, therefore the components are perfectly aligned with the bottom page border.

    align_bottom.jpg
  10. Select all components and click the Horizontal centering Horizontal_centering.jpg toolbar button.

  11. The position of the Labels is changed. The Labels are moved to the center of the project page, to an equal distance between the left and right borders.

    Center_horiz.jpg
  12. Select all components and click the Vertical centering Vertical_centering.jpg toolbar button.

  13. The position of the Labels is changed. The Labels are moved to the center of the project page, to an equal distance between the top and bottom borders.

    Vertic_center.jpg
Aligning components relative to the last selected item
Abstract

Check out this article and learn more details on how to align your i4designer components relative to the last selected item.

This tutorial will show how to align objects in i4designer projects, using the Relative to last selected item alignment feature. This article can help you create neater projects, by using the following alignment commands available in the i4designer quick actions toolbar:

  • Align to left

  • Align to right

  • Align to top

  • Align to left

  • Vertical centering

  • Horizontal centering

  • Relative to last selected item

Tip

The best procedure to create neat projects is to combine the benefits of the alignment and the distribution commands.

For this tutorial, we randomly distributed four identical Label components on the drawing surface. We shall demonstrate to you how to align the components, considering the position of the last selected Label component, as follows:

  1. Enable the Relative to last selected item alignment mode.

    Relative_to_last_selected_item.jpg

    Important

    When aligning components on the drawing surface, the user can choose to align them relative to the page, or relative to another component.

    When the Relative to last selected item alignment mode is enabled, the selected components will consider the last selected item.

    To control the selection order, the user should select the components by means of CTRL+Click. Otherwise, the components will be aligned relative to the last component added on the project page.

  2. Select all four Label components, by means of CTRL+Click. For this tutorial, the last selected component is the first Label.

    All_Comps_selected.jpg
  3. Click the Align to left toolbar button.

  4. The position of all the Label components is changed. The alignment considers the left border of the last selected item.

    Aligned_to_left_multiple.jpg
  5. Further on, you can play with the position of the four Label components to try out the Align to right, Align to top, Align to bottom, Horizontal centering, and Vertical centering alignment options. These alignment modes will function as follows:

    Components_random.jpg
    • The Align to right option aligns all the selected components with the right border of the last selected component.

      Aligbn_right.jpg
    • The Align to top option aligns all the selected components with to top border of the last selected component.

      Align_top.jpg
    • The Align to bottom option aligns all the selected components with the bottom border of the last selected component.

      Bottom_alignment.jpg
    • The Horizontal centering option aligns all the selected components with the horizontal center of the last selected component.

      Horizontally_centered.jpg
    • The Vertical centering option aligns all the selected components with the vertical center of the last selected component.

      Vertical_centered.jpg
Distributing components
Abstract

Check out this article and learn more details on how to distribute your i4designer components in a vertical direction, using the distribution options.

This tutorial will show you how to distribute components, at equal distance from one to another. This article can help you create neater projects, by using the following distribute commands available in the i4designer quick actions toolbar:

  • Horizontal distribution

  • Vertical distribution

Tip

The best procedure to create neat projects is to combine the benefits of the alignment and the distribution commands.

For this tutorial, we have four identical Label components randomly positioned on the drawing surface. We shall demonstrate to you how to equally distribute the components, as follows:

Four_Labelsw.jpg
  1. Select all components and click the Horizontal distribution toolbar button.

    Tip

    You can select multiple components either by holding down the right/left mouse button and dragging a selection rectangle over the components of interest or by holding down the CTRL keyboard button and individually clicking the components of interest.

  2. Even though the components are not aligned, their position on the horizontal axis is changed, while maintaining an equal distance from one another.

    Horizontal_distribution.jpg

    Tip

    When horizontally distributing components, the right margin of the component positioned near the left page border and the left margin of the component positioned near the right page border are considered.

    horizontal_distrib_schema.jpg

    Horizontal distribution

  3. Next, select all components and click the Vertical distribution toolbar button.

  4. Even though the components are not aligned, their position on the vertical axis is changed, while maintaining an equal distance from one another.

    Vertical_distrib.jpg

    Tip

    When vertically distributing components, the bottom margin of the component positioned near the top page border and the top margin of the component positioned near the bottom page border are considered.

    Vertical_distrib.jpg

    Vertical distribution

Warning

It may be the case that the sum of the selected component's width is higher than the distance between the top/bottom or left/right extremes. In this case, the distribution is performed, as follows:

  • Vertical distribution considers the left top corners of the components positioned to the top and bottom page borders.

    Vertical_distributionuneven.jpg

    Vertical distribution for unequivalently positioned components

  • Horizontal distribution considers the left top corners of the components positioned to the left and right page borders.

    horizontal_distrib_uneven.jpg

    Horizontal distribution for unequivalently positioned components