Creating Windows Phone 7 Application
and Marketplace Icons

Author: Rick Engle

Introduction

This guide steps you through the process of creating icons for your Windows Phone 7 application as well as for the Marketplace Hub and Marketplace catalog. The icon requirements come out of the Windows Phone 7 Application Certification Requirements guide. Those icon requirements are shown in the tables below.

Application Iconography

Windows Phone Marketplace Iconography

Requirement

Expression Design 4 (part of Expression Studio 4 Ultimate)

Product Details

http://www.microsoft.com/expression/products/StudioUltimate_Overview.aspx

60-Day Free Trial Download

http://www.microsoft.com/expression/try-it/Default.aspx#PageTop

Download the Design File For this Tutorial

http://gallery.expression.microsoft.com/en-us/wp7IconDesign

Get Started Creating Windows Phone 7 Icons

Let’s get started. Just follow these steps:

1. Launch Expression Design 4
2. Bring up Edit/Options/General
   
   
3. Change Rectangle antialiasing to Smooth
   
   
4. Create a new project (File/New) with a width and height of 1024. This is bigger than you need but just gives some room to play
   
   
5. Create a rectangle on Layer 1 which is the default layer in a new project. Go to the toolbox on the left and choose the Rectangle tool
   
   
6. Then draw a rectangle anywhere on the artboard
7. Click on the color palette property and click on the Fill tab (far left) and pick a background color. The color doesn’t matter; it’s just to offer something other than a dull white background.
   
   
   
   

   You’ll end up with something like this:
   
   

   Now let’s make that rectangle fill the entire artboard. Press the V button on the keyboard to switch to selection mode then click on the rectangle. You can also select that tool from the top left of the toolbox:
   
   

   Once you have clicked on the rectangle and see the selection handles you can change the properties of the rectangle using the Action Bar at the bottom of the screen to:
   
   

   Note that you will need to first click the linking button to break the link between width and height to independently change the W and H properties
   
   

8. Now the rectangle fills the whole artboard. Now double-click on Layer 1 on the right and rename it to Base Layer and then click the lock button (looks like a padlock) to the right and lock that layer down
   
   

   The reason to lock it is to prevent that layer from being included in our resultant icons.

   Now create a new layer, click on the cogwheel at the bottom left of the property pane

   Call this layer Square Base
   
   
   
   
   
   

9. Create a new Rectangle on the Square Base layer and pick a different color so you can see it. Size it to be 600px W by 600p H using the Action Bar.
   
   
   
   

   Position the new rectangle so it’s roughly in the middle:
   
   

   This is going to be the square base that your icon design sits on top of and provides a square guide and placeholder for your icon.

10. Now change the opacity of the new rectangle to be 0% so that it does not become part of your icon. The opacity property setter is a bit below the color picker in the top right property window:

    

    NOTE: You can also wait until you are ready to generate your icons to make this rectangle transparent so you can see its boundaries while drawing your icon design on top.

    OK now that the foundation is done, time for the artwork. Create a new layer and call that layer Windows Phone Icon. You can call it anything you want and it will be a new layer on top of the base layer and will be where you draw your icon artwork
    
    

    You will end up with:
    
    

11. Now the next part is an exercise left up to you to create the art you want on top of the Windows Phone Icon layer. You can also create additional layers on top of that which can also be pieces of your icon artwork. To get you started as an example I’ll step though creating a simple icon design:

    Before you start drawing the icon design make sure you have selected the Windows Phone icon layer first so that as you are drawing the design shows up on the right layer. You would see a light blue line around the layer selected:
    
    

    Start off creating a circle as a background. To do this click on the Toolbox and click and hold down the left mouse button to bring up the context menu and click on Ellipse or press L:
    
    

    To draw a perfect Circle rather than an Ellipse, hold down the SHIFT key while dragging out a circle. Press the V button on the keyboard to switch to selection mode then click on the circle. You can also select that tool from the top left of the toolbox:
    
    

    You can now click on the circle and then change its color in the Appearance color palette:
    
    

    I used a color of #9F143B.

    Make sure that the opacity is set to 100% (not transparent) as the opacity level is remembered from that last time you use it so it could be 0% if you don’t change it.

    Also use the keyboard arrow keys to nudge your circle to be in the center of the rectangle from the Square Base layer. So far your design should look like one of these depending on whether you have the Square Base layer rectangle set to 0% opacity:
    
     

    Now let’s add a border around the circle. Go to the Appearance properties and click on the Stroke button (2^nd from the left):
    
    

    Pick a color, I picked a gold color:
    
    

    And then just a bit down at the lower right of the appearances palette change the value of the Width property. Zero (0) means no border and the higher the number the thicker the border. I used 12:
    
    

    Now the icon looks like this:
    
    

    Let’s add a glow around it too. Just below the Stroke/Width property is the Effects area:
    
    

    There is a Fx button you can click on to add a new effect. Click on that then pick Effects/Outer Glow:
    
    

    Once that is added you can scroll down the Effects settings and reveal settings to adjust the glow effect, I set its size to be 8. It’s easy to change the color of the glow here:
    
    

    This ends up applying a nice corona around the circle:
    
    

    Finally add some text to the logo, either press T or click on the Text tool on the toolbox:
    
    

    Move your mouse over the icon and click to begin a text area. Type in what you want then size it in the Text properties by choosing the Type size, I picked 96 pt and then pick your favorite font (I used Harlow Gold Italic). Keep in mind that you may have different fonts installed on your PC:
    
     

    You can also pick the color you want and use the Selection tool to select and position the text where you want it on your design.
    
    

    If you are following along the design should look like this:
    
    

    Finally I added another glow to punch up the text:
    
    

    And now the final sample icon looks like this:
    
    

    NOTE: For some terrific tutorials on creating icons using Expression Design, check out this tutorial by Arturo Toledo from the Expression Design product team:

    http://www.microsoft.com/showcase/en/us/details/9b25acd4-c3ee-4254-a00b-c40840199460
    

12. Once your design has been drawn on top of the layer it’s time to make sure it’s properly centered within the square rectangle guider (Square Base). Make sure that the Square Base layer is positioned around it so that your icon is centered within. You must first select the rectangle in the square base in the Layers panel like this:

    

    And then nudge it around using the arrow keys on your keyboard until the square is surrounding your icon and you are sure your icon result will be centered correctly within.

13. Make sure that the rectangle within the Square Base layer now has its opacity = 0% (Step 10).
14. The final layers look like this:
    
    
15. This is what the design looks like centered within the bounding rectangle (Square Base):

    

    NOTE: make sure that if you add effects like a glow which makes your design overflow out of the bounding rectangle you either need to make the rectangle larger or select all of the layers of your design and reduce its size to fit within. The example below is where the icon is too big which would prevent the PNGs from being square. Avoid this problem.
    
    

16. Now that the artwork is finally done its time to generate PNGs for the various targets. To do this you will use a feature of Expression Design called slices. Slices let you export a part of your artwork instead of the whole piece. For example you can create multiple slices that display the same parts of your artwork, but configure different export properties on each slice to export the artwork in multiple file formats (.PNG, XAML, and so on).
17. Start off by selecting your design by dragging a selection rectangle around your artwork, it would look something like this:

    

    When you let go of the mouse all of the artwork in that selection area is selected:

    

18. Time to create your first slice. While the design is selected, use the menu item Object/Create Slice from Selection or use the keyboard shortcut Ctrl+Shift+K. You should now see:

    

    Notice how you have a semi-opaque layer on top of your artwork, that’s the slice.

19. Look at the left of the screen at the Layers panel and you will see a new layer on top called Slice Layer and your very first slice which should be called Slice 1.png.
    
    
20. Double-click on that slice name and change its name to Marketplace_Desktop_200x200.png
21. Once you rename the slice, make sure that slice is selected (click on it). You now can see the properties for that slice above it. You have property sections where you can set width and height. Set the Width and Height to 200 px:

    

    Now that slice will be used to generate a .PNG for the artwork at 200 x 200 which is used for one the Marketplace Desktop icons.

22. Now it’s time to repeat this for the rest of the target Windows Phone PNG Icons.
23. Before you create each new slice you will need to temporarily hide the slice layer so that you don’t end up creating a new slice that includes your previous slices. Click on the eyeball icon on the Slice Layer so you go from this:
    
    

    To this:

    

24. Now you need to just select your artwork again and repeat the steps (Step 17 – 23) for the rest of the slices. Use these values:
    

    Slice Name	Dimensions
    Marketplace_Device_173x173.png	173 x 173
    Marketplace_Device_99x99.png	99 x 99
    Application_TileImage_173x173.png	173 x 173
    Application_IconImage_62x62.png	62 x 62

    NOTE: Each time you add a slice the slice layer will become visible again but following the steps above you will take care of everything for you.

    Eventually you end up with all of these slices, each one of them will be responsible for generating a different sized PNG.
    
    

25. The last step is to export the slices to create the PNGs to use as your icons. To do this go to File/Export (Ctrl-E):
    
    
26. In the Export window below a preview is shown of all PNGs that will be exported from the slices. Use the Location textbox and/or the Browse button to select a target directory for the PNGs. I usually place them in a subdirectory one deeper than where the project is saved.

    

    Leave the default settings on this page and make sure the Items to Export option is set to Slices.

27. Click the Export All button. The result is all of the icon PNGs at the target dimensions: 
    
    

So that’s the whole thing. One master design and multiple PNG sizes all ready to get your application set for device and Marketplace publishing.

Using the icons in your application

Here are a few tips about using your new applications in your project. Due to a limitation, icons need to be in the root of your project so highlight your project name in Blend 4 or Visual Studio 2010 and add an Existing Item:

Once the icons are added, select the icons in the project explorer list. You can select more than one at a time:

In the properties window change the Build Action to Content and the Copy to Output Directory setting to Copy if newer:

And finally right click on your project name and go to properties and use the dropdown listboxes to pick your icons. The Icon section refers to the smaller application icon (62 x 62) and the Background image section refers to the icon you would use for the tile for your application shown if pinned to the Start page (173 x 173):

Application Icon Issue

Due to a bug when icons are displayed in the program list and on the Start page (Tile), the tile icons displays properly showing the background theme color but on the program list the theme color is not shown and a grey background is shown instead:

This doesn’t apply if you don’t have a transparent background for your icon.

For example:

Have fun!

 Rick