Panic

Panic Blog

5月 29th, 2018
Color blocks representing different video aspect ratios; two sizes are drawn extra long, a popular flag motif

Proposed design for the Official Flag of “Responsive Video” by Yours Truly

Just when you think you have a handle on every conceivable size variation of every iOS App Store screenshot for your app, you remember: there’s also the App Store Preview video! Dang.

The App Store’s autoplaying App Preview video feature is really great, allowing you to show your app in action to potential users, but including video with all of your other App Store marketing materials adds yet another layer of complexity to shipping your app.  The Preview video sizes are all different from their static-image counterparts, and of course, there are twelve different Preview video possibilities, thanks to various screen sizes and options for portrait and landscape orientations. Hoo boy.

I’ve attempted to make the App Store Preview video export process a little easier to wrangle for myself (and, hopefully, for you!)

I use Adobe After Effects to combine screen recordings, text, and other elements for my videos, so I’ve made a master After Effects project that includes every size and orientation you could want for your Preview video.

Since Preview videos can be uploaded on a per-device basis, you can mix and match landscape and portrait orientations for them. We did this with our Prompt Preview, using a portrait orientation to match our screenshots for iPhones, and a landscape orientation to match our screenshots for iPads. Six different videos! Phew.

The AE Project 

Here’s a look at what’s inside:

 

And here’s an example use case: a video I just started working on for Coda iOS. I’m working from a 1920×1920 composition titled “MAIN”, which I’ve dropped into various device-specific pre-comps. This way, I can see the effect of positioning elements in “MAIN” at any video size. It’s like responsive design, for video. Kinda.

 

I recommend deciding which orientation you’ll use at each device size first, then working at the largest-possible size (like I do in “MAIN” in the example above), and scaling down for smaller devices as needed. The “Combined” comp has every size and orientation overlaid (labeled and color-coded by screen size), but you can drop your video into any of these nested pre-comps as needed, to see how it’ll look, and make any adjustments. Each of these is thirty seconds long, and has a frame rate of 30 frames per second (both app store maximums; note that your video must also be at least fifteen seconds long in order to be accepted). 

Even if you don’t use After Effects on a regular basis, I hope you’ll find this project file helpful in wrangling your App Previews. Happy rendering!

P.S. If this project file is overkill and you’re just looking for a list of App Preview video dimensions, here you go:

Device(s)  Portrait Landscape
iPhone SE, 5s, 5c, iPod Touch 5th Gen 640 x 1136 1136 x 640
iPad Air, iPad 4th Gen, iPad Mini Retina 900 x 1200 1200 x 900
iPhone 6, 6s, 7, 8 750 x 1334 1334 x 750
iPad Pro 1200 x 1600 1600 x 1200
iPhone X 886 x 1920 1920 x 886
iPhone 6 Plus, 6s Plus, 7 Plus, Apple TV* 1080 x 1920* 1920 x 1080
Posted at 3:14 pm A Video Template for App Store Previews はコメントを受け付けていません

Comments for this post are closed.