Quick Look: Artwork

Modified on Thu, Nov 14 at 10:02 AM

OTTera's Channel Editor is our proprietary application-building tool. And the Artwork section allows you to customize any artwork used in the applications. You will upload your logo and background images (only visible if you selected Image on the Theme Settings (Backgrounds) slide).


This artwork is used to generate the artwork for ALL platforms we support through a scripted process. As such, please follow the recommended size and format dictated in and by the Channel Editor to get the best quality output.


On each of the pages in this section of the Channel Editor, you will find an OTTera branded example, the name of the asset (i.e. “App Icon - General”), pixel dimensions, and corresponding file type the asset needs to be. 


NOTE: Any asset example with the gray checkered background should be uploaded with a transparent background.


To upload an asset, click on the default image you wish to replace, select image from your computer from the file menu, and click Select Image.


For your convenience, we have compiled a list of all the image files below: 


App Icons (General)

App Icon - General | 1024 x 1024 PNG

Layered App Icon Back - tvOS | 1280 x 768 PNG

Layered App Icon Front - tvOS | 1280 x 768 PNG (transparent background)

Layered App Icon Middle - tvOS | 1280 x 768 PNG (transparent background)


App Icons (Roku)

App Icon HD - Roku | 336 x 210 JPG

App Icon SD - Roku | 248 x 140 JPG

App Sidebar Icon HD - Roku | 108 x 69 JPG

App Sidebar Icon SD - Roku | 80 x 46 JPG


Logos (General) (Transparent backgrounds for all 4)

Mobile App Title Logo | 350 x 60 PNG | NOTE: Should have very little margin on top/bottom, otherwise the logo will look too small on phones/tablets

Transparent Logo / Watermark | 160 x 128 PNG

Transparent 360 Logo / 360 Video Watermark | 160 x 128 PNG

Push Notifications Transparent Logo - Android | 76 x 76 PNG | NOTE: This square logo will become a single color monochrome image and should be a silhouette


Banners (TVs)

Wide Top Shelf Banner | 2320 x 720 PNG

Top Shelf Banner | 1920 x 720 PNG

Header Banner Logo (Optional) | 640 x 108 PNG (transparent background) | NOTE: Only leave 1-2 pixel margin on the left of this asset, this is to ensure it will properly align with text below it in apps


Logos (TV Header Bar) (transparent background for all 4) | NOTE: Typically the Left and Right Header logo are empty images and should only be included if they are different from the center logo. All would be visible at once.

TV Header Center Logo | 948 x 160 PNG

TV Header Left Logo (Optional) | 948 x 160 PNG

TV Header Right Logo (Optional) | 948 x 160 PNG

Full Width Header Background - Roku (Optional) | 1280 x 108 PNG


Launch Images (General) | NOTE: Make sure the logo size on launch images is large enough while allowing for appropriate margin. For phones, be careful to leave 10-15% margin on each side as the image will be cropped for tall iPhone X/11/12/13 devices and won't be 9x16.

TV Launch Image | 1920 x 1080 PNG

Phones Launch Image | 1080 x 1920 PNG

Tablets Launch Image | 2732 x 2048 PNG


Launch Images (Specific)

Roku HD Launch Image | 1920 x 1080 JPG

Roku SD Launch Image | 720 x 480 JPG

HTML5 Launch Overlay | 1280 x 720 PNG transparent background

HTML5 Launch Tiled Gradient Background | 1 x 720 PNG


Backgrounds (Main)

Tip: Darker colors and simple design are recommended for viewer experience. 

To enable background images in the app, make sure to select Image on the Theme Settings (Backgrounds) page.

TVs Background | 1920 x 1080 PNG

Phones Background | 960 x 1704 PNG

Tablets Background | 1024 x 768 PNG

Menu Selections Background (Typically Blurred) | 640 x 960 JPG


Backgrounds (Mobile Navigation Bar)

Tablets Navigation Bar Background | 2048 x 152 PNG

Phones Navigation Bar Background | 960 x 192 PNG

iPhone X Navigation Bar Background | 1125 x 265 PNG


Backgrounds (Mobile Tab Bar)

Tablets Tab Bar Background | 2048 x 112 PNG

Phones Tab Bar Background | 1080 x 147 PNG

iPhone X Tab Bar Background (optional) | 1125 x 250 PNG


Loading Content Image Placeholders (transparent backgrounds for all)

Widescreen Image Placeholder | 1244 x 700 PNG

Square Image Placeholder | 700 x 700 PNG

Characters Square Image Placeholder (Optional) | 300 x 300 PNG

Featured Image Placeholder (Optional) | 1137 x 640 PNG


Examples:


Phone Launch Image


Default Icons and Indicators


This section of the Channel Editor comprises default icons and indicators. Replace any you desire in the same way you replaced images in the previous section.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article