« InkStitch - broder un emoji » : différence entre les versions
Ligne 105 : | Ligne 105 : | ||
[[Fichier:Emoji-larmes-de-rire.png|néant|cadre|Variantes d'images emoji de différents vendeurs (apple, google, facebook, windows, twitter, joy, samsung)]] | [[Fichier:Emoji-larmes-de-rire.png|néant|cadre|Variantes d'images emoji de différents vendeurs (apple, google, facebook, windows, twitter, joy, samsung)]] | ||
=== | === Identifier un emoji === | ||
Si vous voulez utiliser un emoji pour créer un artéfact, il faut (1) trouver le emoji adapté et (2) choisir une fonte parmi celles qui sont disponibles. | Si vous voulez utiliser un emoji pour créer un artéfact, il faut (1) trouver le emoji adapté et (2) choisir une fonte parmi celles qui sont disponibles. | ||
Ligne 112 : | Ligne 113 : | ||
## https://www.unicode.org/emoji/charts-13.1/emoji-list.html (version 13, nov 2020) | ## https://www.unicode.org/emoji/charts-13.1/emoji-list.html (version 13, nov 2020) | ||
## Chercher dans le navigateur un mot | ## Chercher dans le navigateur un mot | ||
## Cliquer sur le code à gauche, cela va afficher une page avec des variantes. Notez le code, par exemple | ## Cliquer sur le code à gauche, cela va afficher une page avec des variantes. Notez le code, par exemple <code>1F9DB</code> pour le vampire | ||
## Identifier l'image qui vous plaît le plus et essayez de trouver le graphisme SVG (c.f. ci-dessous). Certains, comme ceux de Apple, ne sont pas libres. | ## Identifier l'image qui vous plaît le plus et essayez de trouver le graphisme SVG (c.f. ci-dessous). Certains, comme ceux de Apple, ne sont pas libres.[[Fichier:Openmoji-org-vampire.png|vignette|Emoji "Vampire" chez OpenMoji.org, variante "peau jaune".]] | ||
# Une solution similaire, mais plus simple, est de consulter openMoji.org, un projet qui implémente un système complet (donc y compris ses graphismes) | |||
## [https://openmoji.org/ OpenMoji.org] | ## [https://openmoji.org/ OpenMoji.org] | ||
## Soit utilisez le moteur de recherche, soit naviguez dans la [https://openmoji.org/library/ bibliothèque] | ## Soit utilisez le moteur de recherche, soit naviguez dans la [https://openmoji.org/library/ bibliothèque] | ||
## Si l'image vous plaît, vous pouvez directement récupérer le SVG. Cliquez sur l'image. Notez que vous pouvez aussi sélectionner la couleur de peau ou des traits noirs en bas de page. Cliquer sur SVG vous offre le choix d'enregistrer le fichier ou de l'afficher dans le navigateur (pour l'enregistrer "sous" dans la suite). | ## Si l'image vous plaît, vous pouvez directement récupérer le SVG. Cliquez sur l'image. Notez que vous pouvez aussi sélectionner la couleur de peau ou des traits noirs en bas de page. Cliquer sur SVG vous offre le choix d'enregistrer le fichier ou de l'afficher dans le navigateur (pour l'enregistrer "sous" dans la suite). | ||
## Si l'image ne vous plaît, notez le code, par exemple | ## Si l'image ne vous plaît, notez le code, par exemple <code>1F9DB</code>pour le vampire. | ||
# Une alternative intéressante pour chercher un emoji plus les graphismes de plusieurs vendeurs est [https://emojipedia.org/ Emojipedia]. | # Une alternative intéressante pour chercher un emoji plus les graphismes de plusieurs vendeurs est [https://emojipedia.org/ Emojipedia]. | ||
## Vous pouvez soit chercher soit parcourir les catégories | ## Vous pouvez soit chercher soit parcourir les catégories | ||
## Une fois trouvé une page vous pouvez examiner les variantes, et copier/coller le caractère. | ## Une fois trouvé une page vous pouvez examiner les variantes, et copier/coller le caractère. | ||
## Ce site ne contient pas les graphismes SVG, donc il faut juste noter le code (après la liste des graphisme des vendeurs) | ## Ce site ne contient pas les graphismes SVG, donc il faut juste noter le code (après la liste des graphisme des vendeurs) | ||
Pour trouver l'image SVG d'un emoji il | |||
=== Télécharger le SVG d'un Emoji === | |||
Twitter et Google mettent à dispositions leurs icônes en open source. Soit vous récupérez leurs archives sur Github, soit vous utilisez un site tiers. | |||
Pour trouver l'image SVG d'un emoji il vaut mieux connaître son code (cf. juste ci-dessus), mais ce n'est pas une nécessité. | |||
Le site qui permet de chercher et de télécharger un SVG le plus facilement est [https://openmoji.org/ OpenMoji.org], mais certains graphiques ne vous plaisent pas forcément. | |||
En plus de OpenMoji, Twitter et Google mettent aussi à dispositions leurs icônes en open source. Soit vous récupérez leurs archives sur Github, soit vous utilisez un site tiers. | |||
'''Iconify.design''' | |||
[[image:iconify-design-screenshot-vampire.png|right|400px|thumb|Iconify.design Noto Emoji example (Vampire)]] | |||
[https://iconify.design/icon-sets/twemoji/ Iconify.design] met à disposition plusieurs jeux emoji. Il faut d'abord choisir une collection, ci-dessous on liste les plus importantes. Ensuite cherchez le graphisme que vous désirez. Notez que certaines collections ne sont pas complètes UniCode 13 (ou mieux). | |||
Collections Emoji de Iconfiy.design: | |||
* [https://iconify.design/icon-sets/twemoji/ Twemoji] (Twitter) | |||
* [https://iconify.design/icon-sets/noto/ Noto Emoji] (Google) | |||
* [https://iconify.design/icon-sets/openmoji/ OpenMoji] | |||
* [https://iconify.design/icon-sets/emojione/ Emoji One (Colored)] (jeu réduit) | |||
* [https://iconify.design/icon-sets/fxemoji/ FireFox Emoji] (jeu réduit) | |||
Une fois trouvé votre emoji, vous pouvez soit télécharger le code SVG (utile si vous savez utiliser l'éditeur SVG), soit le fichier SVG. | |||
== Liens == | == Liens == |
Version du 25 novembre 2020 à 20:29
Les emoji
Selon Wikipedia, «Émoji (絵文字, prononcé [emodʑi]), est un terme issu du japonais pour désigner les pictogrammes utilisés dans les messages électroniques et les pages web japonaises, qui se sont répandus dans le monde entier. Le mot emoji signifie littéralement « image » (e) + « lettre » (moji) ; la ressemblance avec « émotion » est un jeu de mot interculturel. Ces caractères sont utilisés de la même façon que les émoticônes ASCII, mais un plus grand nombre est défini. Les icônes sont standardisées et intégrées aux appareils.» Un grand nombre demoji sont standardisés sous forme de caractères Unicode affichables dans des multiples environnements comme les messageries instantanés, clients emails, pages web (HTML) et réseaux sociaux divers comme Facebook et Twitter. Certains systèmes d'opération comme Windows 10 ou Mac OS X et Android les supportent aussi directement.
Les emoji dans le standard UniCode 😂
Les jeux emoji dans Unicode dépendent d'abord des versions de Unicode. La première qui inclut les emoji est la version 6 et qui date de 2010. En nov 2020, la dernière version du jeu emoji est défini dans le Unicode Technical Standard #51, version 13.1. Ce document technique "«defines the structure of Unicode emoji characters and sequences, and provides data to support that structure, such as which characters are considered to be emoji, which emoji should be displayed by default with a text style versus an emoji style, and which can be displayed with a variety of skin tones. It also provides design guidelines for improving the interoperability of emoji characters across platforms and implementations.». En résumé (simplifié), les emoji sont des caractères dans des fontes qui s'affichent soit avec un style "texte" (graphisme simple) soit avec un graphisme plus complexe et qui inclut des variantes de couleur.
Cette norme définit un emoji comme «colorful pictograph that can be used inline in text. Internally the representation is either (a) an image, (b) an encoded character, or (c) a sequence of encoded characters.»
Certains emoji peuvent avoir des variantes qui sont définis avec des encodages ajoutés au code de base. Un exemple est la couleur de peau ou des cheveux. Certains emoji peuvent être combinées en en seul symbole affiché.
Le tableau ci-dessous montre quelques emoji simples (variante de base).
Code
U+ |
Affichages
dans votre navigateur (defauts pour taille texte, 24px et 40px, fonte alternative 40px) |
Nom court CLDR | Mots clefs |
---|---|---|---|
1F602 | 😂 😂 😂 😂 | face with tears of joy
(visage avec des larmes de rire) |
face | face with tears of joy | joy | laugh | tear |
1F478 | 👸 👸 👸 👸 | princess | fairy tale | fantasy | princess |
1F9DB | 🧛 🧛 🧛 🧛 | Vampire | Dracula | undead | vampire |
1F6E0 | 🛠 🛠 🛠 🛠 | hammer and wrench | hammer | hammer and wrench | spanner | tool | wrench |
Le HTML/CSS utilisé pour afficher les caractères est le suivant 😂 <span style="font-size: 24px">😂</span> <span style="font-size: 40px">😂</span> <span style="font-family: 'Noto Color Emoji', 'Apple Color Emoji','Segoe UI Emoji', Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">😂</span>
Le tableau suivant présent des exemples de variantes. Le vampire par défaut peut être un home, une femme, ou encore une image neutre selon votre navigateur, mais on peut explicitement choisir entre un home et une femme. Ensuite on montre un exemple de couleur de peau "medium-dark skin tone" et un emoji combiné)
Code | Affichages
dans votre navigateur (defaut, 24px et 40px en 2 variantes) |
Nom court CLDR | Mots clefs |
---|---|---|---|
U+1F9DB U+200D U+2640 U+FE0F | 🧛♀️ 🧛♀️ 🧛♀️ 🧛♀️ | woman vampire | undead | woman vampire |
U+1F9DB U+200D U+2642 U+FE0F | 🧛♂️ 🧛♂️ 🧛♂️ 🧛♂️ | man vampire | undead | man vampire |
U+1F478 U+1F3FF | 👸🏾 👸🏾 👸🏾 👸🏾 | princess: medium-dark skin tone | |
U+1F469 U+1F3FE U+200D U+1F91D U+200D U+1F469 U+1F3FC | 👩🏾🤝👩🏼 👩🏾🤝👩🏼 👩🏾🤝👩🏼 👩🏾🤝👩🏼 | women holding hands: medium-dark skin tone, medium-light skin tone |
Différences entre graphismes
Au même titre que les lettre dans une fonte, les emoji ont une apparence différente selon la police utilisée, donc les images n'ont pas les même look mais on les reconnaît.
Par exemple le "face with tears of joy" est représenté de la façon suviante:
Identifier un emoji
Si vous voulez utiliser un emoji pour créer un artéfact, il faut (1) trouver le emoji adapté et (2) choisir une fonte parmi celles qui sont disponibles.
Pour trouver et sélectionner un emoji il existe plusieurs solutions:
- Si vous parlez l'Anglais on conseille d'utiliser la base de données officielle de unicode.org,:
- https://www.unicode.org/emoji/charts-13.1/emoji-list.html (version 13, nov 2020)
- Chercher dans le navigateur un mot
- Cliquer sur le code à gauche, cela va afficher une page avec des variantes. Notez le code, par exemple
1F9DB
pour le vampire - Identifier l'image qui vous plaît le plus et essayez de trouver le graphisme SVG (c.f. ci-dessous). Certains, comme ceux de Apple, ne sont pas libres.
- Une solution similaire, mais plus simple, est de consulter openMoji.org, un projet qui implémente un système complet (donc y compris ses graphismes)
- OpenMoji.org
- Soit utilisez le moteur de recherche, soit naviguez dans la bibliothèque
- Si l'image vous plaît, vous pouvez directement récupérer le SVG. Cliquez sur l'image. Notez que vous pouvez aussi sélectionner la couleur de peau ou des traits noirs en bas de page. Cliquer sur SVG vous offre le choix d'enregistrer le fichier ou de l'afficher dans le navigateur (pour l'enregistrer "sous" dans la suite).
- Si l'image ne vous plaît, notez le code, par exemple
1F9DB
pour le vampire.
- Une alternative intéressante pour chercher un emoji plus les graphismes de plusieurs vendeurs est Emojipedia.
- Vous pouvez soit chercher soit parcourir les catégories
- Une fois trouvé une page vous pouvez examiner les variantes, et copier/coller le caractère.
- Ce site ne contient pas les graphismes SVG, donc il faut juste noter le code (après la liste des graphisme des vendeurs)
Télécharger le SVG d'un Emoji
Pour trouver l'image SVG d'un emoji il vaut mieux connaître son code (cf. juste ci-dessus), mais ce n'est pas une nécessité.
Le site qui permet de chercher et de télécharger un SVG le plus facilement est OpenMoji.org, mais certains graphiques ne vous plaisent pas forcément.
En plus de OpenMoji, Twitter et Google mettent aussi à dispositions leurs icônes en open source. Soit vous récupérez leurs archives sur Github, soit vous utilisez un site tiers.
Iconify.design
Iconify.design met à disposition plusieurs jeux emoji. Il faut d'abord choisir une collection, ci-dessous on liste les plus importantes. Ensuite cherchez le graphisme que vous désirez. Notez que certaines collections ne sont pas complètes UniCode 13 (ou mieux).
Collections Emoji de Iconfiy.design:
- Twemoji (Twitter)
- Noto Emoji (Google)
- OpenMoji
- Emoji One (Colored) (jeu réduit)
- FireFox Emoji (jeu réduit)
Une fois trouvé votre emoji, vous pouvez soit télécharger le code SVG (utile si vous savez utiliser l'éditeur SVG), soit le fichier SVG.
Liens
Fichiers emoji
- Twemoji de Twitter (requires technical skills, i.e. pulling a GitHub archive): format SVG et PNG
- OpenMoji.org (as of Nov 2020, supports version 13): format SVG et PNG
- Noto Emoji fonts de Google (requires technical skills, pulling a GitHub archive): format SVG et PNG
Catalogues emoji
- Unicode® Emoji Charts v13.1 Listes officielles pour la version 13.1.
- https://www.unicode.org/emoji/charts-13.1/emoji-list.html Liste de base avec leur nom.
- Liste avec images de différents vendeurs
- OpenMoji.org Permet de chercher des emjoi avec leur nom (en Anglais) et de télécharger des images
- decodeunicode.org