WinRT app guide: Step 17: Adding required app images for multiple scale factors
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.
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
The app today
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:
Image name |
80% size |
100% size |
140% size |
180% size | | — | — | — | — | — |
Store logo |
Small logo |
Splash screen |
Wide logo |
Badge logo |
Other Images required/recommended
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
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.
We will run the WACK tool, and prepare the app for publication.
Last modified on 2012-12-18