WinRT app guide: Step 17: Adding required app images for multiple scale factors

To read the other steps in the step by step guide for creating a Metro/ WinRT application go here

Recap

We have been building on a Windows Store App, and the app is almost finished. The application allows users to register study items (things they would like to learn) and track their progress and generate some statistics based on that. Today we will revamp the UI, and add the required images and splash screen for the application.

Today

First of all, I decided to give the UI some other colors to soften up the look a little bit- hope you like it. Now we have to find out which images are required, and which ones we will provide. Let’s have a look.

The app today

Required images for Windows Store Apps

Store Logo for 100% scaling 50 x 50 pixels

Logo for 100% scaling 150 x 150 pixels

Small Logo for 100% scaling 30 x 30 pixels

Splash Screen for 100% scaling 620 x 300 pixels

Not required but recommended

Wide Logo for 100% scaling 310 x 150 pixels

Badge Logo for 100% scaling 24 x 24 pixels

All the scaled sizes:

180% size

|
Store logo |
N/A |
50x50 |
70x70 |
90x90 |

|
Logo |
120x120 |
150x150 |
210x210 |
270x270 |

|
Small logo |
24x24 |
30x30 |
42x42 |
54x54 |

|
Splash screen |
N/A |
620x300 |
868x420 |
1116x540 |

|
Wide logo |
248x120 |
310x150 |
434x210 |
558x270 |

|
Badge logo |
N/A |
24x24 |
33x33 |
43x43 |

Other Images required/recommended

Screenshots

Promotional images

Required versus recommended

While different scaled versions of the images is not required, it is highly recommended,and honestly- it just takes a little bit more time to give user an even better experience so why not do it? Catering for different scale factors is easy as the selection of the images is automated, you just have to provide the images and either name them using name convention like so: myImage.scale-100.png or collect them under different folders names like so: \scale-100\myImage.png. If you use scalable vector graphics then you don’t need this at all, as the images will scale fine without any problems.

creating images in photoshop

We will of course provide all the images, and we will use the naming convention for the resource loading- as the images will be png.

How to create the images

There are many tools available for this, I’ve chosen to use Photoshop and downloaded a 30 day free trial for this. Adobe has a free online tool, and there is also pixlr.com a free image editing tool online. Keep the images simple, in style with the app and the Modern UI design principles (the ‘Metro’ style as it used to be called). If you want the app-name to be added to the images you can select this in the Appmanifest, just make sure you provide the space for that on the image itself. Or choose not to, like we will. Add the required images using appmanifest

adding images and setting background colors

Our Images

We will make all images, except the Badge Logo as we don’t need that one. To take a few screen shots start the app in the simulator and click on the camera button, the images will end up in the Windows Simulator folder in ‘Pictures’. After creating the images we will add all of them except the screen shots in the assets folder in the project and reference them in the appxmanifest. If the image is the wrong size it will let us know, which is very appreciated as it quite easy to miss by a pixel or two when there are so many similar images to be added. Run the app and check that everything looks OK.

The images

Next time

We will run the WACK tool, and prepare the app for publication.