Creating App Previews for App Store using Photoshop

Creating App Previews for App Store using Photoshop

October 18, 2014 App Store, Tips & Tricks

Well, that might sound a little bit crazy at first but it’s completely possible. Here is how…

App Preview Videos in Photoshop

If you are fortunate enough to use a Mac on OS X you may use recently updated iMove to create your app previews. Or if you have a professional video editor lying around such as Final Cut Pro X, Adobe Premiere or After Effects you can also use those. Not all of us have those in possession but I’m sure many of us have a copy of Photoshop CS installed. And if the version of your PhotoShop is CS3+ (I’ve used CS6) you’re in luck, it has very very basic (but more than enough for app previews) video capabilities similar to AFX or Premiere.

Our Case

Initially I’ve outsourced our app previews along with our trailer. That turned out great, we had app preview videos ready in requested technical format and submitted them for review along with our game. But those caused our first metadata rejection. Problem was the content in the ending of the video, we had a death scene and even if it’s very light & cartoony they’ve rejected it. So, a fair bit of warning here to our fellow developers, make sure you do not have ANY kind of death/gore/blood in your app previews or it will be rejected. If your game is about unicorns or bunnies you might be in luck, but I’m not sure how you should handle it if your game is about killing zombies with head shots…

As the rejection come in 1am in the morning I had to act quick to save some precious time to not to miss our release date. So, instead of going back to our video guy (which means waiting for at least few days to receive updated videos) I’ve decided fix those by my self. I knew about Photoshop’s video capabilities but even if I’ve never used it before, I’ve decided to dive in.

What Apple wants

App previews have many restrictions. Besides the technical restrictions (see last chapter) Apple wants you to create simple videos that shows the gameplay. Those should not feel like ads or trailers with full of effects or extra non game art/content.

So, basically you’ll need mostly game play videos stitched together with mix or fade (to black/white/color) transitions, overlaid on a one piece music for continuity. There may be few text (not recommended as localization not possible) overlays, mandatory if you need to disclose in-app purchases if the video section of the game shown requires a purchase such as a vehicle, hero, etc.

Good news is you can do all those and even a bit more with Photoshop’s video capabilities. In my opinion using a full featured video editor for that (specially if you are thinking about investing in one) would be an overkill…

How to create videos in Photoshop

Well, I might do a full tutorial on this in the future but right now I simply have no time. But, it’s not hard! A quick google search revealed the following tutorials, I’m sure there are more and those should be enough to get you started.

Make sure you have the source content in full format (1920×1080 for iPhone(s) & 1200×900 for iPad) for the best quality. I also like to bust a myth here, you don’t have to own each device (iPhone 5/6/6+ and iPad) to capture in all required sizes. Or you don’t have to own one of those devices at all in our case, I’ve just captured them from the computer using the Screenflick while playing the game in Unity editor at 1080p.

Technical Requirements of App Previews

iTunes connect is very picky when it comes to app preview videos. You’ll need to make sure your videos are formatted exactly the the way they wanted or you won’t be able to upload them or you might experience all kinds of problems.

But I have some good news and a small gift for you!

As the Photoshop’s video exporter is based on the Adobe Media Encoder I was able to create 4 preset that exports the videos exactly as Apple wanted. Once you have your video ready in Photoshop you may simply select the required preset and you’ll have 100% compatible video ready to upload.

Download the package here:

Adobe Media Encoder EPR Presets for Apple App Previews

After downloading extract the contents and you’ll see 4 files with .epr extensions. Place those in the video presets folder of Photoshop so the option would be available when exporting. In my case that location on OS X was “/Applications/Adobe Photoshop CS6/Presets/Video/Adobe Media Encoder/H264/”. You’ll see bunch of other (default) epr files there. Just add those and re-start the application.

After importing, presets section of the exporter should look like this:

On another note, as those are EPR files, you may also use them in Adobe Media Encoder, Adobe Premiere or Adobe After Effects or any other editor that uses compatible format.

For best results, you should have two different projects. First one should be using 1200×900 iPad footage and exported using iPad preset. Second one should be 1920×1080 footage and you can use that one to export all 3 iPhone resolutions.

I hope that would be useful for you, if it is make sure to share using the buttons below. If you have any questions, please leave a comment below and I’ll do my best to reply as soon as I can…