Layered Images

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.

Leave a safe zone around your content. During focus and parallax, content around the edges of some layers may be cropped or difficult to see clearly as the image scales and moves. To ensure that your primary content is always visible, don’t put it too close to the edges. The safe zone varies, depending on the image size, layer depth, and motion. Foreground layers are cropped more than background layers.

Icon with safe zone guides

Always preview layered images. The best way to design layered images that look great on Apple TV is to preview them throughout your design process using Xcode, the Parallax Previewer app for macOS, or the Parallax Exporter Photoshop plug-in. Pay special attention as scaling and clipping occur, and readjust your imagery to keep important content safe if necessary. Once your layered images are final, make sure you preview them on an actual TV for the most accurate representation of what people will see. Parallax Previewer and Parallax Exporter are available for download in Resources.

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.

Sizing Diagram for Layered Images

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.