Créer une police couleur Apple (sbix)

Tutoriel
by Rainer Erich Scheichelbauer

30 octobre 2014

Vous êtes-vous déjà demandé comment fonctionnent ces émojis sur le Mac et le iPhone? Fait intéressant, ils ne sont rien d’autre que des images bitmap en couleurs, intégrées dans la police. Lisez ce qui suit pour savoir comment faire les vôtres avec Glyphs.

Dans les polices de couleur de style Apple, les images bitmap sont intégrées dans ce qu’on appelle une table sbix, dans le fichier de la police. Plusieurs images de différentes tailles peuvent être assignées à chaque glyphe. Ainsi, l’appareil qui l’affichera choisira la résolution la plus appropriée.

Préparer des variations de taille

Habituellement, les polices de couleur de style Apple utilisent le format PNG (“Portable Network Graphic”). JPEG et TIFF fonctionnent aussi très bien. Les spécifications permettent même les PDFs, mais ils ne sont pas (encore) supportés par iOS ou OS X. Peu importe le format que vous choisirez, vous devrez préparer ces images en dehors de Glyphs.

Disons que je veuille prendre l’icône Glyphs et l’insérer dans le G d’une police. C’est une bonne idée de préparer les fichiers de l’image à différentes résolutions dans un logiciel éditeur d’images comme Pixelmator ou Preview. Si vous avez déjà les images, tout ce qu’il vous reste à faire est de produire les variations de taille. Notez qu’une simple réduction d’échelle peut être faite avec un processus Automator; il peut être ouvert à partir du menu contextuel du Finder, lorsqu’il a été installé comme un service OS X.

Conseil: créez au moins une variation de moins de 100 pixels, car cela peut augmenter de façon significative la performance de l’affichage à basse résolution, en particulier sur de vieux appareils.

Dans tous les cas, nous recommandons fortement de conserver vos images dans un sous-dossier à côté des fichiers .glyphs, pour la bonne raison que Glyphs n’emmagasine que les tracés relatifs dans le fichier, et non pas le code binaire en tant que tel.

Bien entendu, chaque fois que vous déplacez votre fichier .glyphs, déplacez aussi le sous-fichier avec ce dernier. Autrement, vous risqueriez que Glyphs se plaigne de fichiers d’images manquants. Si cela vous arrivait, vous pourriez trouver le script Set New Path for Images utile. Vous allez le trouver dans le dossier Images dans mon répertoire Glyphs-Scripts sur GitHub.

Régler la chasse

Démarrons maintenant Glyphs et créons une nouvelle police. Je commence en ouvrant le G et je modifie sa chasse. Le calque master ne sert qu’à déterminer les mesures du glyphe, et restera vide.

La chasse doit refléter le ratio de l’image en relation aux unités par cadratin (UPC ou UPM en anglais). Vous pouvez vérifier votre valeur d’UPC dans Fichier > Informations de police > Police.

Dans cet exemple, j’ai réglé la chasse à 1000, puisque mon icône est carrée et que mon UPC est 1000, la valeur recommandée pour les polices CFF OpenType et la valeur par défaut dans Glyphs. Si la largeur de votre dessin est seulement de la moitié de sa hauteur, réglez la chasse à la moitié de l’UPC, soit 500. S’il est deux fois plus large, réglez-la à 2000. Vous comprenez le principe.

Créer des sous-calques

Maintenant, avec le G encore ouvert, ouvrez la Palette (Fenêtre > Palette, Cmd-Opt-P), et allez à la section Calques. Sélectionnez votre master Regular, et créez des sous-calques en cliquant sur le bouton Copier autant de fois que nécessaire. Il vous faut autant de calques que de fichiers PNG.

Renommez les calques iColor, suivi d’une espace et d’un nombre indiquant la résolution de l’image. Par exemple, iColor 512, iColor 256, iColor 128 et iColor 96.

Le reste est facile. Faites tout simplement glisser les fichiers PNG du Finder vers chacun des calques iColor respectifs. Si tout a été fait correctement, vous devriez obtenir quelque chose comme ceci:

La chasse des sous-calques iColor, ainsi que toute manipulation d’image (changement d’échelle ou de position) seront ignorées. Ne vous souciez donc pas de réajuster les mesures du glyphe de vos PNGs.

Contrôler la chasse, l’échelle et la position

La chasse et la position verticale de l’image sont contrôlées par le calque master, c’est-à-dire le calque Regular dans les exemples ci-dessus.

La position de l’image est placée à l’origine des limites du calque master, et les valeurs pas défaut de l’origine du calque (coordonnées 0, 0). Donc, par exemple, si vous voulez déplacer l’image de 100 unités sous la ligne de pied, il vous suffit d’ajouter un minuscule tracé à y=−100, à peu près comme ceci:

Note importante: certaines implémentations (surtout celles dans Chrome) vont couper (!) l’image en fonction du conteneur de forme du calque master. C’est pourquoi vous aurez besoin de placer un tel tracé minuscule en haut à droit de votre image.

Cela peut être un tracé fermé de deux nœuds sans surface, afin qu’il soit invisible. Sa seule fonction est de créer un point d’origine pour l’image, et un tel minuscule tracé remplira ce rôle. Cela fonctionne également pour des problèmes semblables à l’horizontale; il vous suffit d’éloigner le tracé de x=0.

La chasse du glyphe est elle aussi héritée du calque master, et ne peut être contrôlée que par le réglage de la chasse du calque master.

L’échelle de l’image est contrôlée par le nombre écrit dans le nom du calque, après iColor. Techniquement, ce nombre correspond au nombre de pixels de l’image, qui correspond au cadratin, ou, en d’autres mots, au corps de la police.

Donc, si votre image est d’une hauteur de 500 pixels et placée sur un calque appelé iColor 500, mais vous paraît plus petite que ce que vous aimeriez, essayez d’utiliser un plus petit nombre dans le nom du calque, p. ex., iColor 450. De cette façon, le cadratin sera de 450 pixels (le corps de la police), et une image de 500 pixels sera un neuvième plus grande que le corps de la police.

Mesures verticales

Voici un conseil à propos de mesures verticales: afin de prévenir les coupures de vos images sbix sur les appareils Apple, assurez-vous que vos valeurs hhea incluent entièrement l’image. Habituellement, la seul valeur problématique à cet effet est le hheaAscender; assurez-vous qu’elle repose au-dessus du bord supérieur de vos images. Lisez davantage sur les mesures verticales.

Exporter

À partir de maintenant, lorsque vous allez à Fichier > Exporter, sélectionnez OTF, TTF ou n’importe quel format de fontes web comme format d’exportation. Glyphs créera une police qui contiendra la table sbix. Amusez-vous bien! Vous pouvez tester votre police, par exemple avec l’appli gratuite TextPreview:

Table SVG équivalente

Vous pouvez augmenter la portée (et le support de) votre police bitmap en ajoutant un paramètre SBIX to SVG dans Fichier > Informations de police > Instances. Utilisez votre taille en pixels préférée comme valeur:

Les calques iColor correspondants seront ensuite dupliqués dans une table SVG. (Lisez davantage sur les polices SVG.) En d’autres mots, les mêmes images bitmap seront dans deux tables OpenType; SVG et sbix. De plus, vous pouvez contrôler l’exportation (ou non) des tables sbix et SVG avec Export SVG Table et Export sbix Table. De cette façon, vous pouvez produire une police exclusivement sbix, ou SVG, ou encore une police hybride sbix/SVG.

Photoshop et sbix

Les plus récentes versions de Photoshop CC peuvent également afficher les polices couleur de style Apple. Cependant, afin que sbix fonctionne dans Photoshop, ces trois critères doivent être remplis:

  1. Les glyphes sbix doivent également contenir des tracés, ne serait-ce que deux minuscules tracés. Ils définissent le conteneur de forme de l’outil Recadrage dans Photoshop. Si aucun contour ne s’y trouve, tout sera supprimé, et votre image pixel aura disparu.
  2. La police doit être installée sur le système (p. ex., dans FontBook). Le fichier Adobe Fonts ne fonctionnera pas. Nous recommandons d’utiliser des noms différents chaque fois que vous exporterez afin d’éviter les problèmes de cache de police.
  3. À la suite de chaque installation de police, vous devez redémarrer Photoshop afin que les polices sbix soient reconnues.

Support sbix

Mise à part les appareils Apple, les polices sbix sont supportées et affichées dans Windows version 10 et les plus récentes, ainsi que les appareils Linux et Android. Les dernières versions Chrome supportent sbix sur toutes les plateformes (méfiez-vous cependant des problèmes de coupures, voir ci-haut), et Firefox les affiche également, mais seulement sur Android et Linux.


Mise à jour 2017-08-08: Ajout de la section ‘Photoshop et sbix’, sous-titres avec capitales.
Mise à jour 2018-04-14: Ajout de la section Support sbix, merci Behdad! Mise à jour du titre du tutoriel.
Mise à jour 2018-11-18: Ajout d’une note à propos des mesures verticales.
Mise à jour 2018-11-19: Ajout de la section ‘Contrôler la chasse, l’échelle et la position’, suppression d’une phrase qui n’est plus pertinente à propos du support sbix.
Mise à jour 2018-11-29: Ajout d’une mise en garde à propos des coupures dans Chrome, mise à jour de l’image avec un petit tracé. Ajout des paramètres personnalisés.
Mise à jour 2018-11-30: Clarification de sbix à SVG. Correction d’une mauvaise capture d’écran.
Mise à jour 2019-01-28: Correction du titre ‘Support sbix’.

Traduction française de Nathalie Dumont.