Author Topic: How to create Apple TV App Icons and Top Shelf Images  (Read 10206 times)

kjmcneish

  • Administrator
  • *****
  • Posts: 717
    • View Profile
How to create Apple TV App Icons and Top Shelf Images
« on: November 06, 2015, 04:21:23 PM »


There are three required images you must create for your tvOS app, two of which are shown in the above image:

1. The Top Shelf image (1920 x 720px, single or multi-layered) is shown when the user puts your app in the top row of their Apple TV home screen (the large, image shown at the top of the above image).

2. The Small Icon (400 x 240px, layered image), , which used on the Apple TV home screen (the smaller icon shown at the bottom of the above image).

3. The Large Icon (1280 x 769px, layered image), which is used in the App Store.

Layered Images
Layered images must contain from 2 to 5 layers. The layers are used to give the image a parallax effect when viewed on Apple TV.

You can be created a layered image in several ways. For example:

1. In Photoshop
2. In Xcode
3. Using Apple's Parallax Previewer

I'll skip instructions for Photoshop, but you an read more about it at this link: https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/. Unfortunately, dragging and dropping images directly into Xcode doesn't seem to work reliably at this time, so I'll focus on using Apple's Parallax Previewer.

Apple's Parallax Previewer
The Parallax Previewer is shown in Figure 1.



You can download Apple's Parallax Previewer at this link: https://developer.apple.com/tvos/download/.

Basically, you add a different PNG or JPG file for each layer you want to add to your icon. You can rearrange and resize these layer images and the Parallax Previewer will create a layered image (.lsr file) for you, which you can import into Xcode.

Here are the basic steps, which you need to perform twice...once for the small App Icon and once for the Large App Icon:

1. Click the plus (+) button at the bottom-left corner of the screen, and select the files you want to add. This adds the images to the left pane of the Parallax Previewer screen.

2. Drag the files in the left pane in the order in which the layers should appear (the image at the top will be the image in the front layer, the second image will be in the second layer, and so on).

3. Select File > Export > LSR... from the Parallax Previewer menu.

4. Select the folder where you want to store the .LSR output file.

5. Drag the .LSR file into your Apple TV project's Assets.xcassets file.

6. In Xcode, drag the individual layers from the .LSR file and into the App Icon (Large or Small) section.

You should now be able to run your tvOS app in the Apple TV Simulator and see your icons and Top Shelf image!

All the best!
Kevin McNeish
Author of Learn to Code in Swift: https://itunes.apple.com/us/book/learn-to-code-in-swift/id942956811?mt=11
Check out our Robot Tic-Tac-Toe app: https://itunes.apple.com/us/app/robot-tic-tac-toe/id990638517?mt=8
« Last Edit: November 07, 2015, 12:16:49 PM by kjmcneish »

biochili

  • Newbie
  • *
  • Posts: 1
    • View Profile
Re: How to create Apple TV App Icons and Top Shelf Images
« Reply #1 on: January 27, 2016, 01:17:09 PM »
Quote
3. The Large Icon (1280 x 769px, layered image), which is used in the App Store.

Hello Kevin,

I have observed that some apps in the tvOS App Store are showing the large app icon at 660x396 at the right side of the text. (examples: Plex, Infuse, Dungeon Quest)

Other apps, however, are showing a full-width background image at 1920x776. This does not seem to be the large app icon. (Examples: tape.tv, Badland, Netflix)

Would you maybe know where those full-width images come from?

I suspect the App Store has stored additional promo imagery for these apps.

Best regards