Comme vous l’avez peut-être remarqué, vous pouvez personnaliser la barre d’application de votre appli Windows 8 et y insérer vos propres icônes spécialement designées. Super. Vous avez sans doute également remarqué que vous pouvez le faire de deux manières distinctes. Voyons comment cela fonctionne :

 

L’icone-police de caractère.

Le moyen le plus rapide pour créer votre propre jeu d’icônes consiste à utiliser une…police. Comme ceci, les glyphes restent en vectoriels, notamment parce que la police que vous allez utiliser est de type True Type. Et Microsoft permet aux développeurs d’utiliser la police système nommée Segoe UI symbol qui contient tout un ensemble de glyphes appropriés pour donner à votre application les icones qu’elle mérite. Tout ce que vous avez à faire, à ce niveau, c’est d’appeler le code correspondant au glyphe que vous souhaitez faire apparaitre.

 

CharaterMap_thumb[1]

 

Les icones designées à la main

Mais si vous souhaitez créer des icones singulière, comment faites-vous?  Vous les créez dans votre éditeur de pixels favori, puis vous les importez dans votre projet et vous vous rendez compte que cela ne fonctionne pas et que vous obtenez un rendu plus que bizarre. Je suis passé par là et voilà comment j’ai résolu le problème :

Créez un nouveau document dans Photoshop ou dans Paint.Net avec un fond transparent. la taille de ce doc sera de 160pixels de haut par 80 pixels de large. Divisez cet espace en deux lignes de 40 pixels de haut et en quatre colonnes de 40 pixels de large. Vous obtenez donc 8 carrés de 40 pixels de large. N’hésitez pas �� encore diviser cette grille pour placer vos éléments avec plus de précision.

La ligne de 40 pixels du haut concernera le thème sombre (avec des icones claires), tandis que la ligne basse regroupera les icones du thème clair (avec des icones noires).

Avant de vous lancer, juste une règle rapide: Ne dessinez pas les cercles d’entourage de vos icones. Ceux-ci seront rendus par le système.

Chaque ligne contient donc 4 colonnes, chacune représentant un état différent. La première colonne est dévolue à l’icône par défaut ou “repos”,”Rest” (le blanc en haut, le noir en bas). La seconde colonne regroupe l’état Survol (hover). Donc, si votre appli ne gère pas cet état (Multi-touch pur, par exemple), vous pouvez simplement dupliquer la première colonne dans la seconde. La troisième colonne est réservée à l’état “Pressé” (Pressed) ou “Actif”. Vous pouvez copier la seconde colonne et la reproduire dans la troisième en l’inversant. Enfin, la quatrième colonne définie l’état “Désactivé” (Disable). Copiez ici une des icones noires, ajustez son niveau jusqu’à obtenir un gris moyen, et dupliquez ce glyphe dans la ligne en dessous.

Vous devriez obtenir une planche de ce genre (Attention! la planche dans cette article est dessinée sur un fond bleu-gris, seulement pour permettre de bien voir les glyphes blancs. Dans la réalité, le fond sera transparent).

 

BtnStop_thumb[1]

Tout ce qu’il vous reste à faire, c’est d’enregistrer ce fichier dans un fichier png, en 24 bits avec transparence et cela devrait donner un look ravageur (et fonctionnel) à votre application ! Amusez-vous bien !

 

Merci à David Catuhe pour les tests et les bananes.