Skip to content

Generating new skin tones (WIP)

Constantin A edited this page Jul 15, 2021 · 2 revisions

As of now, we have five different skin tones aka Fitzpatrick modifiers. With the introduction of Unicode/Emoji 11, there will be two new hair colors as well - red and white hair.
So let's say you want to edit the Woman Technologist (👩‍💻) emoji, because sitting in front of a traditional computer seems outdated to you.
In order to do so, you'll also need to change the 5 different skin tones (and maybe even the two new hair colors as well) which means, you'll probably have to open your recently modified SVG file, copy and paste color hex codes for hair and skin (Please note that I'm not sure if there's some Inkscape plugin for this).
With these scripts all that can be done (almost) automatically.

How does it work?

If you open up an SVG file using a text editor, you'll notice that an SVG file is (almost) nothing but an XMl file.
So every color is represented as a color hex code (#FAC01B, etc.) which can be replaced as a regular text.
As it is a simple text replacement task, Regular Expressions are an easy way to handle this task.
To find out which colors need to be replaced by which ones, this script uses very simple JSON-structures as replacement schemes.
If you want more details on how those JSON files look like, I recommend just looking at the files in the skins-folder.
(I'll add a longer explanation later).
So all in all these are some Python scripts doing just some text replacement inside the SVG files.

How do I use these tools?

Generating those new skin tones is relatively easy.

  1. First of all you'll need either one SVG file (with the "base" style) or one folder containing all SVG files which need to be modified (they all need to share one "base" style/skin tone).
  2. The next step is to get the JSON files mentioned in the section above.
    Luckily these are already included so you can just use them right away (please note that due to some inconsistencies regarding the exact yellow basic skin tone, it might be possible that this color conversion does not work as intended. I recommend fixing the file itself first).
  3. As the files are ready, you can begin with converting the files.
    The script you'll need is called generate_skincolor.py (it's written in Python 3). The arguments you'll need are (Please don't include '<' and '>'):
    • either -i <svg_file> if you just want to generate skin tones for the one file svg_file or -d <svg_dir> if you want to generate skin tones for the svg_dir-directory.
    • -m <mod_dir>mod_dir is the directory containing those JSON files. It's probably just the skins-folder
    • -b <base> – if you use the files provided here, you won't need to add this as this is just the name (without the .json extension) of the file containing the base modifier you've used for your base SVG files. It has to be inside the mod_dir.
    • -e <y/n/auto> – you can choose if you want to add the FE0F symbol to the newly created emojis. This indicates Emoji representation of a character. There's an article explaining this in more detail.
      Anyhow you can choose to either enable it for all (y), disable it for all (n) or you can choose to let it be determined by the original file.
      The current default value for this is n, but it might be better changing this to auto.

What about the other files?

emoji.py, modifier.py, gradient.py contain classes used by generate_skincolor.py, blobify.py and remove_gradient.py.
I used blobify.py (which includes everything remove_gradient.py does as far as I remember) to batch convert the fallback Non-Blob-emojis to make them at least a little bit consistent with the Blob-styled emojis.
It removes the gradients (or simply replaces them by one color gradients) and exchanges their color by the typical Blob color (that's what the blob-directory is for). Unfortunately this doesn't work very well and I'm currently not planning to use this in the future, so there's no further explanation on this. Additionally they work in a very similar way to the generate_skincolor.py-script.