Metro Studio – Your Modern UI Style Icons Paradise
Join the DZone community and get the full member experience.
Join For Free
if you ever needed to create those fancy
metro
modern ui
style icons for your windows phone 7 app, windows 8 app, for your blog
or some marketing newsletter, you will love this tool. you can get it
over at the official site:
syncfusion metro studio 2
.
first and foremost it is free. and it comes with a large set of icons
already bundled. you can change icon backgrounds, foreground and
background colors, icon size, padding to produce a perfect icon.
convert characters to icons
but this is not all: once you exhaust all icons that come with it,
you can create new icons from font character (or characters) by simply
going to the
characters
category, select your source font,
double click on all characters you want in your icon and you have
created a brand new icon. with some further color and size
manipulations, you can get whatever you want, provided you have the
desired font. example usage below:
you can get a lot of special characters from webdings and windings, but you can also go to dafont.com and find some free font with special characters. let your imagination go wild on this one.
importing icons from nounproject
since all underlying icons are either in xaml or svg format, if you get an icon in such format, you can import it and then manipulate it. one large repository of metro style icons is nounproject . find an icon you like and then download it. you will get a zip file containing svg file and that is what we will import. for example, i will use hamster wheel . if you open the svg file in any text editor, you will find the following xml (parts omitted for brevity):
<svg xmlns="http://www.w3.org/2000/svg" ... xml:space="preserve"> <g> <path d="m81.236, ... ,85.777z"/> </g> </svg>
now open windows explorer and navigate to c:\program files (x86)\syncfusion\metro studio\icons\ . create a new directory and name it custom . create a new file named custom.xaml inside it and open it in text editor. now copy the following xml snippet:
<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <path data="" stretch="fill" fill="#ffffffff" tag="hamster, wheel, nounproject" margin="0,0,0,0" x:key="hamster wheel" /> </resourcedictionary>
the attributes are pretty straightforward. now copy the value for the attribute named d from the svg file as value for the data attribute in the xaml file above. restart metro studio and voilà, you should get something like this:
i haven’t really explored in more detail the file format for metro studio but this will help you use most of the icons available on nounproject. enjoy creating great modern ui style icons. also check out other cool features on their page.
Opinions expressed by DZone contributors are their own.
Comments