• Tools
  • Trainings
    • Coming soon...
  • Contact
  • Hire Us
Hero for Adobe XD
Overview
Pro
Companion App
Demos
Gettings Started
Banner Ads
Documentation

Banner Ad Creation


Introduction to banner ad creation with Hero v2

Intro

Hero v2 helps you create banner ads easily from within XD. You can use all Hero effects and the animation timeline to bring your ad creatives to life. You can even split your creative into multiple scenes easily. The generated code in Hero v2 is significantly smaller than in v1 and click tag integration is built-in. The "create variations" feature also helps you set up different size variations for your banner ad.

Banner Ad related features

The following list gives you all the details you need to get started with banner ad creation in Hero. Some features require the Pro version of Hero.

Click Tag integration

In Hero v2 you can add a click tag easily. Go to the settings section of the Hero panel. There you find the "Add click tag" option. Click the checkbox to enable the click tag input field. The following video demonstrates this.
This feature requires Hero Pro.
Click Tag integration

Creating Size Variations

Creating additional size variations of an artboard/scene in Hero v2 is easy. Before creating the different variations make sure you have activated the "Responsive Resize" layout option for all relevant elements within the main artboard. When everything is set up select the main artboard and then click the "Create Size Variations" button in the Hero panel. In the variations dialog you can choose a set of size variations you want to create. Use the presets or define custom sizes. When you click "Create Variations" the main artboard will be duplicated and resized as requested. The following video demonstrates this.
Creating Size Variations

Productivity (Transfer Animations and Time Shifter)

Hero helps you to be faster with new animation transfer functions – basically copying and pasting animation choreographies from one element to another. This is also useful to recreate animations in multiple variations. With Time Shifter you can easily adjust the start time for all animations on one element.
The following video demonstrates both features.
Transfer Animations requires Hero Pro.
Productivity (Transfer Animations and Time Shifter)

Multi Scene Compositions

If you are creating longer and more complex animations you can split up the entire composition into multiple scenes. You can use XD's prototype mode to define which scene should be played when a scene reaches the end. You simply connect scenes with XD's prototype wires using "time" triggers. The following video demonstrates this. (Multi-scene projects can currently only be export as "All-in-One" projects)
Multi Scene Compositions

Exporting multiple variations as standalone projects

During export you have two options: "All-in-One" exports all scenes as one project with support for multiple scenes. The second option "Multiple standalone projects" exports all artboards as multiple independent projects (single scene projects). This can be useful for banner ad size variations. "Multiple standalone projects" currently does not support multiple scenes. This will be added in a future version.

Companion App and Video Export (beta)

The Companion desktop app helps you export your compositions as video (mp4). Companion App is still in beta.
Hero Companion

Your Feature Wishlist

We are eager to improve Hero, so let us now your Feature Requests! What is missing, what are your specific requirements, what do you need to streamline your workflow? Send us your Feature Requests

Limitations and Known Issues

There are some limitations and known issues you should now about.
Read Known Issues

Company

yumtastic Tools and Trainings
by © 2021 Trendspurt GmbH
Contact
Privacy and Terms of Use
Legal Disclosure / Impressum

Tools & Resources

Hero for Adobe XD
Toolbelt for Adobe Animate

Our other websites

Rich Content Design
Tour de Animate
Tour de XD