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 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.
Create a New Document
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.
Iconography Ideas
Thinking of that perfect metaphor 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 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.
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 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.
Rotate and Resize
Our goal is to fill in the remaining area of the icon. Start by drawing a 28
x28
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.
Export to Image
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.