This is really useful if you want to aggregate all the reports from different platforms in one place (like Google Loocker Studio).

Google Cloud Storage prerequisites:

1. Create a Storage Bucket (or use an existing one). Use default settings like Storage class: Standard, Public access prevention: On, …

2. Create a Service Account (IAM)

Input the name/account id for the new service account

Select a Role: Cloud Storage -> Storage Object Admin

Add IAM Condition so that this service account will have the access ONLY to the specified Storage Bucket

Click DONE to create the service account

Next create a JSON key for this account. Click Manage keys -> ADD KEY -> Create new key

The JSON file with the key will be downloaded to your PC.

Open the JSON file with the text editor and copy the key

Copy and paste this key along with the bucket name into Bannernow Report Builder

Select Scheduled report, Upload report to Google Cloud Storage bucket

Now all your reports will be stored automatically in the Google Cloud Bucket.

Table of Contents

Snapping

Snapping happens when you drag on a layer. When you get close to the item you are snapping to, the element moves to ‘snap’ into place, as if it is magnetic to the other element.

There are several options for snapping, to see them all choose View > Snapping  and select one or more options from the submenu:

• Guides: Snaps to guides.
• Grid: Snaps to the grid. You can only select this option when the grid is visible.
• Canvas: Snaps to the edges of the canvas.
• Objects: Snaps to the images, texts, buttons and shapes.

If you don’t need snapping, you can turn it off by holding down the CTRL key.

Resize

Use the Selection tool to choose the element. You can now resize it proportionally to fit your design by dragging any corner of the element.

To freely resize, Shift-drag a corner handle of the element.

Resize from center

Holding down Alt while clicking and dragging a handle will resize an object proportionally from its center.

Rotate

The Rotate tool lets you turn your image, text, button, shape, or even a group of elements from any angle.

Thanks and happy designing!

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:

This means you can seamlessly design creatives in languages such as Arabic, Hebrew, or Persian.

Make sure to choose a compatible RTL font for your text. To enable support for right-to-left text, simply select the text on the stage and navigate to Text Settings > RTL Direction, and check the box.

With this feature, you can effortlessly design and animate creatives with RTL text, ensuring your message is effectively communicated in any language.

Here you can quickly access the tools you’re likely to use most often: save, copy, paste, undo, redo, and many more…

Available Widgets:

1. Timeline Pause Points Widget: Pauses the animation at specified times.
2. Pause Button Widget: Pauses the animation at its current position.
3. Play/Jump Button Widget: Starts or jumps the animation to a defined position.
4. Play/Pause Toggle Widget: Toggles between playing and pausing the animation, similar to a YouTube video player.

1. Timeline Pause Points widget

This widget will pause the timeline on the specific time points.

Navigate to Add → Widget → Timeline Pause Points

Place the widget anywhere, even outside the canvas.

In the widget settings panel, define the times (in seconds) where the animation should pause (e.g., 5s, 11s, 18s).

The animation will pause at these specified times until the user clicks the Play button widget.

2. Pause Button widget

This widget pauses the animation at its current position on the timeline.

3. Play/Jump Button widget

This widget will start playing from the defined position (leave the Play from seconds input empty to play from the current timeline position).

In the settings, specify the time (in seconds) from which the animation should start or jump. Leave this input empty to play from the current timeline position.

Play/Pause Toggle widget

This widget functions as a play/pause toggle control, similar to those found in video players.

Creating an Interactive Banner Example:

Suppose you have a banner featuring three products, each appearing at different times:

1st Product: Appears at 5s

2nd Product: Appears at 11s

3rd Product: Appears at 18s

Add the Timeline Pause Points widget.

Set pause points at 5s, 11s, and 18s to halt the animation when each product appears.

Add the Play Button widget and customize it to match your design.You can adjust icon color, size, hover color, or upload your own play icon and select the transparent layout for the Play button widget.

Place each Play Button widget over the corresponding product image.

To keep things organized, we can make a separate folder for each Play button layers.

Tip: you can use Copy and Paste Animation and Position from the uploaded Play button to the Play Button widget (Right Click on the uploaded Play image layer > Copy). Right click on the Widget Play button layer > Paste position & size, Paste animations

Configure each Play button widget to jump to the respective product’s appearance time (e.g., 0.75s for the 1st product, 7s for the 2nd, and 13.25s for the 3rd).

Recap:

We have designed a banner with 3 products.

Each product has it’s own animation on the timeline:

1st product starts to play from 0.75s, appear animation ends at 5s

2nd product starts to play at 7s, appear animation ends at 11s

3rd product starts to play at 13.25s, appear animation ends at 18s

We have added the Timeline Pause Points widget to stop the animation at 5s, 11s and 18s

Then we have added 3 Play Button widgets that are always visible with the “Start animation from” set to 0.75s, 7s and 13.25s

When the creative will load it will start playing from 0s and will pause at 5s.

Now user can click on any Play Button widget and the animation will jump accordingly (for example click on 3rd product Play Button widget will jump to 13.25s and then will pause at 18s and so on…)

Here is the final result:

Choose the image you wish to edit and ensure it is selected within the editor. Click on the Remove BG button located on the left toolbar.

Allow a moment for the background removal process to complete. The background will automatically disappear, leaving the subject with a transparent background.

Once satisfied with the result, proceed with further edits to your creative design as needed.

This feature enables you to seamlessly integrate images with transparent backgrounds into various designs and destinations, enhancing the flexibility and appeal of your creative projects.

Then generate an API key for XD Plugin (dashboard top menu → XD icon click).

Open the Bannernow Plugin (top XD menu → Plugins → Bannernow).

Then Select the Artboards/Frames you want to export from the Layers panel or directly on the canvas.

The selected Frames/Artboards will appear in the Bannernow Plugin panel (with the number of items that will be exported).

You can also Expand the Frame/Artboard directly in the Plugin panel and set the export format for each element separately.

If there are too many elements to export – group design elements and mark it for export (in XD).

Choose the Bannernow project and the folder where these Frames/Artboards will be exported.

Advanced export settings:

• Retina – will export all the images in @2x format.
• Export Hidden Layers – will also export hidden layers
• Generate Global Preview Image – will generate a screenshot of the Artboard/Frame

Click Export button to export your Frames/Artboards to Bannernow.

Now you can open the exported designs in Bannernow and start animating.

How to do that? Please watch the video below.