background preloader

UWP

Facebook Twitter

Tile and icon assets. [ Updated for UWP apps on Windows 10.

Tile and icon assets

For Windows 8.x articles, see the archive ] App icon assets, which appear in a variety of forms throughout the Windows 10 operating system, are the calling cards for your Universal Windows Platform (UWP) app. These guidelines detail where app icon assets appear in the system, and provide in-depth design tips on how to create the most polished icons. Adaptive scaling First, a brief overview on adaptive scaling to better understand how scaling works with assets. The Store picks the assets to download based in part of the DPI of the device. Tile elements The basic components of a Start tile consist of a back plate, an icon, a branding bar, margins, and an app title: The branding bar at the bottom of a tile is where the app name, badging, and counter (if used) appear: The height of the branding bar is based on the scale factor of the device on which it appears: The system sets tile margins and cannot be modified. Tile and toast visual assets (Windows Runtime apps) - Windows app development.

This topic discusses the size requirements for image file assets used on tiles and toasts.

Tile and toast visual assets (Windows Runtime apps) - Windows app development

General image requirements Tile and toast source images must have dimensions less than or equal to 1024x1024 pixels, have a file size of less than or equal to 200 KB, and be of type .png, .jpg, .jpeg, or .gif. There are no bit-depth or color requirements for an image as long as it meets the other requirements. Square and wide tiles Tiles are shown on the Start screen and can be either wide (310x150 pixels at a 100% scale) or square. Windows 8.1 Icon Size Guide - App Icon & Tile Image Assets. This awesome tool easily creates multi-sized logos for your Windows 8.1 or Windows Phone app project. It is tedious enough that you, as an app developer, have to spent countless hours coding and debugging your app prior to submission to the Windows Store or Windows Phone Store.

This awesome tool easily creates multi-sized logos for your Windows 8.1 or Windows Phone app project

Prior to submission of your brand new app, you are required to submit various logos in multiple sizes. Thanks to a tool called “Windows Store App logo Maker,” you can easily make all these logo images within seconds. All you need to do is download the tool, run it, open the primary logo image you want to use, and hit “Create Icons.” A new folder will open, giving you all the logos you will need to successfully publish your app to the Store. There is even an option to make Universal store logos. The cool thing about this little tool is that you can use up to three images, add text, move images by dragging them with your mouse, change image and text size using your mouse wheel, and remove images with a simple click.

Windows 8 Icon Size Guide - Great Tips for Windows 8 Icons. Microsoft does provide a lot of information to Windows Phone App developers about the Windows 8 and 8.1 User Interface, but they don’t tell you how big your icons should be or where exactly they should be placed within the tiles to match Microsoft’s own Application Tiles.

Windows 8 Icon Size Guide - Great Tips for Windows 8 Icons

This guide provides those answers so you can correctly emulate the Windows 8 coloured tile icon style. In this earlier post I discussed the Tile sizes required by Windows Phone 8.1 which are as follows: However, for Windows Phone 8.1 only 4 sizes are commonly used, as highlighted above, so it is those sizes we will concentrate on. As you can see from the examples above, the white metro icons are horizontally centred but vertically offset. Windows Phone 8.1 App Icon Tile Template in Photoshop. 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.

Windows Phone 8.1 App Icon Tile Template in Photoshop

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 Phone 8.1 yet (Though sounds like it will be updated in the near future). 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 Phone 8.1 Visual Studio Project. Here are the steps to generate all your tile assets: Thanks and Enjoy! Tile and toast visual assets (Windows Runtime apps) - Windows app development. Choosing your app images - Windows app development.

Your app needs to include various logos, screenshots, and images.

Choosing your app images - Windows app development

Some of these are required, and some are optional. Keep in mind that your images are one of the main ways in which you represent your app. Well-designed images can be a big help in making your app appeal to customers. Modern UI Icons - Windows Phone / Windows Tile Generator. Untitled. There’s quite a few details my app design workflow article doesn’t cover, specifically relating to icon design.

untitled

Icons are often where design software is pushed, making full use of vector abilities, masking, and constructive solid geometry. It is for those reasons that icons often require different tools and techniques. Creation vs styling I think it is important to separate vector path creation from styling, because the two main tools I use — Photoshop and Illustrator — have vastly different abilities and strengths. Photoshop’s rendering quality and masking abilities surpass pretty much all design tools, but Illustrator has better and more versatile vector tools. Thankfully, jumping between the two apps is pretty seamless, so that’s what I do. Illustrator for creation. Dimensions For icons where you have control over the size, the style and line width of your icons should help dictate dimensions.