Home » Windows Phone 7: Drawing graphics for your application with Inkscape – Part II: Icons

  • Windows Phone 7: Drawing graphics for your application with Inkscape – Part II: Icons

    Windows Phone 7: Drawing graphics for your application with Inkscape – Part II: Icons

    Lately I have been working on a Windows Phone 7 application in my spare time. It has been a lot of fun but, I have to admit, there has been some frustration as well. The problems I ran into are caused by my unfamiliarity with WP7 (evidently), the strict requirements of the Windows Phone Marketplace and flaws in WP7.

    Some of the requirements of the Windows Phone Marketplace concern the graphics:

    Icons

    For each application, you must submit one icon to represent your application in the Windows Phone Marketplace catalog. This icon must match closely the icon provided in the XAP package. Users see this icon when browsing the application catalog on the phone before making a purchase.

    Caution noteCaution: Do not use transparent PNG image files for the following phone application icons.

      • A small mobile app tile icon (required), used in the phone Windows Phone Marketplace, 99 x 99 pixels in size.
      • A large mobile app tile icon (required), used in the phone Windows Phone Marketplace, 173 x 173 pixels in size.
      • A large PC app tile icon (required), used in the phone Windows Phone Marketplace, 200 x 200 pixels in size.
      • Background art (optional), used in the Background panorama, 1000 x 800 pixels in size.

    These are just the regular requirements; I left out the special (but obvious) rules concerning violence, weapons, drugs and adult related content.

    There are a couple of sites that show you how to draw icons using Expression Design but since all the tooling for writing Windows Phone 7 applications is free and Expression Design is not I decided to take the free-way and used Inkscape to draw the graphics. Like Expression Design Inkscape uses a vector format which is very convenient when you have to draw the same image at several sizes.

    Resources

    There are a couple of invaluable resources when exploring the possibilities, do’s and don’ts in WP7 design:

    1. UI Design and Interaction Guide for Windows Phone v2.0
      This guide provides a lot of guidance and clues that show how to get a feel for the WP7 experience. Read it!
    2. Design Templates for Windows Phone 7
      Although this zip contains mostly PSD (yes…) files it also contains a PDF with a quick overview of the provided templates and some hints.

    Kinds of Icons

    There are two things called Icon in Windows Phone 7. First the images that are used in the Marketplace website. Although some tutorials exist that create transparent PNGs this is not allowed by the requirements.

    the second kind of icon are the icons that are used in the ApplicationBar:
    image

    These icons are optional and have very specific requirements.

    Let’s draw the Marketplace icons

    If you read the previous post in this series you can easily predict what is going to happen now. If you didn’t read the previous post on drawing a tile please do so now.

    1. Because the Marketplace icons are not allowed to be transparent we’ll have to add a background. It is easy to do so by simply making one of the accent color layers visible. There do NOT select any content of the drawing. When you then Export the Bitmap and do NOT tick the Hide all except selected setting the layer that you made visible will also be exported to the PNG:
      image
    2. You can then check the PNG file and it will look something like this:
      icon_99x99
    3. For the other required sizes just repeat this process and use the correct Width and Height settings.
    4. Making the icons this way will also fulfill the requirement that the Marketplace icons have to be very similar to the tiles.
    5. Next add the icons to the project in Visual Studio and put them in the ROOT folder of the project, set their Build Actions to Content and do not copy them to the output directory:
      image

    Next up: the ApplicationBar icons

    The ApplicationBar is an optional control in Windows Phone 7 applications but the icons that are being used have some very special requirements because the Phone will recolor these icons to match the theme. If the Phone didn’t do this you would have to provide several versions of all icons. But there is more. It is not allowed to make text-only icons. The icons must be 48×48 pixels in size, be white on a transparent background. If you make the icon of a different size it will be scaled and from experience I can tell you that it will look bad.

    The icons are also embellished by a little circle. So when you draw the icon you will have to provide enough margin around the drawing to make place for the circle.

    Use a margin of 11 pixels from all sides and you’ll be fine. If you must use characters use the Segoe WP fonts and see page 10 in the Design Templates for Windows Phone 7 to note what font size and alignment should be used. The Segoe font is also installed with the SDK.

    When you install the Windows Phone 7.0 SDK you will find a bunch of icons in the C:Program FilesMicrosoft SDKsWindows Phonev7.0Icons folder. There are both white and black versions. Use the white ones from the Dark folder! (“Dark” refers to the theme in which the icons are used)

    Let’s draw

    1. Start Inkscape and set the document size to 48×48
    2. Show the grid. (View|Grid)
    3. Rename the current layer to Background. Add a layer to the Background layer named Theme and add a square to the Theme layer that more than covers the document. When needed see the previous post for detailed instructions.
    4. Set the fill of the square to black.
    5. Add a layer named Circle to the Background layer
    6. Use Import (File|Import) to add the appbar.basecircle.rest.png from the Dark folder to this Circle layer and move the circle exactly into the document. it should be a perfect fit. Using snapping should make it easier to place the circle and changing the opacity of the Theme layer will help too. Tip: Make sure you embed the PNG file, do not link because then you will have to keep the PNG file available.
      image
    7. When everything is positioned nicely pull the opacity back to 100% and lock the layers.
    8. Add a new layer named Icon (you could name it Icons and add a sub layer for each icon you make.
    9. Steps can be skipped by downloading the template I made.
    10. Draw the icon (using white only!) in this layer.
    11. Here is my design;
      imageI used the Segoe WP Black font and made it italic.
    12. Make sure only the layer(s) containing the icon you want to generate is unlocked and active.
    13. Select all (Ctrl-A)
      image
    14. Export the bitmap (File|Export Bitmap…) and set the settings like this:
      image
    15. Click Export.
    16. Add the PNG file to the application’s project. Opposed to the tiles and Marketplace icons these can be stored in any folder in the solution. I put them in a folder named Resources. Set the Build Action to Content and do not copy the icon to the output folder:
      image
    17. In your application when you instanciate the ApplicationBar and add a button like this:
      image
    18. This will cause the icon to be used in the ApplicationBar:
      image
    19. When the White Theme is selected:
      image

    Share this