Rather than trying to create all these by hand I have created a Photoshop script to generate all the variations from a portrait source and a landscape source. You can download this from All Mobile Splash Screens.js The source images must be 1536 x 2008 for Portrait and conversely 2008 x 1536 for landscape. Due to variation in aspect ratios, If your splash screen has a logo or text of some sort it’s best to make sure this lies with a of 204px left and right padding area for portrait or top and bottom for landscape.

for example, you can see below all my ‘important’ stuff is inside the bleed area.

If you are really clever then you can start with a single image for both keeping the logo or text within a central box of 1004×1004 as shown here.

Use Photoshop Script

Download the Photoshop script from here. The script is JavaScript, so you can open it in a text editor and have a look.

Copy it to your Photoshop Presets/Scripts folder. Mine was at c:\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Scripts and I create a subfolder to hold my scripts. On a mac or if you have the 32-bit version your local path will vary.

Launch Photoshop and you should now see the script available under File->Scripts called ‘HMS Create All Mobile Splash Screens’

This will generate a series of cropped and new resolution versions of your original image in the same folder. If the source image is not exactly the right size the script will tell you and exit. You should end up with something like the set below, where all the test is still in frame.

Like this:

Publishing an app to one platform is difficult enough, publishing to 3 or 4 different ones can be very time consuming. One area of confusion is the myriad of Icons, Tiles and Splash screen sizes needed. Here I thought I would put it all together, in one place, all the image asset details for all 4 platforms iOS, Android, Windows Phone and Windows Store applications.

Icon and Tile Images

However I found that my favourite wasIcon Slayer. It is the most configurable and particularly useful for those developing for Windows Phone and App too. You can also add in some additional sizes that are missing in the standard iOS and Android pre-sets. See my Blog for Generating Screenshots and Icons for Xamarin Cross-platform Apps.

If you tick iOS, Android and Custom, then copy and paste this custom set of sizes (as is, space delimited!),

into the ‘Custom’ field in Icon Slayer as shown below, you will produce all the sizes of icons as listed for all platforms below. Icons and Tiles that are do not have an aspect ratio of 1:1 I have highlighted in orange. These will need to be edited by hand, however the images created in Icon Slayer will also cover the width or height of these images too, to help with easy editing later. if you have a transparent or flat background colour, all you will need to do is change the canvas size.

Personally I generate 3 full sets of icons. One set of rounded with effect (use in Android), one set square edged with effect (use in iOS and Windows) and one just plain square with no effect (use for creating other aspect ratio images and sometimes Windows).

Due to the very large range of screen sizes found on Android, you are advised to have large bleed areas. The minimum sizes documented for Android are below.

Description

Size

xlarge screen landscape

960×720

xlarge screen portrait

720×960

large screen landscape

640×480

large screen portrait

480×640

normal screen landscape

470×320

normal screen portrait

320×470

small screen landscape

426×320

small screen portrait

320×426

Windows Phone Splash Screens

To display a splash screen for all resolutions, use a single image file named SplashScreenImage.jpg that is 768 × 1280. The phone automatically scales the image to the correct size.All splash screen images must be in the root folder of your app project and you must set the Build Action property of the image(s) to Content.

Windows Phone 8 Update 3 will default to using the 720p splash screen file on a 1080p phone.

For a Windows Phone Store app, provide the 2.4x asset at a minimum; preferably all. The image file assets themselves should have a transparent background. In your app manifest, set the value of the SplashScreen@Image property to “Assets.png”, and set a value for VisualElements@BackgroundColor.

Windows Store Apps Splash Screens

Use a transparent PNG as your splash screen image for best visual results. Using a transparent PNG lets the background colour you chose show through your splash screen image. Otherwise, if the image has a different background colour, your splash screen may look disjointed and unappealing.

Description

Size

1x Splash Screen

620×300

1.4x Splash Screen

868×420

1.8x Splash Screen

1116×540

Other App Store Assets

When finally publishing your app to the store, you may find that additional promotional images are needed. If you have these ahead of time, it can smooth your journey. All stores require screenshots, but I am not going into those here.

Share this:

Like this:

After looking at all the various methods and frameworks for cross-platform mobile development, I decided that Xamarin‘s approach and mature tech was the way to go.

I got a subscription and signed up for the Xamarin University training course. Many late nights doing excellent live training, a visit to the Xamarin Evolve 2014 conference in Atlanta and a tough 150 question 3 hour exam later…I am now officially a ‘Certified Xamarin Mobile Developer’

Oh…and it was not easy! 1 minute 12 secs per question and an 80% pass mark!!

If you are wanting or thinking of developing mobile apps, then this is a brilliant technology for managing the whole process. Code shared across platforms can be as high as 95% when using Xamarin Forms. And it creates native apps…not horrid HTML/JavaScript things!