Créer une police pixel

Débuter une nouvelle police

Commencez par démarrer Glyphs (sans blague!) et sélectionnez Fichier > Nouveau (Cmd-N), afin de créer un nouveau document de police. Maintenant, avant de commencer à élaborer vos lettres, allez à Fichier > Informations de police (Cmd-I) et donnez un nom original à votre police; la nôtre sera ‘Pixelfont’, parce que nous sommes tellement ingénieux. Sélectionnez ensuite Autres réglages, où vous trouverez les options d’Espacement de la grille. Les valeurs d’Espacement de la grille définissent comment les coordonnées seront arrondies. La valeur par défaut est 1. Pour des polices pixel, comme nous voulons que tous les outils et les modifications s’alignent à la grille, vaut mieux choisir des valeurs plus grandes. Cela nous assure que les ‘pixels’ de votre police seront automatiquement placés dans une bonne position. Réglons donc notre Espacement de la grille à 50:

Pourquoi un espacement de la grille de 50? Pour faire bref, j’ai choisi 50 parce ce nombre divise 1000 confortablement, ce qui donne un rendu parfait des pixels à certains corps.

Truc de pro: voici comment calculer le corps de votre police pixel à l’écran. La taille de l’écran est mesurée en PPC, c’est-à-dire pixels par cadratin. Par défaut, les polices PostScript ont un UPC (unités par cadratin) de 1000 unités. Donc si notre cadratin est défini à 1000 unités, et que l’espacement de la grille est réglé à 50 sous-divisions, la grille contient 20 pixels par cadratin. (En divisant l’UPC de 1000 unités par l’espacement de la grille de 50, on obtient 20 unités ou pixels par cadratin). En d’autres mots, un pixel de la police équivaudra a exactement un pixel d’écran à 20 PPC. La résolution par défaut pour les Macs et les applis Adobe est de 72 pixels par pouces (ppp ou dpi). Donc, pour une résolution d’écran de 72 ppp, 20 PPC ÷ 72 ppp × 72 points dans un pouce =) 20 points. Dans Windows, on a fait le calcul avec 96 ppp, ce qui fait qu’on atteint 20 PPC à (20÷96×72=) 15 points.

Dessiner un pixel

Dans l’aperçu Police, cliquez sur le bouton en bas à gauche pour ajouter un nouveau glyphe. Double-cliquez sur le nom (nouveauGlyphe) et renommez-le pixel:

Double-cliquez sur la zone du glyphe pour ouvrir le glyphe dans un nouvel onglet Édition. Vous verrez une grille qui correspond à vos réglages de grille. Sélectionnez l’outil Rectangle (F) de la barre d’outils et dessinez un carré qui a précisément la hauteur et la largeur d’un carré de la grille. Vous remarquerez que le tracé s’aligne automatiquement sur la grille. Dessiner le carré au point d’origine, c.-à-d. là où la ligne de pied rencontre l’approche de gauche.

Faites un clic droit n’importe où sur le canevas pour ouvrir le menu contextuel. Décochez l’option Exporter. Nous ne voulons pas exporter notre pixel, puisque de toute façon il ne peut être tapé au clavier et que ça ne ferait qu’utiliser inutilement de l’espace de stockage dans la police finale.

En principe, ce sont tous les tracés dont nous avons besoin pour une police pixel. Yé!

Construire les glyphes

Pour commencer votre alphabet, choisissez un glyphe que vous aimez particulièrement. Toujours dans l’onglet Police, faites un double clic sur le glyphe pour l’ouvrir. Je vais commencer avec le f, parce que j’ai toujours qu’il ressemble à un mignon petit lapin. Allez à Glyphe > Ajouter une composante (Shift-Cmd-C), et du menu, sélectionnez la composante pixel que vous avez créée précédemment. Appuyez sur Sélectionner.

Sélectionnez la composante pixel et appuyez sur Cmd-C pour la copier. Maintenant, appuyez sur Cmd-V pour coller votre pixel, et déplacez-le à votre guise avec les clés flèches ou bien votre souris. Répétez cette étape jusqu’à ce que vous soyez satisfait de l’apparence de votre glyphe. Une autre façon de procéder est de faire glisser les composantes en appuyant sur la clé Option pour les dupliquer. Encore mieux, vous pouvez faire la même chose avec plusieurs composantes pixel à la fois, vous serez donc encore plus rapide. Vous pouvez aussi glisser votre souris pour sélectionner plusieurs composantes, mais n’oubliez pas d’appuyer sur la clé Option en même temps, car une simple sélection glissée ne fait que sélectionner les tracés.

Bon, voici notre f:

Je vous souhaite maintenant bien du plaisir à construire vos glyphes!

Éditer par lots

La chasse par défaut des glyphes est de 600 unités. Ce qui a une drôle d’allure:

Pour commencer avec l’espacement, vous pouvez vous assurer que tous vos glyphes auront les mêmes approches gauches et droites. Tout d’abord, dans l’onglet Police, sélectionnez tous les glyphes (Cmd-A). Les valeurs de vos approches doivent être des multiples de l’espacement de la grille; dans ce cas-ci, nous avons choisi 50 un peu plus tôt. Entrez les mesures que vous avez choisies dans le bas à gauche de la fenêtre.

Maintenant ce sera facile de faire des changements individuels. Si vous voulez en savoir plus sur l’espacement, lisez notre tutoriel L’espacement.

C’est maintenant beaucoup mieux, n’est-ce pas?

Variations de pixels

Bien entendu, vous pouvez vous amuser avec votre pixel! Il n’y aucune raison de vous limiter à une forme carrée:

Pour faire des variations de formes de pixels, vous pouvez soit changer la forme de votre pixel, soit ajouter un nouveau glyphe, nommé, par exemple, pixel.circle. Vous remarquerez que, en dessinant un cercle, il sera construit un peu comme ceci:

La Sous-division redivise l’espacement de la grille, c’est pourquoi l’alignement se fait sur la sous-division de la grille, et non pas directement sur la grille. Si vous réglez cette valeur à 25 par exemple, vos cercles ressembleront à ceci:

Note: à partir de la version 2.3 de Glyphs, les points hors courbe ne seront plus arrondis à la grille. Dans ce cas, une sous-division de 2 suffira.

Réglez la valeur de la Sous-division pour quelque chose qui a du sens pour le design de votre pixel. Pour un maximum de flexibilité, inscrivez la même valeur que pour votre Espacement de grille.

Donc, vous avez maintenant au moins deux, peut-être même plusieurs, variantes de pixels. Mais comment les utiliser? Allez à Informations de police (Cmd-I) et sélectionnez l’onglet Instances. Pour ajouter deux nouvelles instances, cliquez sur le petit bouton plus puis sélectionnez Ajouter une instance. Faites l’opération une deuxième fois. Par défaut, les instances se nommeront Regular, mais vous pouvez les renommer dans le champ Nom de style à droite. Nous nommons ceux-ci square et circle, afin de créer une instance avec des pixels carrés et une autre avec des pixels ronds. Maintenant, ajoutez un paramètre personnalisé dans une des instances afin de lui créer un pixel de rechange; cliquez sur le bouton plus à côté de Paramètres personnalisés. Dans le champ Propriété, écrivez Rename Glyphs, ou encore sélectionnez-le dans le menu déroulant accessible en cliquant sur la double flèche. Double-cliquez ensuite sur le champ Valeur, pour ouvrir une fenêtre dialogue. Inscrivez le glyphe que vous voulez remplacer, dans le cas présent, le glyphe pixel.circle remplacera le glyphe pixel, donc nous entrons au clavier:

pixel.circle=pixel

Lorsque vous créez de multiples instances, chacune avec des pixels différents, vous pouvez les utiliser comme une police à couches superposées. Dans l’exemple qui suit, trois instances se chevauchent: une première avec un pixel carré, une autre avec un pixel rond, et une troisième avec un pixel triangulaire:

Hinting

Si vous avez des pixels plus complexes, assurez-vous que le hinting est désactivé. Donc, au moment d’exporter votre police (Cmd-E), décochez l’option Hinting automatique. Pourquoi? Lisez tout ce que le hinting peut faire, et plus, dans notre tutoriel sur le hinting automatique PostScript.

Post-traitement avec des filtres

Si vous voulez expérimenter un peu avec votre police, vous pouvez essayer quelques-uns des filtres intégrés. Encore une fois, vérifiez la valeur de votre Sous-division de grille, car autrement certains filtres pourraient vous donner des résultats décevants. Par exemple, si vous appliquez le filtre Arrondir les coins à votre pixel carré, voici ce que vous obtiendrez:

Vous pouvez soit appliquer le filtre directement en appuyant sur le bouton OK, ou, ce que je recommande, l’ajouter comme paramètre personnalisé. Pour cette deuxième option, n’appuyez pas sur OK dans la fenêtre dialogue du filtre, mais cliquez plutôt sur la roue dentée dans le coin en bas à gauche et sélectionnez Copier le paramètre personnalisé. Ensuite, appuyez sur Annuler et ouvrez les Informations de police (Cmd-I). Maintenant, allez à l’onglet Instances, cliquez sur le petit bouton plus dans le coin en bas à gauche, et ajoutez une instance. Changez le nom de style (le mien s’appelle Rounded) et cliquez n’importe où dans le champ Paramètre personnalisé afin de l’activer. Maintenant, appuyez sur Cmd-V pour coller le paramètre que nous venons juste de coller depuis le dialogue du filtre. Tadam!

C’est une bonne idée de régler également l’espacement de la grille avec un paramètre personnalisé. Cliquez sur le bouton plus pour ajouter un nouveau paramètre. Dans le champ Propriété, inscrivez simplement Espacement de la grille après avoir double-cliqué sur le champ Propriété, ou sélectionnez-le du menu déroulant après avoir cliqué sur les doubles flèches. Ensuite, double-cliquez sur le champ Valeur et entrez 1 pour un espacement de la grille de 1.

Avec des paramètres personnalisés, vous pouvez appliquer des filtres sur différentes instances au moment de l’exportation. Ainsi vous garderez intact votre tracé original de pixels. En d’autres mots, vous pouvez construire la famille complète d’une police pixel sans altérer la fonte source.

Dans cet exemple, j’ai utilisé le filtre Abîmer. Le contour de pixel se fait couper en morceaux et les nœuds sont déplacés de façon aléatoire:

Encore une fois, copiez le code du paramètre personnalisé en cliquant sur la roue dentée et sélectionnez Copier le paramètre personnalisé. Allez à Informations de police (Cmd-I) et collez le code avec Cmd-V, ou ajoutez une nouvelle instance et collez-y le code.

Dans cet autre exemple, j’ai utilisé le filtre Épaissir le tracé sans l’option Créer un contour:

Même chose; cliquez sur la roue dentée et copiez le code du paramètre personnalisé. Allez à Informations de police (Cmd-I) et collez le code avec Cmd-V, ou ajoutez une nouvelle instance et collez-y le code.

Bien entendu, vous pouvez appliquer plusieurs filtres sur la même instance. Dans l’exemple qui suit, Arrondir les coins, Épaissir le tracé et Supprimer le chevauchement ont été appliqués:

Soyez attentif: l’ordre des filtres est très important. Glyphs les exécutera du premier au dernier. Dans le cas présent, Épaissir le tracé a été appliqué en premier pour étendre le contour de 3 unités, comme ça les pixels se chevauchent un petit peu. Ensuite Supprimer le chevauchement a enlevé les chevauchements (eh oui!), et pour continuer, Épaissir le tracé de -3 unités ramène le contour à sa dimension originale. Après cela, Arrondir les coins a adouci les contours. La valeur (+20) dans le premier paramètre d’Arrondir les coins s’est occupée des coins extérieurs, et la valeur négative (-20) du second Arrondir les coins a arrondi les coins intérieurs. Par contre, la valeur négative ne peut fonctionner qu’avec un paramètre personnalisé ajouté manuellement. Si vous copiez le paramètre personnalisé de la fenêtre dialogue, vous n’obtiendrez que la valeur positive.

Mais pourquoi en faire une telle histoire? Simple. En utilisant Arrondir les coins tout de suite sans appliquer des filtres successivement, nous aurions obtenu un résultat fort différent, et, à mon avis, bien moins intéressant:

Voyez le résultat avec, dans l’ordre, Épaissir le tracé de 3 unités, Supprimer le chevauchement de -3 unités (pour replacer les contours dans leur position initiale comme précédemment), et pour finir le tout en beauté, Abîmer:

Dans cet autre exemple, je voulais que ma police pixel ait seulement un contour. Pour obtenir ce résultat, j’ai utilisé encore une fois Épaissir le tracé de +3 unités, suivi de Supprimer le chevauchement de -3 unités. Jusqu’ici, rien de surprenant. Pour finir, le filtre Épaissir le tracé, en activant cette fois-ci l’option Créer un contour, a donné ce résultat:

Pas mal, n’est-ce pas? Amusez-vous donc à expérimenter avec les filtres, tout en gardant en tête que l’ordre est important!

Filtres tiers

Saviez-vous qu’en plus des filtres intégrés dans Glyphs, il en existe toute une panoplie créée par la communauté? Jetez un coup d’œil au gestionnaire d’extensions qui se trouve sous Fenêtre > Gestionnaire d’extensions. Vous remarquerez un outil de recherche fort pratique, qui vous aidera à trouver les filtres qu’il vous faut. En voici une sélection (les liens fournis sont pour votre référence, mais on ne sait jamais, ils pourraient être utiles si vous avez de la difficulté avec le gestionnaire d’extensions):

Le filtre Ombreur de mekkablue a été pensé pour transformer vos glyphes en versions ombrées. Voyez le résultat:

Un autre filtre bien amusant est le Couper et secouer de mekkablue. Il fait des coupures en travers des glyphes, pour ensuite déplacer et faire tourner aléatoirement les morceaux, selon les maximums spécifiés par l’utilisateur. Dans l’exemple suivant, les filtres Épaissir le tracé de 3 unités, Supprimer le chevauchement, Épaissir le tracé de -3 unités, et pour finir Couper et secouer ont été appliqués:

Scripts pour des polices pixel

Il existe quelques scripts pour Glyphs qui sont bien pratiques pour les polices pixel. Le répertoire GitHub de mekkablue contient un dossier dédié exclusivement aux polices pixel. Pour plus d’information et les instructions d’installation, consultez readme.

Par exemple, le script Pixelliser de mekkablue transforme les glyphes faits avec des contours en des glyphes à base de pixels en insérant des composantes pixel, tout en ajustant les approches et en conservant les contours en arrière-plan. Pas mal!

Mise à jour 2016-09-05: Ajout de la partie sur le Gestionnaire d’extensions.

Traduction française de Nathalie Dumont.