Windows Phone 8.1 Dev Preview
Windows Phone 8.1 developer preview is totally awesome. So what is one of the most important things app devs can do right away, without much fuss, to make their apps look great with Windows Phone 8.1? Revisit your appâ€™s Live Tile images. Why? In 8.1, Start screen is mesmerizing with the parallax effect and Live Tile with background overlay. Dev preview users are going crazy with new Start experience, and I am sure, with public release, end users are going to love to have background image as well. Take a look at this awesome Nokia Lumia 925 Start screen:
When users have a background image, they might not like to have solid Live Tiles block their beautiful background. So, revisit your appâ€™s Live Tile images â€“ all of them! Check if they are transparent or not? If they are like Cortana, Avirall Time Suite, etc. in the image above, you are all set. You can safely ignore this article and find some other awesome way to improve your app for WP8.1 (think Cortana). If they are not, I suggest to update â€˜em ASAP. And itâ€™s easy, too. Letâ€™s see how you can create transparent Live Tile images with Open Source Inkscape. You could choose to use Paint.NET (not MS Paint), Photoshop, GIMP, or any other tool which allows you to export image with transparency. Though I prefer GIMP for image editing but I chose Inkscape for this demo. Letâ€™s go.
Step 1: Setup the page
- Open Inkscape and create a new document and Open Document Properties from file menu.
- In most cases app icons are solid white, if yours is one too, change the background color of the page, temporarily, to light yellow. This is while working only so that you can see white color. Before exporting we will reset this to transparent (this is very important).
- This example is for 336 X 336 medium tile. So set the custom size to 336 X 336.
- Make sure Units is â€œpxâ€.
Step 2: Setup the drawing
Windows Phone 8 Asset Template Guide suggests a 336 X 336 tile to have 110px margin on all sides. Create 110px margin guides on all the sides. To create margin guides click and drag from the horizontal ruler on the top and from the vertical ruler on the left.
Step 3: Create Live Tile image of your app
The center part between the margins is the space where your tile image will go. Create your image here. For this example I simply dragged the box from tool box and made a hole in it 😀
Step 4: Set background to transparent
To create a transparent Live Tile image we would like to have a transparent background. Go back in document properties and set Background to transparent by resetting â€œAâ€ to 0. If your image is solid white, you might not see anything after making the background transparent. Donâ€™t worry, your image is there (maybe somebody can tell how working space (not document background) in Inkscape can be made a different color than white).
Step 5: Export
- Open Export dialog from File > Export Bitmapâ€¦
- Set X0, X1, Y0, Y1 as shown in the image above.
- Browse for the image location, and make sure you give â€œPNGâ€ as the extension of the image, NOT JPG or BMP.
- Export. (Alternatively, as suggested by Austin Andrews, you could export as SVG, and use his awesome service!)
Step 6: Check Final Image
Notice that your final image does not have a white background. Windows Photo Viewersâ€™s light blue background is your imageâ€™s background.
You are done. You would want to change all Live Tile images of your app in the same way. A transparent Live Tile image will encourage users to have your app pinned to Start screen without obstructing their beautiful background images.