# Artwork

**URL:** <https://forum.developer.roku.com/t/artwork/1506>\
**Category:** Archived\
**Tags:** roku-developer-program\
**Created:** [July 13, 2012, 2:34pm UTC](https://forum.developer.roku.com/t/artwork/1506 "2012-07-13T14:34:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Davidb7236](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@Davidb7236](https://forum.developer.roku.com/u/Davidb7236)\
**Post date:** [July 13, 2012, 2:34pm UTC](https://forum.developer.roku.com/t/artwork/1506/1 "2012-07-13T14:34:56Z")

</div>

Hello,

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

Thanks

---

<div class="post-metadata">

**Author:** ![MSGreg](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@MSGreg](https://forum.developer.roku.com/u/MSGreg)\
**Post date:** [July 13, 2012, 3:09pm UTC](https://forum.developer.roku.com/t/artwork/1506/2 "2012-07-13T15:09:06Z")

</div>

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](http://forums.roku.com/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

---

<div class="post-metadata">

**Author:** ![gonzotek](https://sea3.discourse-cdn.com/roku/user_avatar/forum.developer.roku.com/gonzotek/32/93_2.png) [@gonzotek](https://forum.developer.roku.com/u/gonzotek)\
**Post date:** [July 13, 2012, 6:49pm UTC](https://forum.developer.roku.com/t/artwork/1506/3 "2012-07-13T18:49:44Z")

</div>

> “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](http://forums.roku.com/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-hdI wish this board had reputation points so I could +1 you for creating that cheat sheet! 🙂 Thanks!

---

<div class="post-metadata">

**Author:** ![Davidb7236](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@Davidb7236](https://forum.developer.roku.com/u/Davidb7236)\
**Post date:** [July 13, 2012, 7:01pm UTC](https://forum.developer.roku.com/t/artwork/1506/4 "2012-07-13T19:01:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RokuJoel](https://avatars.discourse-cdn.com/v4/letter/r/e95f7d/32.png) [@RokuJoel](https://forum.developer.roku.com/u/RokuJoel)\
**Post date:** [July 13, 2012, 8:18pm UTC](https://forum.developer.roku.com/t/artwork/1506/5 "2012-07-13T20:18:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Davidb7236](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@Davidb7236](https://forum.developer.roku.com/u/Davidb7236)\
**Post date:** [July 13, 2012, 8:27pm UTC](https://forum.developer.roku.com/t/artwork/1506/6 "2012-07-13T20:27:47Z")

</div>

Thank Joel,

Great Idea…