Templarian - Design, Develop, and Deploy

Tutorial: Creating an Icon

This is going to be a very visual tutorial on creating an icon for Windows Phone and assumes you have never opened <a href="http://www.microsoft.com/expression/">Expression Design</a>. This same process described below has been used to create all icons in the <a href="/project_windows_phone_icons/">Modern UI Icons</a> pack. *UPDATE:* Please read the <a href="/2013/01/02/windows_phone_8_application_bar_icons/">update</a> for Windows Phone 8 icon sizes before continuing. Open Expression Design. From the main menu select File > New. !<a href="/files/tutorial_icon_file_new.png">File New</a> On the new document dialog type `48` for the width and height. Double check that `pixel` is set for the units and `96 px/inch` is set for the resolution. !<a href="/files/tutorial_icon_new_document.png">New Document</a> Before getting into the drawing tools look at the bottom right layer panel. Rename the default `Layer 1` to `Original` by double clicking it. Click the new layer button and rename the newly created layer to `Icon`. !<a href="/files/tutorial_icon_layer_panel.png">Layer Tab</a> Pausing from the editor for a minute it is important to understand you cannot use the full 48 x 48 area. Look over the image below and notice icons usually will sit within the 24 x 24 region in the center. Use best judgement when going outside of this area and always compare your icon along side others. !<a href="/files/tutorial_icon_pixel_area.png">Pixel Area</a> While some may want to construct their icons from scratch it may be easier to start with an original to manually outline. A good resource online is <a href="http://thenounproject.com/">The Noun Project</a>, offering the ability to search and view by genre. The icon below was chosen for this tutorial as it requires a few useful techniques for manipulating paths. !<a href="/files/tutorial_icon_pick_an_image.png">Picking an Image</a> Next you will want to print screen the image and crop just the icon and copy and paste it into Expression Blend while the `Original` layer is selected. !<a href="/files/tutorial_icon_sample.png">Sample</a> To make things quicker drag the image above directly into expression design making sure the `Original` layer is selected. Resizing will be discussed later in the tutorial. Before continuing there are a few settings that will need to be changed to make the process of placing paths simplier. To start go to the main menu and select Edit > Options > Units and Grids. !<a href="/files/tutorial_icon_edit_options_units_and_grids.png">Settings</a> On the Units and Grids screen make sure it matches what is shown below. When done click OK to save the settings. !<a href="/files/tutorial_icon_units_and_grids.png">Units and Grids</a> From the menu select View, and check all the "Snap to" options. !<a href="/files/tutorial_icon_view.png">View</a> Before resizing the image you dragged in earlier it would be helpful to have a visual way to see how the icon needs to be resized. To do this select the rectangle tool and draw a square of any size. !<a href="/files/tutorial_icon_size.png">Rectangle</a> With the arrow tool select the rectangle and set the `x`, `y`, `width`, and `height` to `24`. !<a href="/files/tutorial_icon_resize.png">Rectangle Resized</a> Notice the icon to the left of the `x` value. Here is where the anchor is controlled. The default anchor is set to the center of an object. Keep this in mind when placing paths on exact pixels. Double check that the aspect ratio is locked. Select the image in the `Original` layer. Click and hold down on the width input and drag up or down to resize the image. !<a href="/files/tutorial_icon_width.png">Width Slider</a> Move the icon around until it fits nicely inside the 24 square region as shown below. !<a href="/files/tutorial_icon_resized_original.png">Resized Original</a> Select the square and remove it from the `Icon` layer. Then select the image you will be outlining and set the opacity to `50%`. This will make it easier while outlining. !<a href="/files/tutorial_icon_opacity.png">Opacity</a> No more changes are needed to the `Original` layer so be sure to lock it. The Layers tab should look like below. !<a href="/files/tutorial_icon_layer_init.png">Layers Setup</a> The goal is to outline the object with the fewest points possible to complete the desired look. This could be 20 or 150 point, once again use best judgement. *Note:* Always make sure the stroke color is set to transparent. This is done to ensure icons smoothly resize. Select the rectangle drawing tool and set the radius to `2`. !<a href="/files/tutorial_icon_rectangle_radius.png">Rectangle Radius</a> Draw a rectangle around the outline of the black square. Draw a square around 18 x 18. This last square will need to be rotated `45` degrees. Using different colors may help with more complicated paths. !<a href="/files/tutorial_icon_rotate.png">Rotate</a> You can select multiple objects by holding down the _shift_ key. Select both rectangles and select Object > Pathing Operations > Unite. !<a href="/files/tutorial_icon_unite.png">Unite</a> This object may not look quite right. The image below shows a few points that probably need to be removed. Very commonly it will be quicker to unite two shapes and remove the points rather than placing every point by hand. This also gives more accurate curves. !<a href="/files/tutorial_icon_delete_points.png">Delete Points</a> This object is not suppose to be solid, so a quick way to remove the center is to copy the orginal and resize it. The trick is to use the height property with the aspect ratio locked. Set the height of the copied object to `14`. !<a href="/files/tutorial_icon_inner_size.png">Inner Copy Height</a> The object resized represents the area that will be removed from the other object. Select both objects and from the main menu click Object > Path Operations > Back Minus Front. !<a href="/files/tutorial_icon_back_minus_front.png">Back Minus Front</a> While creating icons it is important to zoom out to `100%` every so often. Hide the original layer by clicking the eye. The right side of the icon looks a little too thick, so the paths will need to be modified. First go to the main menu and check View > Pixel Preview. Then zoom in on the icon. The canvas will now show clear anti-alias even while zoomed in. !<a href="/files/tutorial_icon_view_pixel_preview.png">Pixel Preview</a> Hold down `shift` while clicking points to select multiple. To adjust the anchors select the 4 points shown below with the white arrow and nudging them to the right with the arrow key. Remember the nudge is set to `.25` of a pixel. !<a href="/files/tutorial_icon_select_anchors.png">Select Anchors</a> The last part is getting x in the center. Select the rectangle tool set the corner radius to `0` and place two criss-crossing 2x12 rectangles. As shown previously select both rectangles and unite them. While still selected rotate 45 degrees. !<a href="/files/tutorial_icon_criss_cross.png">Criss-Cross and Rotate</a> The last step is to select the two objects left and unite them so there is only one object in the `Icon` layer. That is the overview of the tools needed for making an icon. Follow the export steps below to get a PNG for use in your applications. You can also copy and paste the vectored versions directly into Expression Blend. This is ideal when icons need to be resized inside of the application. You will not always want to use your icons in vector format. For instance the appbar wants a PNG icon, so exporting will be needed for almost every icon created. Select from the menu File > Export (or Ctrl+E). !<a href="/files/tutorial_icon_export.png">Export Dialog</a> Set `File name`, `Location`, and double check the other settings above are the same. Hopefully this tutorial worked as a simple overview of the various features. Along with the source icons available for download <a href="/project_windows_phone_icons/">here</a> you should have the basics to construct your own unique icons. If you want others to benefit from the icons and are fine putting them under the Creative Commons license please mention me on twitter and I would be happy to add them to the icon pack hosted on this blog. *Donations:* If you found this helpful can I suggest donating a beer with the link in the footer.