The past few days I have been scouring the internet to find a tool to easily create live tile icon assets for Windows Phone 8.1 and Windows 8.1 with very little luck. The only thing even remotely close to what I was looking for is found over on Modern UI Icons website – but this currently doesn’t support Windows 8.1. If you need an icon though, it’s the place to go.
While on my search I also was looking for documentation which even outlines the various sizes of tiles, suggested padding within the tiles, etc. Everything I seemed to find was either out-of-date or incomplete. I hope to add some more detailed documentation in the near future, but I don’t have time at the moment.
So with that said, I have created a really simple Photoshop document with placeholders for all the “required” tile assets for a Windows 8.1 Visual Studio Project.
Here are the steps to generate all your tile assets:
- Download the latest Photoshop file from here.
- Un-zip the file to your computer.
- Open the file in Photoshop (I’m using the latest version of Creative Cloud).
- In the “My Assets” folder in the PSD you will see numerous folders, each folder is a “Tile Group” which coincides with your Visual Studio Visual Assets Tab in the manifest file.
- Expand the first folder, you will see two layers.
- 1st Layer is the icon you wan to use (Your logo), you’ll want to remove my layer and drop in your own.
- 2nd Layer is the “Invisible” layer, basically this layer allows the slice to keep it’s size when you save out the file. There is a 1px border with a 1% opacity setting – it’s un-noticeable when you do the export.
- The “Frames” folder when turned on, shows you the general size your icon should be – this is just approximate and you will need to adjust your own icons to fit how you want.
- After you have gone through all the folders and swapped out my icon layers with your own, it’s time to hide the folder colored in Yellow.
- You will notice that each folder in the My Assets folder has really long titles, these tiles define our file sizes, names and format for each icon by using the “Generator” tool in Adobe Creative Cloud – you can read more about that here. (In theory you shouldn’t need to change these titles)
- *Note: This folder “54×54 SmallLogo.scale-180.png, 42×42 SmallLogo.scale-140.png, 30×30 SmallLogo.scale-100.png, 24×24 SmallLogo.scale-80.png” and this folder “256×256 SmallLogo.targetsize-256.png, 48×48 SmallLogo.targetsize-48.png, 32×32 SmallLogo.targetsize-32.png, 16×16 SmallLogo.targetsize-16.png” are in the same slice and use the same Icon. So I’d update one of the folders, duplicate it and then rename the second one to the second title and then delete my folder. (I had to do this because the title was too long for what Photoshop would allow).
- Next turn on “Generate Image Assets” by going to “File -> Generate -> Image Assets”
- Once you do this it will automatically generate all the required files and drop them into a folder in the same location as the original PSD.
- Next, go open up that folder, you will see a bunch of .png files – simply select all, copy them and then paste them into your Visual Studio Project Assets Folder (It will replace a few files).
- In Visual Studio, if you open up your project and make sure to include the images you just added into the project. When you open your “Package.appxmanifest” file and click on “Visual Assets” your icons should all show up.
- In some cases you may need to go select one of the generated files to populate all the asset sections.
- Define your other settings and you should be good to go!
Hopefully this explanation is clear enough, let me know if something doesn’t make sense or if something isn’t working quite right and I’ll update accordingly.
If you appreciate the tool, please consider making a small donation…
Thanks and Enjoy!