The Application Bar
For TallyMarks, I need a PLUS icon for incrementing the counter. This was before the release of the application bar icons on MSDN, so I had to make one myself. If you find yourself in a similar situation, maybe this will help.
First, if you are not familiar with the application bar, it is the horizontal bar that shows up at the bottom of the phone screen. It has room for four icons and can even expand to show a text-based menu if you’d like.
In the screenshot of Tally Marks above, you can see my application bar directly below the “5”. It has one icon, used for incrementing the count. If you rotate the phone (which TallyMarks doesn’t support), the application bar will remain where it is, but the icons will rotate in-place so they maintain their proper orientation.
All About Application Bar Icons
You can only use one color for application bar icons and that color is white. The rest of the icon should be transparent so Windows Phone 7 can colorize it appropriately for the user’s current theme.
Icons should be 48 x 48 pixel squares. I made mine a PNG which seemed to work well. The icon pack from MSDN also uses PNGs. Your icon should not include the white circle. The Phone will draw that for you. The icon itself (in my case, the white cross) should fit in a 26 x 26 pixel smack-dab in the middle of the 48 x 48 pixel icon.
Making Windows Phone 7 Icons in Expression Design
To help me with my icon creation, I first created an Expression Design template. You can download it if you’d like to use it too.
The template has three layers
- The Background layer is a 48 x 48 black background so you can see what your icon will look like on the phone. Without this layer, you’d be trying to draw white on white, which is almost always difficult. Be sure to turn this layer off before saving your icon since the icon needs to be on a transparent background.
- The Icon Boundary layer is a 24 x 24 box right in the middle of the 48 x 48 icon. This box represents the limit of your icon. This layer also has a white circle that roughly approximates the circle that Windows Phone will draw around your icon. Be sure to turn this layer off before saving your icon.
- The icon layer is where you draw your icon. Stick to white and stay within the orange box and all will be well.
Draw your icon, and when you’re all done, choose “Export” from the File menu.
Export as a PNG, making sure that both the background and icon boundary layers are turned off. Also be sure to check the “Transparency” box.
Don’t forget to set your Build Action to “Content” and your Copy to “Copy always”. If you don’t, then your icon will show up as an ugly X to remind you.
More resources