Expression Blend · Expression Design · Windows Phone 7 · WP7

Cutting out shapes using Microsoft Expression Design and making it an application icon for the Windows Phone

 

This weekend I had the opportunity/reason to use Microsoft Expression Design to create an icon.  Design is similar to Expression Blend but yet different.  I wanted to make a sail (like on a sail for a sail boat) that would be used as the application icon for Windows Phone application.  How do you do this using Design? Lets walk through the process.

Step 1

After creating a new project make an ellipse and give it a fill color. This will be our sail when we are done.

image

Step 2

Rotate the first ellipse –15 degrees. Next add another ellipse  (with a different fill color that overlaps the first ellipse as shown below).

image

 

Step 3

Add a rectangle across the bottom of the yellow ellipse as shown below. 

image

Step 4

The yellow now looks like a sail but we don’t want the blue in our icon. Select all objects (ellipses & rectangle).  You can select the objects pressing the “v” key or clicking the arrow on the upper left hand side then draw a rectangle around the objects.

image

Step 5

Let’s get rid of the blue objects which will leave us with a yellow sail.  We do that by going to Object->Path Operations->Back Minus Front.  The result is…

image

Step 6

Now that I have my sail I need to make it the correct size for an Windows Phone application icon (62x62pixels).   with your sale selected change the height (H) to 60 and the with will automatically adjust to scale.

Step 7

We need to select the slicing tool (looks like a knife on the left hand side) and draw a square around our sail.  Don’t worry if it’s not a perfect square you can adjust the square and location of the square.

image

You can adjust the size of you square by changing the H (height) & W (width) values.  If you’re like me and didn’t draw a prefect square then click icon that looks like a chain link between the H & W and then you can adjust the Height and Width independent of each other. Not center properly over the image no problem just use your arrow keys to move the slicing square into position.

Step 8

Time to save the new application icon File->Export.  You get this window where you need to assign where to save the file and name the file ApplicationIcon.png.  In order for the icon to show up as your application icon on the Windows Phone it must named ApplicationIcon and of file type PNG.

image

Step 9

Either in Expression Blend or Visual Studio 2010 delete the ApplicationIcon.png from the project.

Step 10

Add your ApplicationIcon.png to the project. Right click on the Project –> Add Existing Item navigate to where you saved your ApplicationIcon.png and select it.  Click Open. 

image

Step 11

Run your project and your icon will show up as the application icon.  If step 10 doesn’t work then here’s what you can do.

  • right click on the ApplicationIcon.png
  • select Edit Externally
  • Paste in your icon
  • Save the file

Note: You will have to restart the emulator to get this change to show up

2 thoughts on “Cutting out shapes using Microsoft Expression Design and making it an application icon for the Windows Phone

  1. “Cutting out shapes using Microsoft Expression Design and making it
    an application icon for the Windows Phone | The Jeanious” honestly makes
    myself contemplate a small amount further. I really admired each and every single component
    of this blog post. Thank you ,Alicia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s