Skip to content

Layout Tool

The Layout Tool, available in the vertical bar on the left of the Viewer, lets you quickly position multiple layers or Shape Paths according to various distribution or alignment rules.

|||IMAGE DU TOOL

It consists of a set of buttons in the options bar at the top of the viewer, as well as an interactive placement tool.

Selection Process and Tool Interaction

Once in the Layout Tool:

  • The selection rectangle can be used to select Layers.
  • You can also click on a layer, then add layers to the selection by pressing Shift.
  • Layers can also be selected in the Timeline

Once selected, a blue frame surrounds the selection. Handles can be used to expand or contract this frame to modify the spacing between layers.

|||VIDEO DE DEMO

Note

A similar manipulation with the 2D Transform Tool would have modified the Layers' Scale. Here, the Layout Tool allows you to act only on their positions.

Layout Frame

This first menu defines the frame in which the selected elements will be aligned, distributed or stacked.

  • Compositon: takes the composition format as reference frame.
  • Selection: takes the selection's blue frame as reference.
  • Active layer: takes the active layer's Bounding-Box as reference frame.

Align

This section contains a first parameter, defining how layers should be positioned in relation to the reference frame.

  • Centered
  • Interior
  • Exterior

Here's an example of left alignment, according to composition format, with each of these three options. Format clipping has been disabled to see what happens outside the format.

|||VIDEO DES TROIS ALIGNEMENT

The next six buttons align the elements making up the current selection, based on their Bounding-Boxes.

All aligned to:

  • The Left of the reference frame
  • The Horizontal middle of frame
  • The Right of the reference frame
  • The Top of the reference frame
  • The Vertical middle of frame
  • The Bottom of the reference frame

The video below shows these six functions in Composition / Interior mode:

|||VIDEO DES SIX ALIGNEMENTS

Distribute

This section contains two sets of four buttons to distribute the current selection within the reference frame. The first four buttons are for horizontal distribution, the next four for vertical distribution.

The first four buttons are described below:

  • Distribute the selection evenly based on the Left or Right edges of the elements' Bounding-Boxes.
  • Do the same based on Bounding-boxes centers.
  • This time always based on the Left of the Bounding-Boxes.
  • Do the same, always based on the Right of the Bounding-Boxes.

For the following four buttons:

  • Distribute the selection evenly based on the Top or Bottom edges of the elements' Bounding-Boxes.
  • Do the same based on Bounding-boxes centers.
  • This time always based on the Bottom of the Bounding-Boxes.
  • Do the same, always based on the Top of the Bounding-Boxes.

The video below shows these height functions in Composition / Interior mode:

|||VIDEO DES HUIT ALIGNEMENTS

Stack

These six buttons stack elements next to or on top of each other, depending on their bounding box, and push them towards one of the reference frame's edges.

The goal is to remove any gaps between the bounding boxes, then move the entire selection to one of the reference frame's edges.

From left to Right:

  • Stack left
  • Stack horizontally in the center
  • Stack right
  • Stack at bottom
  • Stack in center vertically
  • Stack on top

|||VIDEO DES SIX ALIGNEMENTS

Stacking With Rotated/Skewed Layers or Paths

Many of these functions are based on Bounding-Boxes, especially stacking operations. Transformation parameters, such as Rotation and Skew, can affect the appearance of a Bounding-Box.

|||IMAGE DE LA BBOX INITIAL PUIS ROTATION, PUIS SKEW

The original horizontal and vertical edges now have a different orientation, and the real Bounding-Box that will be used during Layout frames this post-transformation content.

Here, in dotted line, you can see the actual Bounding-Box that will be used during Layout.

|||VIDEO DES POINTILLES AVEC LE CLIPPING DESACTIVE PENDANT UN ROTATION ET UN SKEW

If elements have been transformed, some stacking operations may leave gaps.

Note

In a Shapes generator, that's the difference between using the Tool to move points and the one to change Transformations parameters.

Mirror

Mirrors elements of the current selection horizontally or vertically.

  • Moves elements relative to a symmetry axis at the center of the reference frame.
  • Multiplies by -1 one of the Scale parameter dimensions.

|||VIDEO DES DEUX MIRRORS