Pixel Envision Ltd.
Mobile Game Development Studio
  • Home
  • About Us
  • Our Games
    • Hyper-Casual
    • Casual Games
      • Don’t Get Caught
      • Hordes of Enemies
      • noded
      • kubic
      • Whip Swing
      • Witches’ Brew
    • Kids Apps
      • Coloring Book
      • Cars & Trucks Puzzle
      • Train Puzzles for Kids
      • Animal Puzzle
      • Fairy Tale Puzzles for Kids
      • Find the Differences
  • Support
  • Privacy Policy
Select Page ...

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.

  • How to edit video in Photoshop CC
  • How to edit video in Photoshop CC and CS6
  • Video Editing in Photoshop CS6 and CC

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…

← iOS App Store review queue position when Metadata Rejected
iTunes Connect Availability Date vs. Version Release Revisited →

6 Responses to Creating App Previews for App Store using Photoshop

  • Sergi
    11 / 13 / 2015

    Hi and thanks for the presents!
    I’ve noticed curious thing. When I took movie generated from iMovie , media encoder then increases its length slightly, e.g. from 29 seconds to 34.

    Any idea why it happens?

    Sergi 11 / 13 / 2015
    Reply
  • Paul
    3 / 24 / 2015

    Hi

    Could anyone help ive an idea for a game app for the App Store etc,does anyone know know how i turn my idea from paper to phone,Help Please.

    Paul 3 / 24 / 2015
    Reply
    • Erdener Gonenc
      3 / 25 / 2015

      I would look for a developer, just make sure to make contract that protects your idea. That URL might be kick-start for you but I’m sure there are other places too… https://www.odesk.com/o/profiles/browse/skill/iphone-app-development/

      Erdener Gonenc 3 / 25 / 2015
  • Craig
    2 / 20 / 2015

    Great article! Unless things have changed you’ll have to export iPhone 5 and 6 Plus to 1920×1080 (or vice versa) and iPhone 1334×750 (or vice versa.) Is this still correct or has Apple updated their requirements?

    Craig 2 / 20 / 2015
    Reply
    • Erdener Gonenc
      2 / 20 / 2015

      Hi Craig, thank you! I’ve just checked iTunes Connect Developer Guide and requirements are still the same. 6 Plus requires 1920 x 1080, 6 requires 1334 x 750, 5 can use both 1920 x 1080 or 1136 x 640 and iPad needs 1200 x 900.

      Erdener Gonenc 2 / 20 / 2015
  • Pawel
    12 / 1 / 2014

    May thanks for Media Encoder settings! They work flowlessly.

    Pawel 12 / 1 / 2014
    Reply

Leave a Reply to Paul Cancel reply

Your email address will not be published. Required fields are marked *

  • Tags

    3ds Max Coming Soon CoronaSDK Featured Flash Lua MAXScript PHP Programming Reviews Tips & Tricks Unity 3D Windows Phone
  • Recent Comments

    • Yogesh Singh on ZIP (POSTAL) Code Validation Regex & PHP code for 12 Countries
    • Admin on Maxscript – Vray Cubemap Generator for Unity
    • charlie on Maxscript – Vray Cubemap Generator for Unity
    • Mastan on PHP Currency Converter
    • Rakesh Vishnoi on ZIP (POSTAL) Code Validation Regex & PHP code for 12 Countries
    • Find us on

      amazonandroidapplefacebooklinkedintwitterwindowsyoutube
    • Company Information

      Lytchett House, 13 Freeland Park, Wareham Road, Poole, Dorset, BH16 6FA

      Pixel Envision Limited is a company registered in England, company number: 09558675. Registered Office: Preston Park House, South Road, Brighton, East Sussex, BN1 6SB, United Kingdom

    • Privacy Policy
    Copyright © 2011-2021 Pixel Envision Ltd, all rights reserved.