UPDATE: The Windows design team has made this template and the export actions into an official Windows 10 design resource. You can now find this at the Windows 10 design resources page under the Tools section as well as here in this post.
We all know that Windows 10 UWP now supports many different screen sizes and resolutions, from phones to laptops to big screen TVs. With all the different scale resolutions now supported, there is quite the massive amount of assets that your dev team or designers need to produce. Your Windows UWP application, to make this less of a burden, only requires a small handful of those images assets be present in your app package. This is great as it allows you to get your app shipped quickly but it comes at the expense of a lot of screens potentially not showing the most optimal assets for that screen. Kind of a problem. These assets represent your brand and your application and why would you want anything less than the sharpest images shown to your users? Creating all the required and recommended image assets for your Windows 10 UWP projects is a very time consuming and mundane process. And not to mention the ramp up time needed to understand (and to remember) all the W10 guidelines for tile and icon assets put forth by the Windows team on how to ensure your app logo looks great on all screens. To help alleviate us all from this monotonous work, I decided to leverage Photoshop to streamline as much of this work as possible.
What I’ve done is taken the tile and icon assets guidelines documentation and used ALL that information to create a set of 7 Photoshop template files. These 7 files represent all the assets needed for your application’s tiles, app icons, splash screen, badge logo, and store logos. Along with these template files, there is a set of 7 Photoshop Actions (they are like macros) which pair up with each of the Photoshop PSD template files. What each of these Photoshop Actions do is take its corresponding template file exports that template multiple times to the proper sizes and with the proper file names needed for your UWP project. These 7 templates/actions essentially output 68 of the required and recommended images assets for all the scale sizes (100, 125, 150, 200, 400) and package images needed to ensure your application looks great on any screen!
To get up and running with this, follow these instructions below:
- Download and unzip the ZIP file attached to this blog post (contains the 7 Photoshop templates and an ATN file that contains that Photoshop Action definitions).
- Import the actions file (Windows UWP v1.2 for Windows.atn OR Windows UWP v1.2 for Mac.atn) in to your Photoshop instance through the Actions pane’s settings menu.
- Have your designer edit each of the Photoshop PSD template files. Each template file contains rulers representing all the boundaries which they should ideally adhere to (set forth by the W10 guidelines for tile and icon assets document). In pretty much all cases, it’s recommended that you keep your logo confined to the middle 4 boxes. However, if your logo is horizontally oriented, you can leverage the 2 square areas to the left and right of the center 4. Or if your logo is vertically oriented, you can leverage the 2 square areas above and below the center 4. Not both directions. And ideally leave your logo layer as a vector based layer so that as your asset is being re-sized and exported there is no loss of quality from the re-seize. Note that these boxes created by the guide rulers are based on the tile and icons margin guidelines set by the W10 design team.
Sticking to these boundaries will ensure your logo looks great everywhere within Windows. Unless you intend to have full bleed branding on your assets, which in that case you can ignore the rulers. Though I do recommend you carefully read the guidelines documentation for guidance on margins of your full bleed logos.
- If you're using Photoshop on Windows, create a folder on your C: root drive called Images (i.e. C:\Images\). This is the folder that the Photoshop Actions will output to. If you're using Photoshop for Mac, files will be outputted to the /var/tmp/ folder. That folder isn't visible in Finder (the file explorer) as it's hidden by default. So to navigate to it, you'll want to use Cmd+Shift+G and manually type the path.
NOTE: I know this isn't ideal, but when creating Photoshop Actions, for both Windows and PC, the Action recorder captures the full path to any folder you choose. So if I chose Desktop, for example, it'd include the logged in user's name into the path which would prevent the action from running on other machines since that user (and it's full path to that person's Desktop) would exist or be accessible. Hence why I had to use C:\images or /var/tmp/ as they can both be accessible by all users on any computer.
- For each Photoshop template file, run the corresponding Photoshop Action (i.e. Run the Logo-TileLargeMedium.psd action on the Logo-TileLargeMedium.psd template file).
- Copy the image files from the output folder to your Assets folder within your W10 application project.
- Decide if you want un-plated or plated images for your logo on the taskbar and task switcher and start menu jump list. If you want un-plated, simply include all the asset images named "Square44x44Logo.targetsize-##_altform-unplated.png" in your solution and ensure your tile background color is set to transparent. If you want them to be plated, then include the "Square44x44Logo.targetsize-##.png" image files and specify a hex value for tile color in the app manifest which dictates the background color for the tiles and icons. No need to include both sets.
- Ensure each file you want is included in your Visual Studio project and set as Content so that it can be deployed with the application.
- Update the Visual Assets tab in the application manifest to point to the appropriate image assets set. If you type in the name of the file without the “.scale-###.” part of the file name, it’ll automatically figure out each scaled image available in the project and show up in the manifest designer. For example, instead of selecting each image one by one for each scale size, just type in Square71x71Logo.png and it'll populate the 100, 125, 150, 200, and 400 scale images. See image:
I use this for my own applications to and it now takes me minutes to produce all the assets I need instead of hours. Hopefully this helps you out as well. If you have any questions or suggestions, please do reach out via the comments below!