This is going to be a very visual tutorial on creating an icon for Windows Phone and assumes you have never opened Expression Design.
The only prerequisite is Expression Design which is provided free by Microsoft.
Download Expression DesignYou may also want to download the Application Bar icon template.
Download the TemplateWhile Expression Design is ready out of the box, there are a few settings you will want to configure to make your design process quicker. The options we will be changing can be accessed under Edit » Options » Units and Grids.
The property we need to set first is the nudge increment to 0.25. This will allow us to use the arrow keys in the future to move the points to more percise positions. Click OK to close this window.
The next step is to ensure that points will snap to pixels while dragged around. Go to View » Snap to Pixels and ensure it is checked. The Pixel Preview toggle is also located on the View menu and will allow you to view a raster of your icon.
To create a new document select File » New from the top menu. On the dialog we have a few fields that need to be populated. The first being the image name. Since this tutorial focuses on the application bar we will prefix the name with appbar. and enter the standard resolution in px/inch of 96. Next populate the width and height fields with 76 for each; the standard application bar size.
Pausing from the editor for a moment, it is important to understand you cannot use the full 76x76 region. The majority of your icon should always fall inside of the 38x38 region.
Thinking of that perfect can sometimes be tricky. Keep in mind an icon's goal is to depict an object or an action. Objects can usually represent their physical look, but actions on the other hand have a goal associated.
If the story reads, "The user will click a button to edit the document", we can then break the goal into an object and an action. In this instance the object is a document with an action of edit.
Always try to be by looking at MS branded applications to see what they use. In this case a pencil best represents edit.
There are a few resources that you can use to find ideas while creating icons. Often performing an image search will give icons or images that express a various action that you can then turn into an icon with the rest of this tutorial.
With the layers panel you can organize the various paths you create. The template contains the layers on the right; if you are not using the template you will want to add these. Double clicking the layer will allow you to rename it.
Now that everything is setup, we will go step by step through creating a moderately complicated icon. Each step will focus on the various tools and features Expression Design offers.
To access the rectangle drawing tool, if it isn't already set, hold down on the shapes menu item on the left and move your mouse right. With the Reference layer selected click and hold on the canvas and move the mouse down and to the right. Release the mouse and you now have a rectangle.
With the rectangle still selected change the color to red with a 30% opacity.
This rectangle is going to be used as a guide to ensure everything is drawn inside of the 38x38 region described earlier. The anchor for resizing is set to the center by default, so setting all values to 38 will give us a nice guide for the usable area. Lock this path when you are done.
Often when making an icon, you will want to trace the outline of an image. This image will be placed and resized in the reference layer.
The reference image needs to be behind the red square. This can be done two ways, by either dragging the item in the layer panel below the red square item or through the menu with Arrange » Order » Send to Back. The next goal is to resize the reference image so that the majority of the icon is inside of the red square. We do not want to accidently move the image, so lock the reference layer.
With the icon layer selected we will begin by tracing the object. Click the rectangle tool and set the pixel radius to 5. Draw a 31x28 square. You can then drag or use the arrow keys to move the square into place.
Our goal is to fill in the remaining area of the icon. Start by drawing a 28x28 square. With the path still selected enter 45° into the rotation textbox.
To match the height of the box in the background hold down your left mouse in the height textbox and slowly move it in a downward motion. This will change the textbox value 1 unit at a time. Stop once the height appears to be equal to the background square (at 22).
Next lets translate the square to the left along the x axis. Similarly you can hold the left mouse button in the X textbox and move the mouse left or down.
With the two layers selected on the top menu click Object » Path Operations » Unite.
Now the X did look pretty nice, but lets zoom out to 100% and notice there is some fuzziness. This is where the 0.25 nudge comes in handy. We are going to tweak the anti-alias a little by moving all the points 0.25 toward the center.
Now that we have a complete icon, lets export it. Either select File » Export... or press CTRL+E. Select a location for the file to be exported to and make sure your export settings look like the right image.
If you are exporting for the application bar in Windows Phone you will want to fill all paths with white before exporting.
You can also export to SVG for the web or XAML for Windows development.
Hopefully this tutorial helped you grasp the basics of Expression Design, and inspired you to make some custom iconography for your future applications.
If you have any questions please leave a comment below or contact me through twitter at @templarian
Have you created some custom icons and want to share them? Simply attach the .design file to a new issue.
