Créer une police couleur Microsoft (CPAL/COLR)

  • by Rainer Erich Scheichelbauer
  • Tutorial

L’approche Microsoft pour les polices en couleurs emploie des tables OpenType additionnelles, CPAL et COLR. CPAL décrit une palette de couleurs, et COLR définit comment les couleurs de CPAL sont utilisées, et par quel glyphe. Techniquement, ce qui semble être de nombreuses couleurs dans un seul glyphe, sont en fait plusieurs glyphes empilés les uns par-dessus les autres, chacun apparaissant dans une couleur individuelle. Mais pas d’inquiétude, Glyphs s’occupe de toutes ces choses plus techniques.

Déterminer une palette de couleurs

Nous allons commencer avec une palette de trois couleurs. Dans Fichier > Informations de police > Masters, ajoutez un paramètre personnalisé nommé Color Palettes que vous pouvez sélectionner dans le menu déroulant en cliquant sur les doubles flèches ou encore taper après avoir double-cliqué sur le champ. Cliquez sur Nouvelle valeur, et appuyez sur le petit bouton plus en bas à gauche afin d’ajouter des couleurs jusqu’à ce qu’il y ait trois couleurs en tout dans la colonne Palette 0. Double-cliquez sur l’un des rectangles de couleur pour faire apparaitre le sélecteur de couleur OS X:

Vous pouvez choisir n’importe quelle couleur en n’importe quel mode de couleur, et même appliquer de la transparence. Au final, les couleurs seront stockées en RVBA (rouge, vert, bleu, alpha) dans le fichier de la police. Notez que les nombres 0, 1, et 2 ont été assignés aux trois couleurs que nous avons tout juste créées. Gardez cela à l’esprit pour plus tard.

Une fois terminé, confirmez la fenêtre dialogue en cliquant sur le bouton OK. Si tout fonctionne, la ligne du paramètre personnalisé indiquera le nombre de palettes et de couleurs:

Créer le glyphe fallback

Jusqu’ici, tout va bien. Mais un problème nous attend. Les polices multicolores de type Microsoft, comme celle que nous sommes sur le point de créer, ne sont pas encore universellement supportées. Donc, pour tous les logiciels qui ne s’y conforment pas encore, nous avons besoin d’un glyphe noir et blanc traditionnel qui s’affichera au besoin. Ça s’appelle un glyphe par défaut, dit fallback.

Il s’avère que le glyphe fallback est déjà en place: tout ce qui se trouve sur le calque master est considéré comme un fallback. Donc, par exemple, dans le master Regular du i en capitale, nous pouvons dessiner notre rectangle sans empattement entre la hauteur des capitales et la ligne de pied. Les petits symboles de losanges indiquent que les nœuds sont exactement sur la ligne des mesures:

Ajouter les calques de couleurs

Maintenant dans la palette Calques de la barre latérale (Cmd-Opt-P), créez un double du master Regular en cliquant sur le bouton Copier. Renommer le calque Color 0, avec un C en capitale et une espace avant le zéro. Vous remarquerez un indicateur de couleur apparaitre à droite, montrant la première couleur, soit la couleur numéro 0:

Vous pouvez ajouter les deux autres couleurs en dupliquant le calque de couleur que nous venons tout juste de créer. Cette fois-ci, nul besoin de changer le nom du calque. Cliquez plutôt sur le cercle de couleur, et choisissez n’importe quelle autre couleur de la palette créée précédemment:

Il ne reste plus qu’à dessiner nos calques. Je vais laisser le calque de Color 0 tel quel, et les calques Color 1 et Color 2 seront utilisés pour le côté et le dessous de notre i capitale en trois dimensions:

Vous remarquerez qu’un aperçu en couleur sera affiché dès qu’un calque de couleur est sélectionné (Color 0, Color 1 ou Color 2). Activez un calque master (Regular dans ce cas-ci), et vous verrez le glyphe fallback réapparaitre. Par contre, ce qui est sympa, en mode aperçu Police, Glyphs vous fait voir les glyphes colorés:

Différentes palettes pour les instances

Vous pouvez exporter des variantes de différentes couleurs de votre police multicolore. Pour faire cela, il faut créer d’autres palettes de couleur et ensuite les appliquer. Allez dans Fichier > Informations de police > Masters, puis double-cliquez sur le champ valeur pour ouvrir votre paramètre personnalisé Color Palettes créé plus tôt. Vous pouvez ajouter le nombre de palettes que vous voulez en cliquant sur la roue dentée, puis en sélectionnant Ajouter une palette. Modifiez les couleurs en double-cliquant sur les rectangles de couleur, comme précédemment:

Avez-vous remarqué les numéros dans le haut des colonnes? Par exemple, dans la capture d’écran ci-haut il y a la Palette 0 et la Palette 1. Ce sont des numéros d’index, et ils sont importants pour l’étape suivante. Confirmez maintenant la fenêtre dialogue Color Palettes en appuyant sur OK.

Maintenant allez à Fichier > Informations de police > Instances, et faites ce qui suit:

  1. Dupliquez l’instance de police couleur que vous avez déjà; sélectionnez-la dans la barre latérale, copiez et collez.
  2. Changez le Nom de style de l’instance pour quelque chose qui a du sens. Le nom doit être différent de celui que vous avez déjà.
  3. Dans le champ Paramètres personnalisés, ajoutez le paramètre Color Palette for CPAL que vous trouverez vers la fin de la liste du menu déroulant, en appuyant sur les doubles flèches. À droite, dans le champ Valeur, entrez le numéro d’index correspondant à la palette que vous voulez appliquer. Dans notre exemple, j’ai choisi la deuxième palette, qui a le numéro d’index 1:

Maintenant, exportez votre police à nouveau, et cette fois Glyphs exportera les deux variantes:

C’est pas mal cool.

Exporter votre police

Le format que vous choisirez, que ce soit CFF/OTF, TTF, WOFF, WOFF 2, ou EOT, n’a pas d’importance. Comme tous ces formats sont de type OpenType, Glyphs sera capable d’insérer les tables nécessaires pour l’affichage. Comme les tables CPAL et COLR sont une technologie relativement récente, la plupart des applis n’afficheront que la police fallback.

Cependant, très intéressant pour nous, certaines applis supportent déjà CPAL/COLR. Autre excellente nouvelle: toutes les versions courantes des principaux navigateurs supportent CPAL/COLR:

  • Internet Explorer (à partir de Windows 8.1)
  • Firefox (version 26 et plus récentes)
  • Microsoft Edge (à partir de la version 38 sur Windows 10)
  • Safari (depuis macOS 10.13 High Sierra)
  • Chrome (depuis la version 70)
  • Android WebView (version 71 et plus récentes)
  • Opera (depuis la mise à jour 58)

Deux inconvénients importants: Safari n’est pas de la partie dans les versions OS plus anciennes (jusqu’à macOS 10.12 Sierra), et au moment d’écrire cet article, l’aperçu de Chrome n’est pas au point pour le calque fallback. Pour régler ce problème, il faut vous assurer que votre calque fallback déborde des autres, autant à l’horizontale qu’à la verticale.

Bien, vous voudrez sans doute maintenant tester vos polices couleur comme polices web. Pour cela, le script mekkablue Test > Webfont Test HTML vous permettra d’obtenir une épreuve HTML rapide à côté de vos plus récentes exportations de fontes web.

Génial! Maintenant, vous pouvez faire toutes les autres lettres en un rien de temps…


POLICE UTILISÉE DANS LES EXEMPLES: URLOP, AVEC L’AIMABLE AUTORISATION DE MIKOŁAJ GRABOWSKI.
Mise à jour 2018-03-26: Ajout de la liste des navigateurs supportés, du paramètre Color Palette, et du lien au tutoriel SVG.
Mise à jour 2018-04-14: Mise à jour du titre du tutoriel.
Mise à jour 2018-11-06: Mise à jour du support des applis et navigateurs, amélioration de la section ‘Différentes palettes pour les instances’.

Traduction française de Nathalie Dumont.