Download the Free Top Shelf Image After Effects Project File Here:
What is a Top Shelf?
Before we get into the Top Shelf Image, first let’s talk about the Top Shelf itself. “Top Shelf” is the term Apple uses to refer to the first row of apps on an Apple TV user’s home screen. Similar to a smartphone, an Apple TV user can rearrange their apps however they like. The idea is that users will place their five favorite apps in their “top shelf” for easy access and an enhanced display.
Do I need a Top Shelf Image?
If you plan to launch an Apple TV app, you will need a Top Shelf Image when you submit the app for approval. This is an opportunity to relate to your audience through visual creativity and branding that reflects the content of your channel.
What are the required Top Shelf image sizes?
Top Shelf Image Pixel Dimensions
- 1920 x 720
- 2320 x 720 (wide)
- 3840 x 1440
- 4640 x 1440 (wide)
These are the image sizes you’ll need to upload with your app to ensure your viewer gets a Top Shelf image appropriate for their screen size and resolution.
Do I need to use After Effects to make a Top Shelf Image?
Absolutely not. This template is just one option for generating a professional-looking Top Shelf Image using screenshots from your content.
You do not need After Effects, or any particular program for that matter, to make your Top Shelf image. You do need a properly sized (4640×1440) PNG without transparency (no alpha channel). You will also need smaller iterations for devices with lower resolutions (see above).
We built this template in After Effects so we could utilize its powerful image rendering capabilities.
What will I find in this Template?
This After Effects Project file is composed of a 5 x 3 grid of images. Just pick 15 photos or screenshots from your videos and place them over the placeholder images. Add your logo, choose your gradient colors and you will quickly have a visually appetizing Top Shelf Image.
The image grid is displayed in a 3D environment and there are preset camera movements that subtly adjust the perspective, so you can export the frame/angle you like best.
How do I use this Template?
Unzip the file and open the After Effects project file (Apple TV Top Shelf Grid Template.aep).
In the Project window locate the Composition titled “LOGO”. Double click this to open the Comp. Go to File > Import… and select your logo graphic file from your computer. Click OK and drag the file from your Project window to the LOGO composition work area.
Now that your logo is loaded, back in the Project window, open the Screens folder and you will find a Composition for each of the images in the 3D Grid. Open each of these Comps and replace the png file in the comp (A1.png, A2.png, A3.png etc.) with your Images.
Render Frame to PNG
You can now open one of the RENDER Compositions to preview what your 3D image grid will look like. There is a RENDER Comp that will place the logo on the right, and another comp with the logo on the left.
There are also two “Color” Comps that will form a gradient behind your logo. You can open these Comps and adjust the solid colors to form a gradient that matches your brand.
Most importantly, export the RENDER TOP SHELF IMAGE (either LEFT or RIGHT depending on what side you want your Logo on) to a PNG sequence. This will export one single PNG that will be 4640×1440. You can now use Photoshop or your image editor of choice to scale the image to the other 3 sizes, 3840×1440, 2320×720, and 1920×720.
In addition to a Top Shelf Image you will also need an Apple TV icon when you submit your app. Get a head start on your tvOS icon design by using our tvOS icon template for Photoshop.