Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jnicholas
Level 7

Graphics Sizes?

Is there a single list of ideal graphics sizes for all the different containers in the UI? I started out reworking the sample apps and making new graphics the same sizes but those only have a few examples.

I'd love to hand a list of graphics specs to the art guys so they could just build graphics for screen regardless of type.
0 Kudos
5 REPLIES 5\
Shlepzig
Level 8

Re: Graphics Sizes?

The component manual in the documentation has comprehensive guides to all the graphics in each of the screens and the different configurations of each screen for both SD and HD sizes.

-Shlep'
0 Kudos
RokuKevin
Level 9

Re: Graphics Sizes?

You should be able to find the sizes for all the graphics on each of our screens in both SD and HD modes in the Component Reference Guide. The art you need will be dependent on the screens you use and the content meta data that you supply to them. Graphics must be PNG or JPG. Please be aware that PNG can support transparency and JPG cannot. SD art should be created with a
0.9 non-square pixel aspect ratio. This setting is available in design tools like Adobe Photoshop and may be referred to as D1/DV NTSC (0.9). HD art should be created with square pixels.

If you want to get your graphic artist started on a minimal set, you will need the following dimensions:
Channel Store Art:
HD Poster Art: 290x218
SD Poster Art: 214x144
Home Screen Icons references in your manifest:
mm_icon_focus_hd: 336 x 210
mm_icon_side_hd: 108 x 69
mm_icon_focus_sd: 248 x 140
mm_icon_side_sd: 80 x 46
Overhang Art: (The stripe at the top of all your screens in your channel)
Note that Overhangs are designed in two different ways. Some channels
will have their logos part of the Overhang slice image and not have separate
logos displayed over the slice backround. Other channels will use the
primary and/or secondary logos and their offsets to display logos on top of
the background slice. The first option gives the artist complete control of
the layout. The second option requires the developer to code offsets in the
script but gives the flexibility of programatically displaying different
icons over the background slice.

OverhangSliceSD
Overhang width SD: 720
suggested maximum Overhang height SD: 83
enforced maximum Overhang height SD: 92

OverhangSliceHD
Overhang width HD: 1280
suggested maximum Overhang height HD: 124
enforced maximum Overhang height HD: 138

Between the suggested maximum height and the enforced maximum height
is a transition area in which graphic artists should alpha blend their
overhang art into the screen background. The transition area will
be overlayed by the Filter Banner, Modal Dialogs, and other native
UI widgets. Therefore the transition area of the overhang will not
always be visible. Note that the Overhang width pattern will be
repeated if it is not full width.
A solid Overhang can be created with a width of 1 pixel and the same
pixel will be extended to 720 or 1280 width depending on SD or HD.

OverhangPrimaryLogoSD
OverhangSecondaryLogoSD
OverhangPrimaryLogoHD
OverhangSecondaryLogoHD
If you've chosen to use these logos, they must fit nicely
in the Overhang enforced max dimensions.

Art for the main screen of your channel will be dependent on the screen
type you choose. If you want your graphic artist to generate multiple
sizes for all art in your feeds, our current screen types need the
following sizes:

roPosterScreen (different styles)
arced-portrait: SD=158x204; HD=214x306
arced-landscape: SD=214x144; HD=290x218
arced-16x9: SD=166x112; HD=224x168
arced-square: SD=223x200; HD=300x300 (SD dimensions are square...
remember the SD non-square pixels)
flat-category: SD=224x158; HD=304x237
flat-episodic: SD=166x112; HD=224x168
rounded-rect-16x9-generic: SD=177x90;HD=269x152
flat-episodic-16x9: SD=185x94; HD=250x141

Banner Ad: SD=540x60; HD=728x90 (available on flat-category style)

roSpringboardScreen (defaults based on ContentType)
audio: SD=124x112; HD=188x188
episode: SD=180x122; HD=264x198
(any other): SD=112x142; HD=148x212

(using SetPosterStyle() to override ContentType default)
rounded-square-generic: SD=143x129; HD=209x209
rounded-rect-16x9-generic: SD=177x90; HD=269x152

Banner Ad: SD = 540x60; HD = 728x90
0 Kudos
jimtanner
Level 7

Re: Graphics Sizes?

Kevin, I think there's a typo in that list--the size you have listed for HD "arced-16x9' works out to a 4:3 (1.333...) aspect ratio, not 16x9 (1.777...). To get a 16x9 image, it would be 298x168 (or 224x126, but that seems small given the other values).

Jim
0 Kudos
RokuKevin
Level 9

Re: Graphics Sizes?

Good catch Jim.

It looks like the dimensions for arced-16x9 are actually:

SD: 285x145
HD: 385x218

--Kevin
0 Kudos
AlexHolsgrove
Level 7

Re: Graphics Sizes?

0 Kudos