Setup Expression Design
While 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
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
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.
Create a New Document
To create a new document select
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
96. Next populate the width and height fields with
76 for each; the standard application bar size.
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 consistent 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.
Creating a Rectangle
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
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.
Reference Image (optional)
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
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.
Export to Image
Now that we have a complete icon, lets export it. Either select
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.