WP7 Icons Quick and Undirty
Join the DZone community and get the full member experience.Join For Free
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.
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.
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.
Opinions expressed by DZone contributors are their own.