Forum Discussion

jnicholas's avatar
jnicholas
Visitor
16 years ago

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.

5 Replies

  • 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'
  • 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
  • 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
  • Good catch Jim.

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

    SD: 285x145
    HD: 385x218

    --Kevin