Layered images are at the essence of the Apple TV user experience. In conjunction with the parallax effect, they produce a sense of realism and vigor that evokes a personal connection as people interact with content onscreen.
A layered image consists of two to five distinct layers that come together to form a single image. The separation between layers, along with use of transparency, creates a feeling of depth. As someone interacts with an image, layers closer to the surface elevate and scale, overlapping lower layers farther back and producing a 3D effect.
Important Layered images are required for app icons. They’re optional but strongly encouraged for other focusable images in your app, including top shelf images.
Use standard interface elements to display layered images. If you use UIKit views and the focus API, layered images automatically get the parallax treatment whenever they’re brought into focus.
Identify logical foreground, middle, and background elements. In foreground layers, display prominent elements such as a character in a game, or text on an album cover or movie poster. Middle layers are perfect for secondary content and effects like shadows. Background layers are opaque backdrops that showcase the layers above without upstaging them.
Generally, keep text in the foreground. Unless you want to obscure text, bring it to the forefront in a layered image for clarity.
Keep the background layer opaque. Using varying levels of opacity to let content shine through higher layers is fine, but your background layer must be opaque—you’ll get an error if it’s not. This ensures your artwork looks great with parallax, drop shadows, and system backgrounds.
Keep layering simple and subtle. Parallax is designed to be almost unnoticeable. Excessive 3D effects can appear unrealistic and jarring. Keep depth simple to bring your content to life and add delight.
Sizing Layered Images
To determine the appropriate size for a layered image, take both the unfocused and focused states into account. During the parallax effect, background layers may be cropped slightly, so keep essential content within a safe zone and include some additional breathing room to make sure your content always looks great.
The following formulas are recommended for calculating sizing for a layered image based on the size of the image when it’s not in focus.
|Side||Focused/Safe zone size||Actual size|
|Longest side||Length of longest unfocused side + 70pt||Length of longest focused side × 106%|
|Shortest side||Proportional based on longest side||Proportional based on longest side|
Creating Layered Images
Layered images can be embedded in your app or retrieved from a content server at runtime.
For developer guidelines on implementing layered images in your app project in Xcode, see App Programming Guide for tvOS.
Embedded Layered Images
Use the Parallax Previewer app for macOS, the Parallax Exporter Adobe Photoshop plug-in, or Xcode to create layered images for inclusion in your app, and make sure they appear as expected during the parallax effect. Download Parallax Previewer and Parallax Exporter in Resources.
- Parallax Previewer app for macOS. Parallax Previewer can import .png images to serve as individual layers, layered images (.lsr) created with the Parallax Exporter plug-in, and layered Photoshop images (.psd). Parallax Previewer can export layered images (.lsr) that you can import directly into an Xcode project.
- Parallax Exporter Adobe Photoshop plug-in. Use this plug-in to test your layered images in Photoshop and export them as layered images (.lsr) that you can import directly into an Xcode project.
- Xcode. Drag standard .png files into your app’s asset catalog to serve as individual layers of an image stack in Xcode. Image stacks can be exported as layered images (.lsr). Xcode can also import .lsr images.
Runtime Layered Images
If your app retrieves layered images from a content server at runtime, you must provide those images in runtime layered image (.lcr) format. You don’t create runtime layered images directly; you generate them from .lsr or Photoshop files using the layerutil command-line tool that’s installed with Xcode. Runtime layered images are intended to be downloaded and should not be embedded within your app itself.