littlebigtomatoes

Design.Create.Smile.

An Easy Way to Create Awesome Looking Windows Phone7 Icons Using Expression Design

| Comments

I am always having problems when it comes to creating icons for my Wp7 apps.I am a coder and not a designer, so drawing something nice looking is really really out of my comfort zone.

Previously I spent hours trying to draw symbols myself, but I never really liked the outcome. But lately, I found a quick and effective way to create nice looking icons for my Windows Phone 7 apps. Here it goes:

The Noun project

First, I go to the nounproject website to find some nice looking symbols. This website has hundreeds of symbols and you can download them for free in vector format. The graphics comes with a Creative Commons license, so you’re free to do whatever you want with them. Sounds pretty neat, if you ask me!

The Noun Project a website a source for symbols in SVG format

Once, you found the symbol you like, download and extract it. The symbol is in SVG format. I am using Expression Design for drawing my icons, but Design unfortunately does not support SVG yet. I need a tool that can convert SVG to something that I can import to Expression Design.

Symbol from thenounproject website.

Inkscape

With Inkscape I can do exactly this. Inkscape can import SVG and can export .PDF and .PDF can be imported to Expression Design.Inkscape is a very cool, free and open source drawing application. You can download it from here.

Download and install inkscape

Once Inkscape is installed then you can import the .SVG file and save it as .PDF file. After that I change the  .PDF extension to .AI and now I can import into Expression Design.

First, import your svg file to Inkscape for converting to AI format:

Import your symbol to Inkscape

Symbol imported

Then save the your symbol in PDF format. Make sure that PDF 1.4 is selected as PDF version:

Export your symbol in PDF format

Setting the correct PDF version to PDF 1.4

Expression Design

Before importing to Expression Design rename the exported .pdf to  .ai. This way Expression Design can export your artwork as an Adobe Illustrator file.

Import your artwork to Expression Design

Here in Expression Design I can re-use my icon design template to create all the different sizes of icons that are needed for my WP7 app and export them to .PNG format to embedd in your WP7 Application project.

Your artwork now imported to Expression Design

You can also change the shape as it is vector based to alter the shape!

Vector shapes in Expression Design

Bonus

If you would like to have this artwork in your silverlight, wpf or your windows phone app, you can also create a xaml file out of it in Expression Blend importing the .ai file and converting it to xaml.

Artwork imported to Expression Blend

Happy coding!