How to do that? Please watch the video below.

Here are the steps to generate a fallback JPG from MP4 file using Adobe Photoshop.

1. File > Import > Video Frames to Layers.

2. Select the MP4 video file from your computer and click “Open”.

3. Set “From Beginning to End” and click “Ok”.

4. Photoshop will open new file with all the frames separated into layers.

5. Select the first layer, then click on File > Export > Save for Web to export it in JPG format.

6. Select “JPG” format from the dropdown menu as shown in the image below and save it.

7. Let’s upload our video to BannerNow library. Go to “Library” and select the “Video” category. Click on “Upload Video” button.

8. Upload the JPG image we have created as Fallback Image and also upload the MP4 video.

9. Now you can see that the video is saved into BannerNow library and you can use it for your banners.

Item visibility mode – Always. This is a default option and refers to a selected element/item that will be always visible (HTML/Fallback/Feed).

Item visibility mode – Only For HTML meaning this element will be shown in HTML5 format only and will not be visible on the Fallback GIF/MP4.

Item visibility mode – Only For Fallback. This option is the opposite of the previous one, meaning that the element will only be visible when the banner was generated as a fallback GIF/MP4. It will be hidden in HTML5 mode.

Item visibility mode – Feed Loaded & Item Feed Data Not Empty.

This option is related to Dynamic Data Feed.

Feed wasn’t loaded at all (some network error occurred) – Item visible FALSE

Feed was loaded but the data for the item is empty – Item visible FALSE

Feed was loaded and the data is not empty – Item visible TRUE

Item visibility mode – Feed Load Success.

Feed wasn’t loaded at all (some network error occurred) – Item visible FALSE

Feed was loaded but the data for the item is empty – Item visible TRUE

Feed was loaded and the data is not empty – Item visible TRUE

Item visibility mode – Feed Load Failed.

Feed wasn’t loaded at all (some network error occurred) – Item visible TRUE

Feed was loaded but the data for the item is empty – Item visible FALSE

Feed was loaded and the data is not empty – Item visible FALSE

*The feed visibility is usually used to display a fallback text or image in case there are some issues with the feed loading (network error) or when the feed data is empty. This way user will see the fallback elements instead of a broken feed banner.

Presets – is a way to create Buttons, Text and Custom Effects, which you can later save in galleries for future re-use.

You are able to add a new Text/Button item on the Stage, apply desired options to it such as font, color, width, etc and save it in the Presets Gallery.

When a new Preset is saved, you can re-use for the current banner or any new banners within the same Project/Campaign, until you remove it at some point.

Steps to create a Text Preset:

1. Add a new Text item on the Stage and apply desired properties (colors, font, …).
2. Select this Text item  on the Stage. Scroll through the properties panel on the left all the way to the end. You’ll find the Save Style option. Click it in order to save a new Button Presets.

How to find existing presets (for Text items)

Click the Add Text button.

You will see the Presets tab within the gallery only if you’ve created presets before. From here, you can add a Preset item on the Stage by clicking on it. You’re also able to remove or rename an existing preset by hovering over a preset thumbnail and clicking the 3-dot icon to access the remove/rename menu.

Button preset

Add a Button on the Stage and apply the desired properties (colors, font, etc).

Button presets can be accessed by clicking the Add Button on the left. Same as with Text Preset, you can add, remove or rename a Button Preset.

You can also create and reuse the Custom Effect Presets.

For this, select an item on the Stage and access its Custom Effect properties from layer settings on Timeline.

Configure your custom effects by adjusting opacity, scale, easing, etc… Then click on Save Preset.

Create a name for your new preset.

By doing this, a newly added preset will appear in the Presets dropdown. You can then apply this to any banner in the current project. Just select it from the dropdown menu.

Remove a preset by selecting the preset from the dropdown and clicking on Remove Preset.

You will be required to submit at least one video format (Mp4, Ogg, Webm), and the fallback image (1), which will be used in case client’s browser doesn’t support video, or the internet connection is very slow.

We, however, recommend uploading your video in all 3 formats, to make sure that every browser will play the video efficiently.

All video files and the fallback image should be optimized prior to uploading to Bannernow.

After you’ve filled up the form, click on Upload button.

You can see your video in the gallery once uploaded.

In order to use videos within your banner, follow these steps:

1.  In the editor, click on Add Video button.

 2. Find your video in the gallery. Click on it to add it on stage.

Once the video item is added on stage, the left-side panel will now display a few video options.

Player Controls option – this adds the play/pause timeline controls on the video player.

Muted – when selected, the chosen video will play no sounds. Should be enabled by default! Otherwise modern browsers will not autoplay your video.

Autoplay – when selected, the video will start playing automatically when displayed on the banner. *Mute should be enabled for autoplay.

Loop – when selected, the video will keep playing in the loop.

 Playback options – refers to which point/second in the timeline the video should start or stop playing.

From this menu, you’ll be able to pick an image from the BannerNow gallery or upload a new one.
In order to pick an image from the gallery, simply click on the desired image.

If you prefer to upload your own image, simply click on the My Uploads tab and upload. Your newly uploaded image will appear in the My Uploads tab. You can select any new images here.

In this quick tutorial, we’ll cover the basics of using the Text tool, as well as advanced features.

We can access the Text tool by clicking the “Plus” button.

BannerNow comes pre-loaded with beautiful fonts so you can start designing quickly. Pick your favorite style. You can use this text as it is or customize it any way you need.

To edit an existing text element, double-click inside the text box.

At the top of the Properties panel is an alignment section that you can use to align text relative to the canvas.

Below, there is the transform section, where you can set the position: the X, the Y positions, Width, Height and Rotation.

Next, there are the Hover and Down tabs for changing the text style for mouse hover and down events.

Then, we have the Feed text connection button. It is now disabled because our creative is not connected to any feed yet. Dynamic creatives using a feed allow you to display multiple texts, as well as conduct A / B testing.

Other useful function is the drop down menu where you can select a new font. You can also type in this field to search. Let’s search for Roboto font. Below select a font style: bold, medium, regular, etc. Also, change size by pressing down/up arrow and color inside the color picker.

Above we have additional upload option. You’ll simply need a .ttf or a .otf file. After the upload, let’s type in the name of the new font to search and as you can see, it is already ready to go.

You can also change the font style, or the style of specific characters. For example, apply bold, italic or strikethrough, and if you want to reset all these changes, just click “Clear style” button.

Advanced settings includes:

Spacing – we can change the amount of space between characters;

Line Height – to change the amount of space between each line of your text;

Padding – is the space between the content and the border of our text box;

Skew – is when twist it vertically or horizontally;

Opacity – adds transparency to the text element;

RTL – means right to left text direction.

Now, let’s adjust the alignment to determine where the text should be placed within the text box. Our options are: left, center, right, top, middle, bottom.

Next, by default we have a Fixed text container, where the text will be automatically scaled to fit the container. For example, if we input more text, it will scale down inside the container.

But, we can change this behavior by setting the text alignment to Fixed Width, Dynamic Height. This allows the height of the text box to grow along with your text.

Another option is Dynamic Width and Height. Now, if I will type more text, the container will resize.

These features are super useful when preparing for the translation or for the dynamic feeded ad.

For example, I can place the text container fit to the bottom right corner, set the dynamic width and height, align it from right within the text box, vertical alignment set to bottom.

Now, if I translate this creative into a different language or connect the dynamic feed, the text will automatically scale to the left and top.

Next, let’s set a background color for the text container. It can be solid, linear or radial gradient.

We can add a stoke by editing the fill stroke, text box shadow, border size and also border radius to create nice round corners.

Also, you can set the hyperlink for the text element. The hyperlink should be always and absolute URL with the “https://…” . If your creative will be connected to a feed, you will also be able to connect the hyperlink to the feed data.

Another feature is the visibility mode. It’s usually used when you have a feeded text. For example, you can create 2 texts and display the first one only when there is the feed data; and the second one when there is no feed data as a fallback.

The ID can be used when interacting with this element via banner API.

Finally, you can save your text style as a preset, so the next time when you will add a new text, you will be able to use one of your saved text styles.

Click the Shape button and add a new shape element on stage.

Use the Shape Properties menu to customize the style of the shape: change its color, size, opacity, borders, etc…

In order to enhance user engagement, BannerNow banners support Button elements meant for Call to Actions. These indicate a clickable element, prompting users to interact with your banner content.

Let’s build a clickable creative! First press Add > Button.

BannerNow provides a library of custom button styles. You can choose your preferred button design from a variety of options.

Now it’s time to personalize the button.

Double-click to edit the text inside the button. Properties panel is similar to text element, but it offers two shadow options: text shadow and button shadow.

Also, you can set the hyperlink for the button element. The hyperlink should be always and absolute URL with the “https://…” . If your creative will be connected to a feed, you will also be able to connect the hyperlink to the feed data.

To save a button style, simply go to Properties panel and click “Save as Preset“. When you add a button, you will have access to a gallery of pre-made designs as well as your own presets.

Whether you’re looking for ready-to-use images or want to unleash your creativity with custom designs, we’ve got you covered!

To add an image to canvas simply go to Add > Image. You will find all images organized by size categories. Also you can use the search box to find specific images.

Upload image

Go to Upload to upload your own image. Uploaded images remain private to your project so only you and your team may view or use them for this or other creatives. You can also delete uploaded images directly in the editor.

Easily organize your images by creating folders within your media gallery. Simply click on the “Add new folder” icon, give your folder a name, and start uploading images. This feature allows you to keep all the images related to one creative set in one convenient location, making it easier to manage your media assets.

Moreover, you have the flexibility to remove any media files or folders that you no longer need, helping you keep your workspace clutter-free and organized.