How to generate and manage app visual assets for Windows AND Windows Phone with ease using Photoshop actions
UPDATE: If you're looking for Photoshop templates for Windows 10 , see my newer post: https://blogs.msdn.com/b/madenwal/archive/2015/11/24/photoshop-templates-amp-actions-for-generating-image-assets-for-windows-10-uwp-applications.aspx
---
We all know that Windows and Windows Phone support many different screen resolutions. This requires dev teams to create many image assets in their app packages and we all know that takes a LOT of time to produce. To make things easier, the Store team only requires us to provide a small handful of the assets in the app packages. This is great as it allows you to get your app completed with less pain but it comes at the expense of a lot of screens not showing the most optimal asset really needed for that screen. Kind of a problem. These assets represent your brand and application but it's very painful and monotonous for your design team to produce the required images. This is where I've leveraged Photoshop to help us all out.
What I've done here is looked at all the image assets needed in Windows Phone 8/8.1 SilverLight and Windows 8.1 Universal for Windows and Windows Phone and created an inventory of those needed assets. This inventory lists each asset for each platform, the type of image it is (SmallLogo, Logo, StoreLogo, WideLogo, SplashScreen, BadgeLogo), and each of the sizes/scales needed for each image type for each platform. Then using the max sizes for each image type (and some to accommodate future larger screens), I created you a simple Photoshop PSD file representing each image type with a guide box within the template based on the design guidelines for the assets so you know exactly how large your logo/icons should be within that template.
Now this is where Photoshop really comes into play. If you're an experienced Photoshop user, you'll know that Photoshop has a feature called Actions (they are macros) and you can automate almost anything you want within Photoshop. I created an action for each image template (PSD file) which resizes the template to the appropriate size/scale and exports it with the appropriate file name for each platform. Once you run the actions on each template, the output folder will contain the Assets folder for each platform which you can then basically just drop into your solution. Output will be:
- 22 image assets for UAP 8.1 Windows Phone
- 32 image assets for UAP 8.1 Windows
- 14 image assets for SilverLight Windows Phone
In a nutshell, you just give your designers the 8 PSD template files, have them design it however they like, run the associated actions, and voilà, you'll have all the image assets you need without the designers needing to know what dimensions/names/margins/guidelines/etc for each file!
To get set up, follow the instructions below:
- Download and unzip the ZIP file attached to this blog post (the zip contains all the Photoshop templates, script to create the output folder, the exported Photoshop action scripts, readme file) .
- Import each of the Action (*.atn) files found in the "Photoshop Actions" folder to your Photoshop instance.
- Run the CreateOutputDirectories.cmd script to automatically create the output folder for all the assets (C:\Images\[PlatformNameHere]\Assets\)
- Have your designers edit each of the Photoshop PSD files replacing the white guide boxes with the design you want. FYI, the white boxes are just a guide per the modern design guidelines for image assets from MSDN for each asset size. Also note that the layer name representing the white box indicates how many pixels that box is. But at the end of the day, you can do anything you want with you whole space and you don't have to follow the white boxes, but it is recommended that you do try to follow the image guidelines. Finally, if you need icons for your assets, see my previous post for a free collection of modern UI icons: https://blogs.msdn.com/b/madenwal/archive/2015/02/09/collection-of-modern-ui-icon-libraries-on-the-web-for-free.aspx
- To generate all the images, run the action name corresponding to the name of the PSD file you want to export (i.e. run StoreLogo action on the StoreLogo.psd file). This will generate all the different scale sizes for that image for each platform.
- Copy the Assets folder from respective platform folder within C:\Images\ to your solution.
- Ensure each image file 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-NNN. " part of the file name, it'll automatically figure out each scaled image available in the project. For example, instead of selecting each image one by one for each scale size, just type in Logo.png and it'll populate the 80 scale, 100 scale, 140 scale, and 180 scale images. See image:
This took me a few days to inventory, build, test, and package up. Was painful and mind numbing to produce but I now use this in all my apps and it takes me just a minute to export all the assets I need. These templates are also ready for Windows 10, but I have not included the actions for those just yet as the platform has not been released yet. I'll have updated Actions for Windows 10 when the time comes. In the meantime, if you have any questions or suggestions, please do reach out to me via the comments below!
Enjoy!