Mango Sample: Icon Design

Let’s take a minute to walk without using Express Design to create a logo for your Windows Phone application. Expression Design is included in the Expression Suite – it is NOT included with the free version of Expression Blend (which is included in the Windows Phone SDK).

Required Formats

When you submit your application to the marketplace, you will be prompted to provide a certain set of images. These are the required images at the time of submission.

1. Marketplace_Desktop_200x200.png
   This is displayed when your application is presented to the desktop Marketplace
2. Marketplace_Phone_173x173.png
   This is displayed when your application is presented to the phone Marketplace
3. Marketplace_Phone_99x99.png
   This is displayed when your application is within a list on the phone Marketplace
4. Application_Tile_173x173.png
   This is used as your application’s icon when it is Pinned to Start
5. Application_Icon_62x62.png
   This is used as your application’s icon when it is in the Program List

Choosing your Icon Design

  

In the images above, see how the color changes? This icon has a transparent background. When rendered, the accent color becomes the background. As a result, white a reliable primary color in your icon design. Full color icons make your application’s tile stand out. However, simple, white icons make your application look like a Windows Phone application. Choose your icon wisely.

Additional Icons

1. AppBar_29x29.png
   Application Bar Button Icons are 29x29 -  WP adds the circle for you
2. Panorama_1000x800.png
   Panorama Background Images are 1000x800 if you use this control

Application Bar Icons

When you use application bar icons, it’s not important to pay attention to themes. 

 

In the images above, the left image is the Dark theme and the right image is the Light theme. The icons are high-contrast in each theme. How many icons are necessary? Just one. The Application Bar handles colorizing the icons based on the current theme.

In-Application Icons

When using in-application icons, it’s very important to pay attention to themes.

 

In the images above, the left image is the Dark theme and the right image is the Light theme. The icons are high-contrast in the Dark theme but invisible in the Light theme. This is because the image is White on Transparent. I demonstrate how to handle this problem here.

Expression Design

Microsoft Expression Design 4 is the perfect companion to Expression Blend^® or Expression Web. Leverage existing artwork, or use intuitive vector drawing tools to quickly build sophisticated vector and image assets. Seamlessly transfer them to your Expression Blend or Expression Web projects knowing that their fidelity and live effects will be maintained throughout the entire designer-developer workflow.

Design is handy to create nice Windows Phone icons in various formats.

Some Simple Steps

I can’t teach you how to use Expression Design in one Blog. Design is powerful. It is not reasonable to expect to pick it up super-fast with no Graphics Design experience. But with very little effort, this could become a powerful tool in your tool belt.

1. Your starting canvas can be large (like 1000x1000) – just make sure it is square. A large canvas can make drawing easier.

2. (optional) Fill the canvas with a transparent square. This ensures your layout is preserved when resized later. You may also color this square to preview your icon.

3. The best hint is to keep your design simple. As you resize your icon smaller and smaller, complex designs look messy and cluttered. Simple designs resize nicely.

Exporting Slices

1. A slide is a stored selection from your drawing. We need to create 5.

What is a slice? A slice is view of the drawing. It may be resized without impacting the drawing. It is not a snapshot; it updates w/the drawing.

2. To create a slice, click CTRL+A, and then CTRL+SHIFT+K. Each time you do this, you will create a slice.

Note: While creating, click the eye – hiding previous slices. Slices shouldn’t contain other slices.

4. Rename & resize each of your 5 slices per the icon chart earlier in this article. The Width and Height should stay in sync. The Slice name is the file name when the slice is exported later.

5. Create 5 slices. Change the name of each slide to correspond

6. Export image slices as a PNG formatted file. Be sure the destination file is into the /Images folder in your Windows Phone Application project.

7. Update our project properties:

Deployment options/Icon is your Application_Icon_62x62 file.

Tile options/Background image is your Application_Tile_172x172 file.

Conclusion

Your MSDN subscription gives you everything you need. Can you make Windows Phone application icons in Photo Shop? Of course. But what tools does Microsoft give you, and are those tool high enough quality for your icons? Yes. Blend is an excellent tool for generating high-quality, vector-based icons.

More Resources

• Creating Windows Phone Icons With Expression Design
• Creating Windows Phone (WP7) Icons With Expression Design
• Design Resources for Windows Phone
• Expression Blend for Windows Phone 7

Best of luck!