Constraints Panel

Constraints indicate how layers/elements should respond when you resize their frames. This helps you control how designs look across different screen sizes and devices.

There are Horizontal and vertical constraints.

Horizontal constraints define how a layer behaves as you resize the frame along the x-axis.

• Left maintains the layer’s position, relative to the left side of the frame.
• Right maintains the layer’s position, relative to the right side of the frame.
• Left and right maintains the layer’s size and position relative to both sides of the frame. This may cause layers to grow or shrink along the x axis, when resized.
• Center maintains the layer’s position, relative to the horizontal center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Vertical constraints define how a layer behaves as you resize the frame along the y-axis.

• Top maintains the layer’s position, relative to the top of the frame.
• Bottom maintains the layer’s position, relative to the bottom of the frame.
• Top and bottom maintains the layer’s size and position relative to the top and bottom of the frame. This may cause layers to grow or shrink along the y axis, when resized.
• Center maintains the layer’s position, relative to the vertical center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Horizontal : Left Vertical: Top

Horizontal : Right Vertical: Bottom

Horizontal : Scale Vertical: Scale

Horizontal : Left and Right Vertical: Top and Bottom

Relative position

Let’s now explore the Relative feature, which enables you to create constraints based on relative positioning in comparison with other layers.

Consider a product price feed. Each price consists of three elements: currency, product cost, and payment frequency. When the price changes, it should retain its relative structure.

Let’s connect each element of the price to the data feed.

Connect payment frequency:

Connect product cost:

Connect currency:

Next, let’s set Constraints to each layer.

Let’s say we want the price to be always positioned to the right bottom corner of our creative.

First set the “per MO” text to the right bottom and also the text container – Dynamic Width and Height. In case there is more text, the container will resize.

The second price element “499” should remain adjacent to the “per MO” text, maintaining a 2px distance between them.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and bottom Y position relative to “per MO”.

For horizontal, set offset -2px, separating “499” element from the “per MO”.

The third currency element “$” should remain adjacent to the “499” text, maintaining a 2px distance between them and aligned to the top.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and top Y position relative to “499”.

For horizontal set offset -2px, separating “$” element from “499”.

Let’s see the result.

This feature is very useful for creatives connected to feeds because it ensures that ads are always well-structured and prevent elements from sliding out of place or becoming misaligned.

Publish Responsive HTML5 ads

To publish the Responsive banner always select the Responsive Width & Height option and place the AdTag/Embed code in a responsive div container on your page or use a responsive placeholder in DSP/SSP:

How to do that? Please watch the video below.

Let’s first create a simple animation with 2 texts that appear “from left”.

As you can see the text is overlapping the white vertical line.

We need to add a mask to the text layers to make it look as if it’s running out of line.

Add a new rectangle shape and make sure that it covers the text and has the same X and Y position as the vertical line.

Right-click on the shape layer and select Mask. The mask will be applied to the first layer under the shape layer.

When an object is converted to a mask, it has a mask icon in the front of the layer name. You can add more layers under the same mask by simply dragging the layer to the mask group.

And now, thanks to the power of clipping mask, the text is running from the vertical line without overlapping it.

And there we have it! That’s how clipping masks work in BannerNow!

Visit our Knowledgebase page for more tutorials!

Notice each layer displays an icon indicating the type of content on the layer — such as a T for a type layer, or an image icon for an image layer.

To add a folder click on the icon as shown in the image below.

Folders make it easier for you to work with multiple layers when designing a complex banner template.

Drag layers inside the folder to arrange and reduce clutter in the Layers panel.

Use keyboard shortcuts to become more productive: link to hotkeys tutorial.

Double-click the layer name in the Layers panel and enter a new name. Press Enter.

Whenever a new element is added to the stage it automatically receives the highest order number – meaning it will be placed above all other elements on the z-axis (if element A has a higher-order number than element B then A will cover up B). Layers can be used to control any elements’ order. To reorder layers drag them Up or Down using the mouse.

You can also reorder layers inside your folders.

We suggest you Preview your animation once finished reordering layers.