How We Designed a Layered Image for the New Apple TV
You can download our files at the bottom of this article to dissect.
With the new Apple TV, Apple has introduced a new touch enabled remote and with it some new interactions designers need to take into consideration. One such thing are the layered images that respond to the touch focus on the remote.
To see great examples of these images, check out the movie posters in the Movies app. Additionally, you’ll notice that the icon tiles for the apps on your Apple TV can take advantage of this layering feature. Within the App Store this effect is also used in the banners for featured apps. It’s not a super in-your-face effect, but more of a subtle shifting, parallax effect.
At Storehouse we’ve built a new app for the new Apple TV and we were lucky enough to have the App Store Editorial Team request some additional artwork. If you’ve had to provide promotional artwork before, you know that the turn around time is extremely short. We quickly worked up a plan for an image that was doable given our time frame, the resources at our disposal, and our want for it to be truly multi-layered.
Given the new features and new way of interacting with Storehouse for the Apple TV we thought we should play up the interpersonal use case: viewing and creating stories in your living room. We ended up settling on a simple scene that would have multiple planes: a wall, a tv, people on a couch, and finally our logo. We grabbed our resources from the office and set up our scene.
Because of the multi-layering effect, we knew we’d need to take multiple images with things removed from each subsequent frame so we could layer it all up in Photoshop. Being careful not to move the camera we set up on a tripod, we took a photo for each plane of content in our final image.
Bringing each layer into the document, we erased all but the key content for each subsequent plane in the composition. We erased all but the TV from one image, all but the people and couch from another. We photoshopped one of our screens into the TV — using a Smart Object in case we want to switch it out in the future — making sure to try and match the highlights, grain, and even the slight blurriness of the original photo of the TV.
Finally, we added our logo to the document in the safe zone outlined in Apple’s guidelines, and threw in a radial gradient dimming layer so you could actually see the logo (important, for sure) and to draw the eye away from all that brick. These layers made our final folder structure look like this:
- 4 (Storehouse Logo)
- 3 (Dimming Layer)
- 2 (People/Couch)
- 1 (TV)
- Full-Bleed Background (Wall)
Using the LSR preview plugin for Photoshop we got a small preview of how this would look and feel. The preview looked pretty good, but the plugin is a bit sluggish, so we exported it as an .lsr which we could then open with Apple’s Parallax Previewer to really take for a test drive. In the Previewer we could tell the final result was what we were aiming for, so we were able to submit our artwork on time.
If you visit the Apple Developer Member Center you’ll find some guidelines and resources to help you along with creating and previewing a layered image — including how you should order your layers in Photoshop — which basically summed up is:
- You have — at maximum — 5 layers to utilize.
- Group your layers into folders titled: 4, 3, 2, 1, Full-Bleed Background, and group all of those into a folder called Art.
- No blend modes on any layer or folder.
- Layer effects are okay to use.
- Stick the important bits in the safe zone.
- Your safe zone, edges will be cropped in a bit on focus / while it’s moving.
- Your background needs to be opaque and cover the whole canvas.
- Be subtle.
Resources:
- Apple’s guidelines
- Apple’s exporter plugin & Parallax Previewer
- Our Photoshop file (CC2015)
- The zipped .lsr and assets (open with Parallax Previewer).
