Windows Phone Mango Sample: Icon Design
Windows Phone Mango Sample: Icon Design
Join the DZone community and get the full member experience.Join For Free
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.
This is displayed when your application is presented to the desktop Marketplace
This is displayed when your application is presented to the phone Marketplace
This is displayed when your application is within a list on the phone Marketplace
This is used as your application’s icon when it is Pinned to Start
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.
Application Bar Button Icons are 29x29 - WP adds the circle for you
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.
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.
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.
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.
ConclusionYour 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.
Opinions expressed by DZone contributors are their own.