Windows Phone 7: Drawing graphics for your application with Inkscape – Part I: Tiles

UPDATE: I found out that I made a couple of mistakes: only the 173×173 tile is allowed to have transparent pixels. I fixed this post.

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:

Tiles

The small mobile app tile that you want displayed on the phone app list. Games must use the large mobile app tile in place of the small mobile app tile. The small mobile app tile must be a 62 x 62 pixel PNG file.
The large mobile app tile that you want displayed when the user pins the application to the quick launch area on the phone Start experience. The large mobile app tile must be a 173 x 173 pixel PNG file.

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:

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!
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.

Let’s draw a tile

There are two types of tiles the first one is an image that is shown in the app list:

According to the Marketplace Requirements this tile is not allowed to have any transparent pixels. The image above (the grey background) shows what happens if you use transparency.

The transparent areas of a tile are filled with the accent color of the phone. So keep in mind that when you use transparent areas you do not use a color in the tile that doesn’t go well with the standard accent colors:

The color values (RGB):

Be aware that WP manufactures/carriers can add two additional color to brand their products.

Users can also switch their phone to a light theme causing the background from black to white:

You will have to make sure that your app’s tiles still looks good in the light theme.

The tile in the app list has to be 62 by 62 pixels in size. Here is what I did (remember: I am a developer, not a designer so there might be better ways, post them in response!)

Open Inkscape and modify the document properties (File|Document Properties) and set the Custom size to 500×500 pixels (yes you can set it to 62×62 too, anything that is square is ok)
Open the Layers view (Layer|Layers…) and rename the layer to Black:
Switch on Snapping:
Show the grid lines (View|Grid)
Draw a square and use the snapping to make it fit the document perfectly (do NOT make it bigger or smaller)
With the square still selected modify its Fill and Stroke (Object|Fill and Stroke). Set the fill to a flat color and make it black:
Set the Stroke to No paint:
Now lock the layer:
Duplicate the Black Layer (Right-click|Duplicate Current Layer) and rename it to Red and unlock it:
While the Red layer is selected/active select the square in the document and adjust its fill by setting it to E51400FF:
Lock the Red layer.
Repeat this process for all standard colors or download my template here. (A very quick way to duplicate the layers and edit them is by using the XML edit feature of Inkscape (Edit|XML Editor) do this at your own risk; it is possible to break the document)
Next I unlocked the Black layer and made the black square large, extending on all sides of the document. Then locked it and duplicated it to a new layer named White and changed the square in that layer to be white. Locked it too.
I moved the White layer all the way down and the Black layer just above it.
Now you have a document with a stack of layers that each contains a square with a standard accent color. Make sure you locked all layers. By right-clicking a layer and selecting “Show/hide other layers” you can quickly see your icon on the accent color.
Add a layer that will contain the icon drawing I named mine “app list icon” and move it all the way to the top.
By making the Black and White layers visible you can select the Phone’s theme and by toggling the visibility of the accent color layers you can see your icon in combination with the accent colors.
(In my template I grouped the backgrounds in a parent layer and the Accent color is a separate layer too:)
Draw your icon while the app list icon layer is active (feel free to add any sub layers). Here’s my design:
IMPORTANT: when you draw thin lines like I did, make sure their stroke is thick enough. E.g., when you set up the document to be 500×500 pixels and you draw with a stroke that is 1 pixel wide, when the icon is rendered to 62×62 the actual thickness of the line will be 500/62 (roughly 8) times thinner so a measly 0.125 pixels wide. Rounded that leaves you with nothing. So set the stroke to at least 8 pixels wide when using a 500×500 pixel setup.
Save the document (as an .svg file) and keep it safe: we’ll need it again. I always add it to source control and commit changes frequently so I can get back to a better design that I just ruined (I use Mercurial and TortoiseHG (I like the new workbench a lot))
Time to create the first version of or app list tile.
Open the Export Bitmap (File|Export Bitmap) and set the dialog like this:

Note that you need to select the Page button so the Bitmap size Width and Height will remain the correct ratio. Set the Width and Height to 62, do not worry about the dpi, select a file name (make sure it ends in .png) and check the “Hide all except selected”. This last setting will only work when you make a selection in the drawing. If you do not use this setting the layers with accent colors that are visible will be exported as well.
Hit Export. If all went well you can open the png file and see that it’s transparent and only contains the app list icon layer.

The second type of tile is the tile for the quick launch area:

Make sure that only the “app list icon” layer (and optional sub layers) is unlocked.
Select all (Ctrl-A):

Note that although the Blue and Black layers are visible their rectangles are not selected. This is due to those layers being locked.

To create this tile is easy: in Inkscape select all (Ctrl-A) and open the Export Bitmap dialog (File|Export Bitmap…)

Note that the size has to be 173×173 pixels and make sure you name the file different from the app list tile so you won’t overwrite it. Check the “Hide all except selected”. This last setting will only work when you make a selection in the drawing. If you do not use this setting the layers with accent colors that are visible will be exported as well.
As simple as this might seem (thanks to using vectors we get a consistent quality) there is a little more we need to take into consideration when designing the tile.
If you want the quick launch tile to contain live information which means updating a number in the top right hand corner or adjusting the text shown in the tile, you have to make sure that there is enough room in your tile design. In the Design Templates for windows Phone 7 you can find the area sizes that the number and text will/might occupy:

So makes sure the design of the tile doesn’t interfere with these live updates if the application uses these.

Test the tiles

To test the tiles you have to do 2 things:

Add the tiles (.png) to the Windows Phone solution IN THE ROOT of the project, set the Build action to ‘Content’ and do not copy the tiles to the output:
Then set the properties of the project like this:
Hit F5 for debugging and if all went well your application will start in the emulator. Press the Home button and navigate using the arrow that point to the right to the app list:
This is where you’ll see the 62×62 tile.
Now press the tile and keep it pressed until a menu pops up:
After clicking “pin to start” the phone will navigate to the quick launch area and will show you the 173×173 tile:
You can unpin this tile by pressing it and keeping it pressed until the unpin icon shows up: