Creating a 3D Poster Creative only takes a few minutes.
All you need are some PNG Images with layers for the 3D effect.
2022.12
Spec sheet - 3D Poster
Required assets
Layered images
Upload PNG images with an alpha channel for the 3D layers.
Fox.PNG
Ground.PNG
Plants.PNG
Pebbles.PNG
Background image
Upload a JPG image for the 3D background.
The background image is automatically mirrored on all sides so that the 3D effect works even when looking "outside" of the background image. Note: The image needs to have the same aspect ratio as the Creative itself or stretching will occur.
Background.JPG
Optional images
You can add any PNG or JPG image for the CTA, logo and other overlay images or an MP4 video.
Logo.PNG
CTA.PNG
CTA.PNG
Supported Formats
Mobile formats 300x250 - Medium rectangle 320x50 - Mobile leaderboard 320x320 - Mobile square 320x480 - Interstitial
Desktop formats 120x600, 160x600 - Skyscraper 300x250 - Medium rectangle 300x600 - Half-page 728x90 - Leaderboard 800x250, 970x250 - Billboard
Custom formats You can create any size as a custom format.
Responsive
The 3D poster currently does not support Responsive behaviour.
Supported URLs and Tracking
Clickout URLs
General * Main * CTA
Integrated tracking
General * CTR * Visibility * Dwell time * Engagement
Special * 3D interaction
2022.12
3D Layers
3D Layers
3D Layers are grouped into 4 different depth layers: Front, Center, Near and Far. The 5th depth layer is Background. As the names indicate, the layers define how close or far from the camera the images in the layers are. You can see the effect when using the mouse to rotate: The camera rotates around the Center layer. The Near, Far and Background layers are positioned behind the center of the screen. The Front layer is in front of the screen, looking like it is coming out of the screen.
Upload Image
Just drag and drop a JPG image over the thumbnail to upload the image or click on the thumbnail to open a file-browser.
Add Layer
Click "+ Layer" on the top of the layer group. This will create a new Image layer in that layer group.
Add Video
Click "+ Video" on the top of the layer group. This will create a new Video layer in that layer group. You can only use one video in each 3D Poster.
Move image between 3D layers
Use the Up/Down icons to move the Image one layer up or down. Or hold the Left mouse button on the "Drag" icon and move the mouse up or down to drag the Image to another layer.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Intro animation
Intro animation
When the banner starts, a camera animation is playing. You can adjust the target, depth and rotation of the animation to fit to your individual 3D scene.
Tip: Set the Live Preview to Pause
While you are editing the Intro animation, set the Preview to "Pause". Now set the timeline to the very beginning. Also make sure that while editing "Show white fade-out" is turned off. Otherwise you will only see a white screen.
Move
Move defines the target position of the camera.
Move - Depth
The depth slider defines how "deep" the camera flies into your 3D scene in the beginning.
Rotate
Rotate defines the rotation angle of the camera. If you don't want any rotation, just set it to 0.
Scale - Depth
"Scale - Depth" defines how much the depth of the 3D scene is stretched. More stretching leads to a more dramatic 3D effect.
Show White fade-out
Turn this on to add a white fade-out effect in the beginning.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Lens flares
Edit lens flares
Enable lens flares
Turn on the lensflare effect by checking the "Show Lensflare" box.
Scale
Scale defines how far apart the flares are.
Move
Move the position of the lensflare effect using the sliders.
Rotate
Rotates the lensflares around the source.
Color and opacity
Changes the color and opacity of all lensflares.
Lens flare setting
Number of flares
"Number of flares" defines how many separate flares are shown.
Scale
"Scale" defines the size of each individual flare.
Opacity
"Opacity" defines how transparent each individual flare is rendered.
Depth
"Depth" defines the distance from the lensflare origin of each individual flare.
Color and opacity
"Base color / Opacity" defines the color and transparency of the whole lensflare effect.
Upload lensflare image
Upload your own image to be used in the lensflare effect.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
3D Poster Settings
Border
Creates a boarder around the canvas. Use the color picker to define the border color.
Background
Use the color-picker to chose a background color. Note: In some formats the whole background can be covered by other Elements. So the background color is not always visible.
Use the Color picker to chose a color.
Swipe gesture
Show
The Swipe gesture is enabled by default. Uncheck this box to hide it.
Scale and move
Use the slider to change the size and position of the Swipe gesture.
Upload image
Upload your own PNG image for the Swipe gesture by clicking on the thumbnail or using drag and drop.
Responsive
Enable
Check the box to enable Responsive behaviour. This will turn on the automatic Responsive behaviour and enable additional Responsive features in the respective Elements.
Aspect
Turn "Aspect Limits" on to define the minimum and maximum Aspect ratio allowed for the responsive feature. Aspect ratios below and above the defined range will create borders to fill the target area.
Scale
Defines the scaling behaviour of an individual Element.
Fixed - Does not scale at all. Scale up - Scales up to the larger width or height. Cropping may occur. Scale down - Scales down to the smaller width or height. No cropping will occur. Scale Width/Height - Scale so that the size relative to the width/height stays the same.
Position
Defines the repositioning behaviour of an individual Element.
Pin - Move at a fixed distance to the anker point. Relative - Move with a relative distance to the anker point.
Aligning
By default the aligning is turned to "automatic". In this mode the aligning behaviour is automatically set, depending on the position of the Element on the canvas.
Turn on "Align custom" to enable customized aligning behaviour and chose between "Left/Center/Right" and "Top/Center/Bottom" aligning for the selected Element.
Weight optimization
Set the maximum Quality of all JPG images. By default the Quality is set to "90%".
To reduce the weight of your banner, just chose a lower quality setting and all images will be re-encoded to fit the new setting. You can see the resulting size in kb in the header under "Estimated weight:".
Note: All uploaded JPG images which have a lower quality will not change at all, so your banner will never become larger than the original assets. Only Images with a higher quality will be re-encoded to match the defined quality.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Live view
Live view
The Preview shows your interactive Creative exactly as it will be shown when it is live. All changes will be shown immediately in realtime.
Timeline controls
Play/Pause toggles between Play and Pause mode. Reset sets the time to 0 and restarts all animation from the beginning Timeline - Use the slider to set the current time Current time - Type in the current time directly Repeat - Turn Repeat on to make the animation restart when the end of the animation has been reached.
Zoom
By default the Zoom is set to 100%. Setting it to 50% or 75% makes the Preview smaller, so that even large Creatives can fit to very small screens. Setting it to 150% or 200% shows the Preview larger, so that you can check for details or simulate higher resolutions.
Responsive sizes
Click on one of the icons to set your preview to the most common formats on mobile devices. Or hold the lower left edge of the Creative preview and move it to any custom size.
Event output
The Event output shows all events that are triggered in realtime. By default all common events are automatically integrated, including CTR, viewtime, engagement and more.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Tracking & URLs
Click URL
You can set the Clickout URL directly here by adding the URL into the "Main/Default" field. Or you can overwrite the URL in the Tags.
Tracking
Impression
Once the Creative is loaded, this TAG is fired.
Measurable
Once the Creative is loaded and Primo can detect viewability this TAG is fired. The number of measurables is maximum the number of impressions.
Viewable
Once the Creative is loaded and viewability is detectable Primo fires this TAG when at least 50% of the Creative was visible for at least 1s.
Touch Down
Is triggered as soon as the mouse is down (Left click) anywhere over the Creative.
Mouse Enter
Is triggered as soon as the mouse is over the Creative.
