Creating Splash Screen And Other Tile Icons For UWP Apps - Part Two

Introduction

This article will help you to create a splash screen and other tile icons for the apps, which we build under Universal Windows Platform.

Note

• This is a continuation of my previous article in which we were working on creating an UWP app. Please refer to my previous article, which will help you to create a very simple Picture FlipView UWP app before working on to this one.
  
• If you wish to develop an app for Windows 10, make sure that you will have Windows 10 (Professional version recommended) installed on your machine to develop the apps.
  
• Make sure you enable the developer mode on your machine.

Developer Requirements

1. Visual Studio 2015.
2. Windows 10 Pro.
3. Windows Store App Logo Maker.

Follow the steps, given below.

Step 1

Let’s open the project.

Run Visual Studio 2015 - File - Open - Project/Solution.



The project solution gets ready now and as discussed in the previous article, you can find Solution Explorer, Designer Pane and Coding Pane etc. 



Step 2

Move to Package.appxmanifest in Solution Explorer. Package.appxmanifest holds the properties of the deployment package for our app are available in this app manifest file. We can use the Manifest designer to set or modify one or more of the properties.

• Description
  The description option in the Application pane of package.appxmanifest allows us to enter some description about the app, which we have developed.
  
  
• Supported Rotations
  This is an optional setting, which indicates the app’s orientation preferences and this allows us to change the orientation of our app in the different ways like “landscape, portrait, landscape-flipped, portrait-flipped”.
  
  
  
  
• Lock Screen Notification
  You can set lock screen notification to mention the notification on the pane of the lock screen, which we have in the developed app.

Step 3

Visual Assets

Windows Store apps should support display of the different resolutions. Windows provides a simple way to do this, via resource loading. This selection lists all the assets, which are used in the manifest.

Note

Windows Store apps should support display of the different solutions and make sure that the images, which you uploaded for the respective tiles should be the same as the pixel size of the image mentioned on Visual Assets page of Visual Studio 2015.



Here, we have several things to be filled with the images and text for “Tile images and logos, Store Logo, Badge logo and Splash Screen”. To crop the images for all these on the respective pixel size mentioned, we have a pretty cool and good software named “Windows Store App Logo Maker”. Try to download the software from the link given above.

Run the software of “Windows Store App Logo Maker” now.



Here, goes the home screen of Windows Store App Logo maker.



Click “Open Image” to select the image, which has to be cropped.



Here, we have selected the Image.



You can also edit the background of the image, as you need it by selecting Square tile icon at the right corner, given below of Windows Store App Logo Maker.



This will allow you to customize the background colors, as you need (as shown below).



The icons, given below of Phone – Tablet – Universal allows you to select the option for which the image has to be cropped. Let's select tablet, given below. 



Now, click “Create Icons”.



Here, comes the set of images, which you have and you can upload on your Visual Assets at your app on Visual Studio 2015.

Note

The file name can help you to make sense about the image for Visual Assets.


Step 4

We shall upload the image on Visual Assets now.

Roll back to the package.appxmanifest page at your Visual Studio 2015.
 
Give a short name for your app. Here, I will be selecting it as csharpdemo. 



Lets upload the image for 150x150 on the scaled assets.



Step 5

Click “store logo” and upload a logo for this.



Here, I have uploaded an image for 50x50px.



Step 6

Upload an image for splash screen now.



Here, I have uploaded an image for 620x300 px.



Step 7

Now, click “Local Machine” and run the project.



You can find the splash screen, which has been changed with the image of which we have uploaded.

Note

Stay tuned for my next article to work on creating app packages for UWP app and upload it towards the Developer portal of Windows.