WP7 Icons Quick and Undirty

An unexpectedly time consuming part of Windows Phone 7 development are icons. Developers often don’t put much care into icons, and they are wrong. Your app is listed in the marketplace with an icon and most users just skip the crappy ones. If you make a bad icon most users won’t even read what the application is about, let alone download and install it.

That said, as a developer with some occasional design inspirations I found Expression Blend to be the perfect tool to generate WP7 graphics. The simple, minimalist style of WP7 icons just fits well with Blend and XAML in general.  Pro designers will probably be better off with specific graphic tools, but to me it’s just easier and faster to “program” my icons in Blend. I’ve had some decent results to support this approach but of course YMMV (the smile below is a placeholder and should be judged as such ).

The main issue in creating the graphics with Blend is that you spend a lot of time cropping pictures to the correct size. That’s why I built myself a raw tool that is now decent enough to share with the world. It’s really raw, but it does the job. In fact it’s nothing more than a Blend/VS solution with correctly sized canvas and the ability to export all the images in one shot. The code is horrible and all, but it saved me a lot of time.

Pixel-perfect

The Windows Phone 7 marketplace requires you to create several icons in different sizes. Don’t take this as an unnecessary hassle, it is in fact an opportunity: it means you can create a pixel-perfect image for every size. Do not create an image and just resize it to each size. There are good reasons against this:

1. The tile image is not a simple icon. It will be shown on the main phone page and includes at least the application name. That’s why your image must have an offset to take this into account. My solution overlays the system settings icon, so that you can check if your logo is correctly centered. If your icons are full-width you can ignore this.

2. You can (and should) use a different detail level for every size. A good looking 173×173 icon may look like an undefined mass of blurry pixels when resized to 62×62. Just keep the general theme and image consistent.

3. Straight lines will become anti-aliased and look blurry when you resize them (in XAML when you use a viewbox). It’s simple: the width of a line when stretched could become a non-integer value (for ex. 3.5 pixels) and will look blurry. If you have a different image for every size you have full control and can make one-pixel changes to avoid this effect. Look at this example: it may not look obvious but on a close look you’ll see that the left picture is not as well defined as the right one. On the phone, the difference is even more obvious.

Download

Usage is simple: open the solution in Blend 4 or Visual Studio 2010 (it’s a WPF application), delete the placeholder smile and put your graphics in its place. Run the application and hit the export button to save the images. Tip: use resources for colors, shapes, etc. so that you can change them in one shot.
Enough said: download WP7IconBuddy and use it at your own risk. I’d love to hear some feedback.


Source: http://www.frenk.com/2011/02/wp7-icons-quick-and-undirty/