For Microsoft Kool-Aid Drinkers, Non-paid MS Evangelists written by a Senior Consultant, Passionate about Tech

Metro Studio, Part 2 – Icons and Tiles

IconsWell, hopefully you are back because you enjoyed Metro Studio, Part 1 – Splash Screen of my series on Metro Studio, by Syncfusion, a wonderful tool that I use to create great looking splash screens, toolbars, application icons and more.  In my last post in the series, we discussed how to use Metro Studio to create a simple splash screen for a Windows Phone 8 application.

In Part 2 of the series, I will show you how to use Metro Studio to create an application icon, store icon and tile images for our application.  I will also introduce you to a great little tool that will take an icon we create in Metro Studio to produce a splash screen, application icon, store icon, tile images and more for your Windows Phone 8 application.

Windows Phone 8 Icons

Just a little primer on Windows Phone 8 icons/tiles might be necessary here.  If you already know everything there is to know about them, you could skip this section.  However, if you don’t, let me first give you a quick definition of a tile and it’s goal.  Here is an excerpt from the Windows 8 developer site reference that would also apply to Windows Phone 8:

A tile is the front door into an app. Sitting on the Start screen, it is an extension of the app and can provide much more personal and engaging information than a traditional icon. Invest in designing a great tile to draw people into your app.

Provide fresh content through live tiles and notifications to let people feel connected to your app. Make sure you help your users connect with the people and devices that they care about.

Though we aren’t going to talk about live tiles and notifications in depth, you will want to consider the design of your icons/tiles to accommodate them in the future.  Here is a great reference for all your Windows Phone 8 tile needs.  It can give you a lot of great information that will enable to you to plan ahead and create great solutions for your application.  I will, however, take you step by step through creating an application icon, a set of tiles and a store icon for your sample application. 

Application Icon

Every Windows Phone application should have an application icon that will be used to identify your application on a device.  The main application icon is 99×99 pixels, with a 14 pixel padding.  I will start by stepping you through how to create it using Metro Studio.  I will also mention a pitfall with Metro Studio, and introduce you to a great little tool that I would encourage Syncfusion to consider buying out to integrate the functionality into their product.  Let’s get started.

First, let’s open up the project we created from my first post, Metro Studio, Part 1 – Splash Screen, in Visual Studio 2012.  Once you have that open, let’s open Metro Studio and do a search for certificate.

CertificateSearch

PickCertificate

Now, let’s drag and drop the certificate icon over our SplashScreen project.

DragDropCertificate

You should see the SplashScreen project badge change from 1 item to 2 items.

ProjectBadge

From here, hover over the SplashScreen project and select Edit.

SplashScreenEdit

From here, you will be taken to a screen which shows you what icons you have in the project.  You can select an icon to work on, copy to the clipboard, rename it, delete it, export it, see the XAML and even edit it by changing the properties.  A cool feature is the ability to select multiple icons and adjust the properties on all of them at the same time.  This can be helpful if you want to adjust a color or size quickly for more than one icon.   Once you are done, you can save it.

SpalshScreenEdit

My biggest complaint is that I would like to be able to just pick one icon at a time and edit it in the entire editing area.  If your image is bigger than the tile that is displayed, you can’t see aspects of the icon that you have changed.  So, maybe adding and edit button that is enabled when only one is selected would seem like a reasonable option.

Another small thing, that is a nice to have, would be nice to be able to rename the project.  There doesn’t seem to be a way to do that at this time.  Seems like it would be easy to implement on the main screen.

Okay, well anyway, let’s keep moving forward with our application icon.  Select our Certificate icon and change the size to 99×99 pixels.  You will see that the slider doesn’t have a notch for it, but don’t be alarmed.  You simply click on the Size and enter in 99.  Now hit return.  Bang, you have a 99×99 pixel icon.

SelectSize

Next, add your 14 Pixel padding:

AppIconPadding

Now, there are a couple of ways to create your icon for your application.  One way is to make the icon completely static, meaning, it always looks the same in the application list.  Or, you can make it more personal by allowing the background to change based on the theme of the phone.  Making it static is pretty simple.   You simple pick the Icon color and background color that best matches your application.  Let’s try it.  So, I will set the Icon color to White and the Background color to our favorite “orange-ish” color we used in Metro Studio, Part 1 – Splash Screen of this series, #E3883D.  It should look like the following:

AppIcon

Now, double click on the icon and change the name to ApplicationIcon.png.

ChangeIconName

Let’s export the file out into our Visual Studio projects Assets directory.  Simply click on the Export icon in the bottom right area of the screen.

SelectExport

You should now see an export dialog.  Make sure you select the right directory and that you have *.png selected.  Next click Export.  A folder where the icon was exported will pop up.  NOTE:  This will not prompt you to override the current icon, so be sure to backup your current icon if you want to go back.

ExportScreen

You should now be able to see your icon in your project.  Simple navigate to the Assets folder, hover over or double click the ApplicationIcon.png to verify it is the latest icon exported.

ApplicationIconExport

Now, we should be able rebuild, run the application in the emulator, hit the back button, swipe over to your application list and search for you application.  Presto!  You can see it in the list.

StaticAppIcon

“Personal” Icon

Remember earlier in this post I mentioned two kinds of icons?  Static and more “personal”?  Well, let me quickly show you how to make your application icon work with your phones theme.  It is actually pretty simple.  All you have to do is change the background of the icon to be transparent, save your project and Export it out over your current icon.

TransparentAppIcon

AppIconTransparent

Now, we should be able to rebuild your app,  run the application in the emulator, hit the back button, swipe over to your application list and search for you application.

CustomAppIconPhone

Notice that it now has your phones themed color as the background.  Pretty slick huh?

Store Icon

How about the store icon?  The beauty of Metro Studio is that we can easily create one!  To keep the icons separated and easier to manage, let’s add another Certificate icon to our project.  So, that will give us a total of 3 icons in our Metro Studio project, SplashScreen.  Now, let’s rename the icon to Storeset the background color to #FFE3883D, size to 300×300 pixels and padding of 14 pixels.  It should look like this:

StoreIcon

Again, it would be nice to be able to see the image at it’s original size. Now, let’s export the file into the Visual Studio projects Assets directory to keep them tied to the project.  You probably would want to put it somewhere else, but for now, and this blog post, we will keep it in our project.

So, now that I have it, what do I do with it?  Great question.  The answer, “Nothing!”.  Okay, that is a bit deceiving.  We don’t do anything with it until we submit the application for certification.  That is out of the scope of this blog, but to explain it briefly, when you submit your application to the Windows Store, part of the certification process requires you to upload your store icons (among many other assets).  This would be one of the assets you would upload.

Tiles

So, what does our application do right now if we pinned it to the start screen?  Let’s see.  Run your application.  After the app loads, hit the Windows key, swipe to the application list, tap and hold on our application icon and select Pin to Start.

PinAppToStart

You should be taken to the home page where your application is pinned.

PinnedApp

Uh, why doesn’t it look like the application Icon that I created?  Well, see, here is the thing.  We haven’t created one yet.  Could it attempt to resize your icon and put it in there.  Well, yeah, sure.  But, what if the resizing makes the icon look bad?  Who are you going to blame?  Yep, Microsoft.  So, they decided to play the blame game and give you control over what it looks like when it is pinned to the Start Screen.  Now you are to blame.  However, now, you can create a custom item for each size.  Meaning, you can make each one display exactly the right information necessary.

Okay, fine, we will take responsibility for our work and create our own.  Tiles are a very unique aspect of the Windows Phone and Windows application design.  Live tiles are one of the exciting design aspects of Windows Phone 8 and Windows 8.  They are used to not only represent your application, but provide the user with important information about your application without having to open the application itself.  Think of your Start Screen as a simplified dashboard, where you can take a quick glance and get a good idea of what is going on in your life.

Briefly, there are three Tile templates available in Windows Phone 8:

  • Flip – this will flip your tile between two icons and allow you to update information on each tile
  • Iconic – same as the Flip tile but displays an icon instead of an image
  • Cycle – cycles up to 9 images

Since creating “Real” live tiles is not in the scope of this blog post (not to say I won’t create another post on the topic), we are only going to create the images necessary to use on the start screen for resizing.  As of now, Windows Phone 8 uses three sizes of icons for their start screen:  Small (159×159 pixels, 49 pixels padding), Medium (336×336 pixels, 101px padding) and Large (also known as Wide, 691×336, 101 padding).

First of the three, the small tile.  Let’s go back to Metro Studio and drag another certificate into our SpashScreen project.  Rename it to FlipCycleTileSmallSet the size to 159×159 pixels and padding to 49 pixels.  It is up to you if you want to make the background be static or not.  For now, I am going to keep the background a little more personal and leave it transparent.  Export it to your Assets/Tiles folder.

Second, let’s do the same thing for the medium tile.  Go back to Metro Studio and drag another certificate into our SpashScreen project.  Rename it to FlipCycleTileMediumSet the size to 336×336 pixels and padding to 101 pixels..  Export it to your Assets/Tiles folder.  Let’s take a quick look at how things are looking for our app.  Rebuild the solution and run it.  Hit the Windows button to go home.  You will notice that it is unpinned from your start screen.  Any time you deploy a new application to the device, it delete the old one and updates to the new one.  So, go back to the application list and pin it to the start screen.  Bang.  Do you see the new Medium tile?  Should look something like below.

TileMedium

Now, hold down on the icon, and it will raise a little and you will see two icons in the top right and bottom right corners.  If you select the top right icon, it will unpin the tile from the start screen.

ChangeIconSize

If you select the one on the bottom right, the icon will change to the small tile that we created.  Tap anywhere else on the screen and the icon is now displayed as our small tile.

SmallTile

Okay, so, if you got a little zealous, you probably tried to click on the bottom right icon once again.  If you didn’t, go ahead and try it now.  What happens?  It changes to the wide tile (or large tile).

BlankWideTile

Well, up to this point, we haven’t created the wide (large) tile yet.  So, what is happening?  Why is it even showing up?  Well, by default, your application, out of the box, has set for us, both the small and medium tiles with a default image, that we saw earlier.  What about the wide (large) tile?  Did you know you can tell the application which tiles (images files) to use?  Again, if you look in your Assets/Tiles folder in your project, you will see a number of files.  You will probably recognize FlipCycleTileSmall.png and FlipCycleTileMedium.png.  Those are the names of the icons we have already created.  By default, when you create a new project, you get those two and FlipCycleTileLarge.png for free.  However, if you were to look at the application manifest file, Properties/WPAppManifest.xml, you would see that the application is set to Support Large Tiles, but that the image itself isn’t set.  Kind of strange why they didn’t put the default in there for us.  So, when you run the application, you get support for the large tile, but because it isn’t set, you don’t see it.

AppManifest

WPAppManifest

So, let’s just quickly set the large tile by selecting the FlipCycleTileLarge.png from our Assets/Tiles folder.  Now, rebuild and run the application.  Remember to do a rebuild, or you may not see the change.

LargeTile

So, all we have left to do is create the large tile.  Go back to Metro Studio and drag another certificate into our SpashScreen project.  Rename it to FlipCycleTileLargeSet the size to 691×336 pixels and padding to 279×101 pixels.  Okay, I am probably not fooling you here.  We can’t do all of that fancy, non-square, stuff.  What do we do now?  Well, we have two alternatives.  One, we create the correct icon, meaning one that is 336×336 pixels, then open our favorite paint program, do some design magic, export it out and give it a whirl.   Or, you can use a cool utility that can create most of the assets we have already talked about with very little effort.

PerfectTile for Windows Phone 8

I know, you have probably been biting your fingernails off waiting in anticipation for me to reveal this awesome little tool I found.  It is called, PerfectTile for Windows Phone 8, by Nirmit Kavaiya.  Now, before I get started on this tool, I want to make it very clear what it is not.  It is not a replacement for Metro Studio, but in fact, a tool that will make Metro Studio even better.  What is it then?   PerfectTile for Windows Phone 8 creates application, tiles, splash screen, store and lock screen Images for Windows Phone applications.

PerfectTile for Windows Phone 8 takes an image file and converts it to all of the assets necessary for you Windows Phone 8 application.  But, isn’t that what we have been doing?  Well, somewhat.  You see, we will let Metro Studio do what it does best, create an icon for our application.  Then, we will let PerfectTile for Windows Phone 8 do what it does best, create the other assets from an icon.

I won’t go over all the features of PerfectTile for Windows Phone 8, but I might in another post.  For now, I will just show you how easy it is to create a large tile.  First, let’s start up PerfectTile for Windows Phone 8.  You will see the welcome screen where you can go to the website, email the developer or follow the developer on Twitter.  We will choose Continue.

PerfectTileSplashScreen

From the welcome screen, you will be taken to the main screen.  Go back to Metro Studio and select our icon FlipCycleTileLargeSet the size to 336×336 pixels with no padding.  This will give us the greatest size icon that will fit in our space.  Export to a temporary location.   You see, PerfectTile for Windows Phone 8 will take our icon and perform any resizing necessary.  So, on the main screen of PerfectTile for Windows Phone 8, change the name on the tile to be whatever you want.  Then, for fun, let’s set the background color to our cool awesome amazing orange, #E3883D.  This color will be use for the preview images and the background of the splash screen.  Make sure that Tile Type is set to Flip / Cycle.  Next, browse and select the icon from our temporary location.  Click on the Large tabOverride the Icon Alignment and clear the field.

PerfectTileMainScreen

Now select Create images.  A window will popup and show you all the images that are going to be created.

 

CreateImagesPreview

It will prompt you for a directory to dump the files.  Once you select the directory, it will generate the images and then open up a File Explorer windows where you can see your images.  Copy and paste FlipCycleTileLarge.png file into the Assets/Tiles directory.  Rebuild the solution and run.  Now what does the large (wide) tile look like?

WideTile

Now, you will notice that you will need to tweak some of the settings to get your icons to be created at the right sizes, but still pretty slick little tool.  Like I said earlier, I don’t want to go into all the settings and features in PerfectTile for Windows Phone 8, but you can surely see how PerfectTile for Windows Phone 8 and Metro Studio can work together and pull off some great stuff pretty quickly.

I recommend you try to create a new project, create an icon in Metro Studio, then import it into PerfectTile for Windows Phone 8 and create the images, copy all the created images into the correct Assets area in your project and run it.  See what it looks like.  Get back to me on your experience.  I would be interested to hear how it went for you.

Summary

Well, you can clearly see that creating standard icons and tiles for your Windows Phone 8 project using Metro Studio is pretty simple to use  and you don’t need to know a whole lot about design.  In fact, using PerfectTile for Windows Phone 8 with Metro Studio can produce pretty much all you need to get your application started and ready for an initial entry into the Windows Store.

Now, you are going to probably want to create really cool tiles using the real live functionality, along with notifications and all the bells and whistles, but like I have mentioned in the past, most developers don’t have all the design skills necessary to pull it off.  For now, it meets our purpose for a professional, metro look, without a lot of design skills.

If I could change a few things, what would I do?  Hmmm … here is a small list:

  • Enable the ability to edit a single icon at a time with the full editor space.  This will allow the user to see the entire icon they are editing.
  • Enable radius-x and radius-y for iOS/Android developers.
  • Add a little more flexibility to set width and height.  This would allow the user to create wide tile images.
  • The ability to offset the main icon would allow the user to define a more custom tile image.

I suggest that Syncfusion partners or buys the rights to PerfectTile for Windows Phone 8, by Nirmit Kavaiya.  The two together would be a powerful tool for the developer.  Imagine if you could build the icon, select the platform and then export out the images to a specified directory all from the same tool.

Hope you enjoyed this post.  Send me a line or share with others, both are encouraged and appreciated.

Also, keep an eye out for the next post in this series, “Metro Studio, Part 3 – Background”.  In this post, I will quickly show you how to create a simple background using Metro Studio.

 
Comments
 
Comments

No comments yet.

Leave a Reply

You must be logged in to post a comment.