Bonzai Studio provides you with a creative composition workspace that enables you to work with multimedia assets(such as text, image, and video).
When you build the Desktop TruSkin creative in the Studio, we recommend you to do the following:
Zoom out the canvas area to 33%(for a laptop) or 50%.
Press and hold the spacebar to change the standard cursor to grab. Now, you can reposition the canvas using your mouse.
Tip:
You can hide the timeline panel, the collapsible panel enables you to expand the canvas on the blank area surrounding the canvas.
In the following section, you can get an overview of the process to build a sample creative.
Work with Assets
In Bonzai Studio, you can design the creative using tools from the Elements menu or you can import assets from your content library.
To import assets for your creative
On the workspace, click the Assets icon. The Assets menu appears.
Click the Upload icon to navigate to your desired folder and select your assets. The selected assets appear on the Assets menu.
Drag the asset on the canvas.
Note:
You can work with multimedia assets such as text, images, and videos in Bonzai Studio.
While working with images, we recommend you to do the following:
Use layered transparent PNG images. (Avoid using a single creative image with a resolution of 1920x1080 pixel.)
The separate layer of images provides better animation options.
Save image files in PNG format to retain the transparent elements in the image.
Bonzai Studio supports a maximum image size of 2 megabytes (MB) per image.
While working with videos, we recommend you to do the following:
Position your video asset in the header of the creative.
Video duration should be within 6 and 30 seconds.
Video aspect ratio should be either 4:3 or 16:9.
Video file should be encoded in the H.264 codec.
Video format supported is the MP4 format.
Video file size:
For programmatic creative's, the maximum video file size allowed on DSPs is 5 megabytes (MB).
Across publishers, the maximum video file size supported is 2 megabytes (MB). Please check with your publisher on the optimal video file size.
On the Studio, the maximum video file size is 20 megabytes (MB) per video.
The following link displays a creative with a video asset.
Tip:
You can organize your assets in the workspace, using folders you can create named collection of assets.
Alignment options in the workspace enable you to control the visibility and position of your assets for the creative.
Note:
Position your content (such as catchphrase, call to action, etc.) to lie within the safe area. It ensures that site visitors can view the creative irrespective of their display resolution.
On the workspace, you can modify the asset properties such as dimensions, opacity, position, and rotation.
Assets used to create the sample creative
Responsive settings in Canvas
Canvas responsive settings enable the creative to render across various device displays.
The below image shows the pinning and other responsive settings in canvas.
Canvas settings for the assets in the sample creative
‘Scroll’ Animations
The Timeline panel in Bonzai Studio enables you to organize and control your assets by time. The major components of the timeline are assets, keyframe, and the playhead.
You can trigger on scroll animations in the creative. Additionally, you can trigger the animation when the site visitor scrolls through a portion of the creative.
To add a scroll to animation
To understand the scroll animation, refer to the creative sample given below.
In Desktop TruSkin, you can add scroll based animation i.e. when a visitor scrolls the page, the animation appears. The following example takes you along a sample scenario.
Scroll to Animation on the sample creative
On page load, the animation in the header is triggered.
Browsing through 10% of the site content, the animation in the skin is triggered.
Reaching the bottom of the site, the footer will appear.
When you scroll back to the top of the site the ‘scroll to’ animations are triggered again. If required, you can set the animation to appear once.
Events and Actions
Events in Bonzai Studio enables you to add action to the assets in your creative. You can respond to the user click, mouse in, mouse out and redirect visitors to your landing page.
To add action to your asset
The following section takes you through the process of addition of click through URL to an image from the sample creative.
On the workspace, select an image. A green selection highlight appears on the active asset.
Click the Events icon.
In the Event list, click Click/Tap option. The Action list box appears.
In the Action list, click Open URL option. The URL box appears.
In the URL box, type the relevant URL.
Note:
While working with click through options, you can do the following:
To add delay to the action result, type the time (in seconds) in Delay Time box.
You can restrict the action result by device type. By default, all popular devices are selected.
Click Add.
Save and Preview
Saving your creative stores the imported assets, the design of your creative, the keyframes on the timeline and the action events on assets.
To save your creative
Click the Save icon.
Save option in the workspace
Note:
To retain your changes on the creative, save often.
Tip:
To quickly save your creative, use the following keyboard shortcuts:
Press and hold the Command key, then press the S key, then release. (macOS)
Press and hold the Ctrl key, then press the S key, then release. (Windows)
Preview in Bonzai Studio enables you to test the interactivity of the creative on the desktop (screen resolution 1920x1080). Currently, we are enhancing the preview module to add relevant screen resolutions.
To preview your creative
Click the Preview icon. The browser displays a preview of the creative on a new tab.
Preview option in the workspace
Creative preview on large screen display
Note:
For different publishers, the publisher content width varies from 1000 pixels (standard content width considered for Desktop TruSkin format) to 1300 pixels.
To test your creative with different publisher content width:
On the preview window, click the Publisher Content Width icon. A dialog box appears.
On the dialog box, type the required content width of the publisher and click Apply.
To share the preview of the creative, you can copy the preview link and share it with others to get feedback on your creative.
Tip:
To quickly preview your creative, use the following keyboard shortcuts:
Press and hold the Command key, then press the Enter key, then release. (macOS)
Press and hold the Ctrl key, then press the Enter key, then release. (Windows)
QA Checklist
