As you may have noticed before, you can tweak the application bar of your Windows 8 application and put your “specially designed” icons inside that section of the layout. Fine. You may also have noticed that you have two ways to achieve that goal. Let’s see how it works :

 

The font icon

The fastest way to create your own set of icons is to use …a font. That is quick and efficient. And the icons stays in vector mode, because the font you will be using is a typical TrueType Font. And Microsoft offers for all the developers a dedicated font to get the best icons your application deserves : Here comes the Segoe UI Symbol. All you have to do, so far is to call the right code that represents the fitting glyph.

 

CharaterMap

 

The designed icons

But what if you want, or need, to create your very special icons set? You probably have created them with your favorite pixel editor, then import the set in your project and get a very weird rendering…. Yes, I’ve been there too, and found the solution. In fact, you need to create a “sprite” board. I’ve done this like that:

Create a new photoshop or Paint.Net document with a transparent background. The size of the document shall be 160px x 80 px. Divide this space in four columns of 40 pixels width, and in two rows of 40 pixels height. If you need to, do not hesitate to refine that basic grid, for more accuracy. Basically, the upper row will be used for the dark theme (white icons), and the lower row will be occupied with the dark glyphs (Light Theme).

Prior to begin, just a quick rule : Do not draw the circle that surrounds the icon. it will be rendered apart by the system.

Each row has four columns, each one representing a particular state. In the first column, you will set the “by default” or “rest” icon (white up, black down). In the second column, you will draw the “hover” state of your icon (Well, duplicate the first column, if your application has no specific hover state). In the third column, set the “Pressed” (or active) state of the icon. Generally, you have to copy the first column, invert it, and place it carefully. Finally, the last column is reserved to the “Disabled” state. In consequence,, copy one of the black glyph,, adjust the brightness (or the white point) to a medium gray, then duplicate that glyph to the upper part of the fourth column.

You should have now a nice sprite board, with that kind of aspect (Note, this icon is drawned with a solid blue-grey background color only for you to see the white glyphs. The real background is set to transparent).

BtnStop

All you have to do now is to save that icon set into a nice 24 bits Png file (with transparency On) and it should looks nasty (and working) inside your application ! Have fun !