Roku Developer Program

[Davidb7236]

Hello,

Can anyone guide me, I need help creating artwork for the Roku Channel.

Thanks

[MSGreg]

There are lots of artwork requirements, depending on the type of channel. You'll need to review the developer guides on the exact requirements. One thing that is important is that you will likely want to create artwork for both SD and HD modes, regardless of any video aspect ratios. The pixel dimensions and pixel aspect ratio can be different for SD vs. HD mode, so be aware of that if you're particular about correct aspect ratios.

You'll probably have main channel SD and HD artwork, screenshots, then artwork internal to the channel such as roPosterScreen, themes, inside the player, and BIF. The artwork required depends on if you have audio or video players in your channel and whether you might have custom artwork. I use ffmpeg to extract jpeg files required from video, then GIMP if necessary to resize for SD and HD.

Here's the cheat sheet I created for assembling all the artwork sizes in one place. Note that some screens have the ability to resize artwork.

Ask a more specific question and you might get a more specific answer.



Image Sizes for Channel

Channel Store: SD=214x144; HD=290x218

Image Sizes for content
Content Meta-Data
Url (roSlideShow or roImageCanvas)
SDBifUrl
HDBifUrl
SDPosterUrl
HDPosterUrl


roPosterScreen = will scale
o “arced-portrait” - Artwork sizes: SD=158x204; HD=214x306
o “arced-landscape” banner Ad - Artwork sizes: SD=214x144; HD=290x218
o “arced-16x9” – Artwork sizes: SD=285x145; HD=385x218
o “arced-square” – Artwork sizes: SD=223x200; HD=300x300 Note: is non-square NTSC pixel aspect ratio images
o “flat-category” banner Ad – Artwork sizes: SD=224x158; HD=304x237
o “flat-episodic” – Artwork sizes: SD=166x112; HD=224x168
o “rounded-rect-16x9-generic” – Artwork Sizes: SD=177x90; HD=269x152
o “flat-episodic-16x9” – Artwork sizes: SD=185x94; HD=250x141

Banner Ad HD = 728x90 Banner Ad SD = 540x60


roSpringboard - image based on ContentType
"Artwork may be displayed portrait or landscape orientation depending on the ContentType set in the metadata."
3. audio - SD=124 x 112; HD=188 x 188
4. episode - SD=180 x 122; HD=264 x 198
5. any other value - SD=112 x 142; HD=148 x 212

DescriptionStyle
"audio"
"movie"
"video" banner Ad
"generic"

PosterStyle
o “rounded-square-generic” – Artwork sizes: SD=143x129; HD=209x209 Note: is non-square NTSC pixel aspect ratio images. (Default)
o “rounded-rect-16x9-generic” – Artwork Sizes: SD=177x90; HD=269x152
Since Firmware version 2.6:
o “multiple-portrait-generic” – Artwork sizes: SD=104x134; HD=142x202

Banner Ad HD = 728x90 Banner Ad SD = 540x60

Ad Display mode - scale-to-fill, scale-to-fit



Slideshow images DisplayMode - scale-to-fill, scale-to-fit, zoom-to-fill, photo-fit

roGridScreen
Original Artwork sizes: SD=110x150; HD=210x270 (jpg is optimal)

o flat-movie – movie posters as seen in the Netflix channel (Default)
? Image sizes: SD 110x150 HD 210x270
? SD 5 posters across, by 2 rows
? HD 5 posters across, by 2 rows
o flat-portrait
? Image sizes: SD 110x140 HD 210x300
? SD 5 posters across, by 2 rows
? HD 5 posters acress, by 2 rows
o flat-landscape
? Image sizes: SD 140x94 HD 210x158
? SD 4 posters across, by 3 rows
? HD 5 posters across, by 3 rows
o flat-square – note that SD has non-square pixels so the dimensions below appear as square on the screen
? Image sizes: SD 96x86 HD 132x132
? SD 6 posters across, by 3 rows
? HD 7 posters across, by 3 rows
o flat-16x9
? Image sizes: SD 140x70 HD 210x118
? SD 4 posters across, by 3 rows
? HD 5 posters across, by 3 rows


BIF Sizes
viewtopic.php?t=23520
So here's one way to generate them:
% mkdir abc-sd abc-hd
% ffmpeg -i abc.mp4 -r .1 -s 240x180 abc-sd/%08d.jpg
% ffmpeg -i abc.mp4 -r .1 -s 320x240 abc-hd/%08d.jpg
% biftool -t 10000 abc-sd
% biftool -t 10000 abc-hd

[gonzotek]

"MSGreg" wrote:
There are lots of artwork requirements, depending on the type of channel. You'll need to review the developer guides on the exact requirements. One thing that is important is that you will likely want to create artwork for both SD and HD modes, regardless of any video aspect ratios. The pixel dimensions and pixel aspect ratio can be different for SD vs. HD mode, so be aware of that if you're particular about correct aspect ratios.

You'll probably have main channel SD and HD artwork, screenshots, then artwork internal to the channel such as roPosterScreen, themes, inside the player, and BIF. The artwork required depends on if you have audio or video players in your channel and whether you might have custom artwork. I use ffmpeg to extract jpeg files required from video, then GIMP if necessary to resize for SD and HD.

Here's the cheat sheet I created for assembling all the artwork sizes in one place. Note that some screens have the ability to resize artwork.

Ask a more specific question and you might get a more specific answer.



Image Sizes for Channel

Channel Store: SD=214x144; HD=290x218

Image Sizes for content
Content Meta-Data
Url (roSlideShow or roImageCanvas)
SDBifUrl
HDBifUrl
SDPosterUrl
HDPosterUrl


roPosterScreen = will scale
o “arced-portrait” - Artwork sizes: SD=158x204; HD=214x306
o “arced-landscape” banner Ad - Artwork sizes: SD=214x144; HD=290x218
o “arced-16x9” – Artwork sizes: SD=285x145; HD=385x218
o “arced-square” – Artwork sizes: SD=223x200; HD=300x300 Note: is non-square NTSC pixel aspect ratio images
o “flat-category” banner Ad – Artwork sizes: SD=224x158; HD=304x237
o “flat-episodic” – Artwork sizes: SD=166x112; HD=224x168
o “rounded-rect-16x9-generic” – Artwork Sizes: SD=177x90; HD=269x152
o “flat-episodic-16x9” – Artwork sizes: SD=185x94; HD=250x141

Banner Ad HD = 728x90 Banner Ad SD = 540x60


roSpringboard - image based on ContentType
"Artwork may be displayed portrait or landscape orientation depending on the ContentType set in the metadata."
3. audio - SD=124 x 112; HD=188 x 188
4. episode - SD=180 x 122; HD=264 x 198
5. any other value - SD=112 x 142; HD=148 x 212

DescriptionStyle
"audio"
"movie"
"video" banner Ad
"generic"

PosterStyle
o “rounded-square-generic” – Artwork sizes: SD=143x129; HD=209x209 Note: is non-square NTSC pixel aspect ratio images. (Default)
o “rounded-rect-16x9-generic” – Artwork Sizes: SD=177x90; HD=269x152
Since Firmware version 2.6:
o “multiple-portrait-generic” – Artwork sizes: SD=104x134; HD=142x202

Banner Ad HD = 728x90 Banner Ad SD = 540x60

Ad Display mode - scale-to-fill, scale-to-fit



Slideshow images DisplayMode - scale-to-fill, scale-to-fit, zoom-to-fill, photo-fit

roGridScreen
Original Artwork sizes: SD=110x150; HD=210x270 (jpg is optimal)

o flat-movie – movie posters as seen in the Netflix channel (Default)
? Image sizes: SD 110x150 HD 210x270
? SD 5 posters across, by 2 rows
? HD 5 posters across, by 2 rows
o flat-portrait
? Image sizes: SD 110x140 HD 210x300
? SD 5 posters across, by 2 rows
? HD 5 posters acress, by 2 rows
o flat-landscape
? Image sizes: SD 140x94 HD 210x158
? SD 4 posters across, by 3 rows
? HD 5 posters across, by 3 rows
o flat-square – note that SD has non-square pixels so the dimensions below appear as square on the screen
? Image sizes: SD 96x86 HD 132x132
? SD 6 posters across, by 3 rows
? HD 7 posters across, by 3 rows
o flat-16x9
? Image sizes: SD 140x70 HD 210x118
? SD 4 posters across, by 3 rows
? HD 5 posters across, by 3 rows


BIF Sizes
viewtopic.php?t=23520
So here's one way to generate them:
% mkdir abc-sd abc-hd
% ffmpeg -i abc.mp4 -r .1 -s 240x180 abc-sd/%08d.jpg
% ffmpeg -i abc.mp4 -r .1 -s 320x240 abc-hd/%08d.jpg
% biftool -t 10000 abc-sd
% biftool -t 10000 abc-hd

I wish this board had reputation points so I could +1 you for creating that cheat sheet! 🙂 Thanks!

[Davidb7236]

Sorry, but all that has been asked of me is to provide the art work for this payout.
POSTER GRIDSCREEN HD 224x168
POSTER GRIDSCREEN SD 166x112
POSTER POSTER SCREEN HD 304x238
POSTER POSTER SCREEN SD 224x158
OVERHANG GRIDSCREEN HD 1280x69
OVERHANG GRIDSCREEN SD 640x49
OVERHANG POSTER SCREEN HD 1280x130
OVERHANG POSTER SCREEN SD 720x87
CENTER LOGO CHANNEL IMAGE HD 366x210
CENTER LOGO CHANNEL IMAGE SD 248x140
SIDE LOGO CHANNEL IMAGE HD 108x69
SIDE LOGO CHANNEL IMAGE SD 80x46
SPLASH SCREEN HD 1280x720
SPLASH SCREEN SD 720x480

[RokuJoel]

Create blanks using the sizes you listed in photoshop, set all the SDTV artwork to DV NTSC aspect ratio *before* you begin. Create all your artwork for those sizes. Use Save For Web to save the artwork in as high visual quality as possible with as small a file size as possible. You may find that you have to save some as .jpg and some as Png24 or PNG8 to achieve the best look for the smallest file size. Assuming the developer knows what they are doing, they will be able to handle whatever filetype you use (png8, png24,gif, jpg are the supported types). Ideally, the completed channel including the artwork should be < 500k when it is zipped.

- Joel

[Davidb7236]

Thank Joel,

Great Idea...