Modern UI Icons
... icons

Tutorial

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 Design

You may also want to download the Application Bar icon template.

Download the Template

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.

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.

New Document

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.

View Snap to Pixel

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.

New Document

Usable Area

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.

Usable Area

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.

Object vs Action

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.

Object and Action Option

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.

Resources

Working with Layers

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.

  • Icon – Paths related to the icon will be placed here.
  • Base – The circle around the icon is here for reference while creating the icon.
  • Reference – Images used for the purpose of tracing over will go here.
Layers

Step by Step

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.

Layers

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.

Rectangle Tool

With the rectangle still selected change the color to red with a 30% opacity.

Color Rectangle

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.

Resize Rectangle

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.

Reference ImageReference Text

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.

Reference Resize Image

Creating the Icon

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.

Rectangle with Radius 5

Rotate and Resize

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.

Rectangle Rotate and Resize

Unite Paths

Unite Paths delete anchor point

Unite Overlapping Objects

With the two layers selected on the top menu click Object » Path Operations » Unite.

Object Path Operations Unite

Back Minus Front

Back Minus Front

stuff

Oh Yea the X

Last but not least lets add the X that is nicely positioned inside of the outline.

Draw X

Anti-Alias

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.

Draw X

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.

Export Image

Conclusion

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

Contribute

Have you created some custom icons and want to share them? Simply attach the .design file to a new issue.

Submit Icons to the Pack
Created by Austin Andrews of Templarian.com.  Need consulting on design or icon work send me a message.
comments powered by Disqus