Step 1: Install GIMP - it's free and works great as an icon creation tool. I'm by no means an expert at it, but if you've never used it before I'd recommend looking at some basic tutorials, like "The Basics" (just ignore all the drop shadow stuff!) and "GIMPlite Quickies" for a bit of image manipulation.
Step 2: Find a few icons to represent the app - this can be the hardest part, depending on what your app does. Here are some sites I've had success with:
Small icons
- Glyphish ($25, or free with attribution) - the icons are small, but there are a lot of them. I've used Glyphish icons in a few of my apps, including the one I'm working on now. It's worth $25!
- Syncfusion Metro Studio (free) - 600 Modern-style icons
- Silk (free) - 700 icons, although they're all rather small at 16x16
- Ikonic ($5 for PNGs) - 150 icons that are a bit larger
- Batch (now free!) - 300 icons, although they appear to require Photoshop
- The Noun Project (prices vary, many are free) - many black and white icons. These are good choices if you go with a transparent icon (described later)
Bigger icons
- Cutcaster (prices vary) - I used Cutcaster extensively for the city backgrounds in FlightPredictor for Windows 8. They have a pretty good selection, the pricing is reasonable, and many images don't require any sort of attribution.
Step 3: Decide on a full-color or transparent icon
There are two styles I consider for icons: a "full-color" one, such as the one for FlightPredictor:
or a "transparent" one, such as the one for this new app I'm working on:
In this one, the icon itself is white, and the background is transparent (I made it brown here so it's visible) and matches the theme color of the phone. This is a nice effect, especially if the icon itself is fairly simple. I didn't use this for FlightPredictor because the clock icon would have been obscured.
If you do decide on a full-color icon - don't forget that gradients look out of place on Windows Phone! The FlightPredictor icons on other platforms has a slight gradient over the length of the plane, but I changed that to a solid color for Windows Phone.
Step 4: Create a blank app icon
It's always easiest to start with the largest icon you'll need and scale down from there. For Windows Phone 7 this is 173x173, and for Windows Phone 8 this is 336x336 for the medium tile. (for the large tile I'd copy from the medium one into the large one, which is of size 691x336) The sizes are different for iconic live tiles - see this page on tile resolutions.
For transparent icons, it's easiest to create the app icon with a transparent background, then paste the icon parts in and turn them all white.
Step 5: Copy the parts into the app icon
If you've followed the steps until now, this shouldn't be that hard. Keep in mind that you will need to leave some blank space at the bottom of the tile for the name of the app. Be sure to keep separate layers for the different source icons in case you want to move them around later.
Step 6: Save it
Be sure to keep the original .xcf, as this will retain the layer information. Then save copies as .png at the various resolutions you will need.
--
As you can see, it's still a somewhat long process, but with the steps hopefully it won't be too painful. Feedback is welcome: post here or at @gregstoll on Twitter. And if you're interested in getting started with Windows Phone development, and if you're in the Austin area, email me to get access to DVLUP!
Edit: Randall Arnold points out that Inkscape is a great free tool for doing vector art, which gives you much better quality (and resolution-independence).
--
See all my Windows Phone development posts.
I'm planning on writing more posts about Windows Phone development - what would you like to hear about? Reply here, on twitter at @gregstoll, or by email at ext-greg.stoll@nokia.com.
--
Interested in developing for Windows Phone? I'm the Nokia Developer Ambassador for Austin - drop me a line at ext-greg.stoll@nokia.com!