Banner creation


Banners are used in a variety of different ways with Showtag Enabled it is possible to just list a normal banner on the screen. But you can do so much more. First off we have enlarged the playing field to full-screen and we made a separation between the click-region and the actual graphics that are visible on the screen. Now you have more creative freedom. And if that is not enough you can actually use transparent full-screen video banners (see the other banner article here) to really be creative. Next you can have multiple banners connected to different sections of a video, in this article we explain the basic functions of delivery with a simple example.

did you know that, you can de-activate the top-bar for programme's that have no need for overview buttons. However when you design a banner you need to take in consideration if the top bar is activated, when activated it is recommended to not use the top 10% of the screen
[image: the banner safe zone if top bar is activated]

The banner design is completly free, one could use a simple JPG file or a file with a transparency such as the PNG image. Just create the banner with your favorite design tool in this example we create a PNG banner file with Photoshop. To perfectly position the banner we start with a screengrab of the actual timesegment of program where we want the banner to appear

[image: screengrab of the actual time segment]

next we create the banner on a transparent background from the various elements used, flatten out the image so all optional effects such as dropshadow are all present in the image

[image: Banner on transparent background]

place the banner on the position of your liking on the screengrab, this will be your final result (WYSIWYG)

[image: position on screengrab]

when happy with the result deactivate the screengrab layer and select your image or banner folder, drag the guidelines to the outer lines of your banner image

[image: place the guide lines around the banner and copy into a new canvas]

now select the banner region and copy-new-paste (ctrl+C | ctrl+N | ctrl+V) and then save with your desired name (no spaces in the name) you will end up with an image that looks like this

[image: the actual banner image]

use the info tool when the banner is selected in the original image (not the copied banner) and write these number down, we need them because the banner layer of Showtag Enabled uses percentages to place the banner on the exact same position and dimensions in this case it means that the banner is 1017 pixels wide and 314 pixels high - or as you will: 1017 / 1280 * 100 = 79.45% of the width of the video and 314 / 720 * 100 = 43.61% of the height of the video

[image: the actual width and height in pixels]

now we just need to calculate where the banner starts on the screen, the X/Y of the top-left corner. We simply do this again with the selection tool with the info box. And this tell us that the banner is placed at width 155 pixels and height 363 pixels, or as you will: 155/1280*100 = 12.09% of the left of the screen and 50.42% of the top of the screen

[image: the actual banner top and left position in pixels]

what is left now is to determine the click region on the banner, when we want the user to just click the Facebook circle we will set the guides around the circle in the banner image and basically repeat the same steps as above, in our example the click region is 72 width of the banner and 70 pixel height of the banner. We wrote down that the banner is 1017 pixels wide and 314 pixels high what results in a click region of 72/1017*100 = 7.08% width and 70/314*100 = 22.29% height

[image: the click region on the banner]

as for the last design calculation step we need to get the click-region position, we select the top-left section of our guide-lines what results in our example in a Width of 871 pixels and height 189 pixels, this translates to 871/1017*100 = 85.64% from the left side of the banner and 189/314*100 = 60.19% of the top of the banner

[image: the position of the click region on the banner]

when we put all of this together in the TagTool and we copy the calculated percentage numbers, the result will exactly be as designed!

[image: final result of banner placement]