Avec l’arrivée massive du vectoriel dans les interfaces applicatives et la généralisation du principe web de responsivité, il est plus que temps de regarder quelles sont les solutions pour conserver nos assets graphiques en vectoriel (certains, du moins), de la conception jusqu’à leur utilisation. Une possibilité est de travailler dans un format vectoriel natif, comme le svg, aujourd’hui bien connu, ou de trouver des palliatifs pratiques, comme d’encapsuler les pictos et les icônes dans des polices de caractères.
Pourquoi et comment un police de caractères ?
L’avantage d’une police de caractères est bien sûr son aspect vectoriel natif. Je peux changer à la volée la taille de ma police (inline ou via un css, ou un changement d’attribut) sans perte de définition, je peux prévoir plusieurs layouts pour coller aux cas d’usage sans craindre des effets de bord. Je peux également changer la couleur d’une police facilement via le même biais, en gardant à l’esprit qu’un caractère ne peut avoir qu’une teinte.
Autre avantage, je peux constituer facilement une bibliothèque autonome reprenant un set complet de pictos correspondant à certains usages et les faire évoluer dans le temps. Il ne restera au développeur ou à l’intégrateur qu’à intégrer la police à l’application et à redéployer, ou mettre la nouvelle police en ligne pour un déploiement automatique (en cas de web font). Ceci dit, on oubliera tout de suite l’emploi d’icones multicolores, qui seront mieux traités en svg, ou en cascade de bitmaps (pour faire correspondre chaque bitmap à la résolution qui lui convient).
Finalement et même si je ne le recommande pas forcément, on peut appliquer des effets vectoriels à une police, comme la graisse, l’italique ou le souligné.
i love making pictos
Quels sont les outils dont j’ai besoin ?
Nous allons commencer par tracer des symboles en vectoriel avec la Rolls du genre, Adobe Illustrator (http://www.adobe.com/fr/products/illustrator.html), puis nous convertiront ses pictos en glyphes via FontForge, qui présente le gros avantage d’être gratuit (http://fontforge.github.io/en-US/), pour enfin créer rapidement un projet dans Blend pour Visual Studio (https://www.visualstudio.com/fr-fr/visual-studio-homepage-vs.aspx) afin de voir comment une fonte s’intègre dans une application moderne universelle.
Tracer les pictos.
Pour ce chapitre, je ne m’étendrais pas sur la création du picto à proprement parler, mais plutôt sur la méthode, puisque ce chapitre nécessite une petite connaissance du logiciel d’Adobe. Notez que cet article fera l’objet d’un cours en vidéo sur la plateforme Microsoft Virtual Academy, pour plus d’infos sur la création .
Concernant la méthode, donc, il conviendra de procéder avec une grande rigueur, puisque FontForge est un peu tatillon en ce qui concerne les paths et les points du tracé. Ainsi, on évitera absolument tout les tracés superposés (ce qui arrive lorsque l’on fait des divisions dans le pathfinder, notamment) et de ne pas avoir de tracés ouverts (ce qui peut se comprendre pour de l’illustration, mais qui n’est pas une bonne pratique, de toute manière). On essaie dans la mesure du possible de nettoyer l’arborescence du fichier en faisant un tour dans l’éditeur de calques. Et pour en finir avec le ménage, on utilisera l’outil plume en suppression de points pour éliminer les points inutiles.
Au final, on obtiendra un tracé monochrome (de préférence noir), ne contenant aucun path en trop, et bien formaté. Pour la petite histoire, je crée personnellement un document A4, contenant une grille de 20 mm avec 1 de subdivision, ce qui me permet d’avoir des repères pour tout mes pictos, qui s’inscrivent dans les cases de ma grille. Je travaille essentiellement avec des tracés sans remplissage et avec épaisseur (3pts) que je converti ensuite en formes vectorielles (Object->Paths->Outline Stroke). Attention à bien supprimer le tracé initial après la conversion. Je copie ensuite chaque picto dans un nouveau fichier qui fait 20 x 20 mm, et j’enregistre celui-ci dans un fichier SVG 1.0
Créer une nouvelle police
Une fois les fichiers svg extraits, nous allons pouvoir les intégrer dans une police de caractères spécifique et pour ceci, nous allons ouvrir FontForge. Ce logiciel très complet va nous permettre en quelques étapes de mener à bien notre mission, sans trop entrer dans la complexité du métier de créateur de fontes. Toutefois, nous verrons que quelques erreurs sont à anticiper.
A l’ouverture, nous cliquons sur “Nouvelle fonte”, au centre, ce qui fait apparaître le tableau des caractères de cette police, vide par défaut. Nous allons sélectionner un emplacement pour y intégrer notre premier glyphe fait sous Illustrator. Attention à ne pas commencer par un caractère inexistant, sous peine de ne pas pouvoir le saisir plus tard. Pour cet exemple, je commence à intégrer sur la case correspondant au caractère “!”. Je double-clique sur cette case, ce qui ouvre l’éditeur de ce caractère particulier. Dans le menu, je sélectionne l’option “importer” et je pointe vers un de mes fichiers .svg (attention au menu qui par défaut est positionné sur Image). Si le travail sous Illustrator a été proprement fait, le picto s’importe convenablement.
Toutefois, nous allons lancer un petit audit de ces tracés en utilisant la commande “rechercher des problèmes” du menu “Éléments”. Un nouveau panneau apparaît et nous cliquons sur le bouton “Sélectionner tout” (pour faire un tour exhaustif), puis OK. Souvent, un message d’erreur remonte sur les coordonnées du point. Je vous recommande alors de cliquer autant de fois que nécessaire sur le bouton “corriger”. Après correction, on peux fermer ce glyphe pour revenir au tableau général.
On répètera ces premières opérations pour tout les pictos dont vous souhaitez l’intégration dans cette police. Une fois tout les pictos intégrés, on se rend dans le menu “Fichier”, “Générer Fonte”. Sélectionnez le type TrueType et cliquez sur “Générer”.
A priori, vous devriez avoir un ultime message d’erreur, indiquant un problème avec le cadratin. En effet, le TrueType ne supporte que les cadratins ayant un format multiple de 16. Pour résoudre ceci, nous allons retourner dans “Elément”, puis dans “Info fonte”, puis dans l’onglet “Général”. Vous pouvez voir que la valeur Cadratin est positionnée par défaut sur 1000. On la passera donc sur 1024. Tant que nous y sommes, nous allons donner un vrai nom à notre police. Rendez vous dans l’onglet Nom PostScript et nommez votre police.
On peut maintenant générer la police de caractères, en tâchant de lui donner le même nom de fichier que le nom Postscript..
Intégration de la police
Pour clore cet article, nous allons maintenant intégrer cette police dans un projet. Je vous recommande toutefois de commencer par installer cette police sur votre machine (clic droit sur le fichier .ttf généré par FontForge->Installer), voire de la visualiser avec l’outil”" “Table de caractères”.
Lançons ensuite Blend pour Visual Studio et choisissons de créer un nouveau projet, en Visual C#, pour Windows, de type Universal App. Une fois le projet ouvert, nous allons encapsuler cette nouvelle police au sein du projet en allant dans le panneau Explorateur de solution, en mettant en surbrillance le dossier Assets, en faisant un clic droit dessus –>Ajouter –> Elément existant et en pointant vers le répertoire où est stockée votre police de caractère, ou vers le répertoire fontes de Windows, si vous l’avez déjà installé.
Créez ensuite dans le viewport design un bouton, que vous éditerez dans ses propriétés, au niveau de la valeur Content : Supprimez le label “Button” et remplacez-le par vos glyphes (! si vous avez suivi à la lettre ce tutorat). Puis descendez dans le panneau jusqu’au paragraphe “Texte” et changez la police par défaut (Segoe) par la vôtre, puis adaptez votre taille de police et éventuellement la couleur de votre caractère (Foreground). Vous voilà dorénavant pourvu d’un bouton personnalisé avec votre picto.
Conclusion
Avec un processus assez simple et pas trop rébarbatif, on peut tirer un net avantage de la conversion des pictos en vectoriel vers une police de caractères : un format unique et compact, de la souplesse dans la gestion, la prise en charge en natif du vectoriel, la simplicité d’usage. De plus, le logiciel FontForge est gratuit et assez simple d’emploi. Donc, un seul conseil, passez vos pictos en police !