« InkStitch - broder un emoji » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(22 versions intermédiaires par le même utilisateur non affichées)
Ligne 21 : Ligne 21 :
Selon Wikipedia,  
Selon Wikipedia,  
{{Citation|É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.}}
{{Citation|É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 [[wp_fr:Unicode|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.
Un grand nombre d'emojis sont standardisés sous forme de caractères [[wp_fr:Unicode|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 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 [https://www.unicode.org/reports/tr51/ Unicode Technical Standard #51, version 13.1]. Ce document technique "{{citation|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.
Les jeux emoji dans Unicode dépendent d'abord des versions de Unicode. La première qui inclut les emoji est la version 6 qui date de 2010. En nov 2020, la dernière version du jeu emoji est définie dans le document [https://www.unicode.org/reports/tr51/ Unicode Technical Standard #51, version 13.1]. Ce document technique "{{citation|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 {{citation|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.}}
Cette norme définit un emoji comme {{citation|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é.
En résumé, un emoji est définie par
 
* un dessin
Le tableau ci-dessous montre quelques emoji simples (variante de base).
* un code de caractère unicode (un ou plusieurs caractères combinés, parfois avec un "[[wp_en:Zero-width_joiner|Zero Width Joiner]]", prononcé "zwidge")
* un nom court à option (non-standardisé, utilisé surtout dans les chats)
* un nom officiel dans le "Common Locale Data Repository" (CLDR)
* des mots clefs qui facilitent la recherche
Le tableau ci-dessous montre quelques emoji simples (variante de base) avec ces critères


{| class="wikitable"
{| class="wikitable"
Ligne 38 : Ligne 42 :
!Affichages  
!Affichages  
dans votre navigateur
dans votre navigateur
(defauts pour taille texte, 24px et 40px, fonte alternative 40px)
(defauts pour taille texte, 24px et 40px, fonte parfois alternative 40px)
!Nom court CLDR
!Nom court CLDR
!Shortcode
(utilisé dans les messageries)
!Mots clefs
!Mots clefs
|-
|-
Ligne 47 : Ligne 53 :


(visage avec des larmes de rire)
(visage avec des larmes de rire)
|:joy: (Github, Slack)
<nowiki>:</nowiki>face_with_tears_of_joy:
|<nowiki>face | face with tears of joy | joy | laugh | tear</nowiki>
|<nowiki>face | face with tears of joy | joy | laugh | tear</nowiki>
|-
|-
Ligne 52 : Ligne 61 :
|👸  <span style="font-size: 24px">👸</span>  <span style="font-size: 40px">👸</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">👸</span>
|👸  <span style="font-size: 24px">👸</span>  <span style="font-size: 40px">👸</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">👸</span>
|princess
|princess
|:princess:
|<nowiki>fairy tale | fantasy | princess</nowiki>
|<nowiki>fairy tale | fantasy | princess</nowiki>
|-
|-
Ligne 57 : Ligne 67 :
|🧛 <span style="font-size: 24px">🧛</span>  <span style="font-size: 40px">🧛</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🧛</span>
|🧛 <span style="font-size: 24px">🧛</span>  <span style="font-size: 40px">🧛</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🧛</span>
|Vampire
|Vampire
|:vampire:
|<nowiki>Dracula | undead | vampire</nowiki>
|<nowiki>Dracula | undead | vampire</nowiki>
|-
|-
Ligne 62 : Ligne 73 :
|🛠 <span style="font-size: 24px">🛠</span>  <span style="font-size: 40px">🛠</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🛠</span>
|🛠 <span style="font-size: 24px">🛠</span>  <span style="font-size: 40px">🛠</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🛠</span>
|hammer and wrench
|hammer and wrench
|:hammer_and_wrench:
|<nowiki>hammer | hammer and wrench | spanner | tool | wrench</nowiki>
|<nowiki>hammer | hammer and wrench | spanner | tool | wrench</nowiki>
|}
|}
Ligne 67 : Ligne 79 :
Le HTML/CSS utilisé pour afficher les caractères est le suivant <code><nowiki>😂  <span style="font-size: 24px">😂</span></nowiki>  <nowiki><span style="font-size: 40px">😂</span></nowiki>  <nowiki><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></nowiki></code>
Le HTML/CSS utilisé pour afficher les caractères est le suivant <code><nowiki>😂  <span style="font-size: 24px">😂</span></nowiki>  <nowiki><span style="font-size: 40px">😂</span></nowiki>  <nowiki><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></nowiki></code>


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é)
Certains emoji peuvent avoir des '''variantes''' définies avec des codes ajoutés au code de base. Un exemple est la couleur de peau ou des cheveux. La couleur, par exemple U+1F3FF pour "medium" dark est un caractère sans espacement, donc il se pose par dessus. Ensuite, il existe des séquences d'emoji aus sens propre, par exemple une famille avec papa, maman, un garçon et une fille. Techniquement parlé, ces emoji sont combinées par superposition en en seul symbole affiché: {{Citation|An Emoji ZWJ Sequence is a combination of multiple emojis which display as a single emoji on supported platforms. These sequences are joined with a Zero Width Joiner character.}} ([https://emojipedia.org/emoji-zwj-sequence/ Emoji ZWJ Sequence]). Le code du caractère (zéro largeur) est le U+200D  (HTML <code>&amp;#8205;</code> ou  <code>&amp;zwj;</code>). Le tableau ci-dessous montre des exemples
 
Le tableau suivant présent des exemples de variantes et des combinaisons. 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é). Pour finir on affiche des séquences [https://emojipedia.org/zero-width-joiner/ Zero Width Joiner].


{| class="wikitable"
{| class="wikitable"
Ligne 76 : Ligne 90 :
(defaut, 24px et 40px en 2 variantes)
(defaut, 24px et 40px en 2 variantes)
!Nom court CLDR
!Nom court CLDR
!Shortcode
(utilisé dans les messageries)
!Mots clefs
!Mots clefs
|-
|-
Ligne 81 : Ligne 97 :
|🧛‍♀️ <span style="font-size: 24px">🧛‍♀️</span> <span style="font-size: 40px">🧛‍♀️</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🧛‍♀️</span>
|🧛‍♀️ <span style="font-size: 24px">🧛‍♀️</span> <span style="font-size: 40px">🧛‍♀️</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🧛‍♀️</span>
|woman vampire
|woman vampire
|:vampire_woman: (Github)
<nowiki>:</nowiki>woman_vampire: (Emojipedia)
<nowiki>:</nowiki>female_vampire: (Slack)
|<nowiki>undead | woman vampire</nowiki>
|<nowiki>undead | woman vampire</nowiki>
|-
|-
Ligne 86 : Ligne 107 :
|🧛‍♂️ <span style="font-size: 24px">🧛‍♂️</span> <span style="font-size: 40px">🧛‍♂️</span>  <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🧛‍♂️</span>
|🧛‍♂️ <span style="font-size: 24px">🧛‍♂️</span> <span style="font-size: 40px">🧛‍♂️</span>  <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">🧛‍♂️</span>
|man vampire
|man vampire
|
|<nowiki>undead | man vampire</nowiki>
|<nowiki>undead | man vampire</nowiki>
|-
|-
Ligne 91 : Ligne 113 :
|👸🏾 <span style="font-size: 24px">👸🏾</span> <span style="font-size: 40px">👸🏾</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">👸🏾</span>
|👸🏾 <span style="font-size: 24px">👸🏾</span> <span style="font-size: 40px">👸🏾</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">👸🏾</span>
|princess: medium-dark skin tone
|princess: medium-dark skin tone
|:princess_medium_dark_skin_tone: (Emojipedia)
|
|
|-
|-
|U+1F469 U+1F3FE U+200D U+1F91D U+200D U+1F469 U+1F3FC
|U+1F469 U+1F3FE U+200D U+1F91D U+200D U+1F469 U+1F3FC
|👩🏾‍🤝‍👩🏼 <span style="font-size: 24px">👩🏾‍🤝‍👩🏼</span> <span style="font-size: 40px">👩🏾‍🤝‍👩🏼</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">👩🏾‍🤝‍👩🏼</span>
|👩🏾‍🤝‍👩🏼 <span style="font-size: 24px">👩🏾‍🤝‍👩🏼</span> <span style="font-size: 40px">👩🏾‍🤝‍👩🏼</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">👩🏾‍🤝‍👩🏼</span>
|women holding hands:
|
|medium-dark skin tone, medium-light skin tone
|-
|U+1F468 U+200D U+1F469 U+200D U+1F467 U+200D U+1F466
|👨‍👩‍👧‍👦 <span style="font-size: 24px">👨‍👩‍👧‍👦</span> <span style="font-size: 40px">👨‍👩‍👧‍👦</span> <span style="font-family: &quot;Noto Color Emoji&quot;, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; font-size: 40px">👨‍👩‍👧‍👦</span>
|family: man, woman, girl, boy
|
|
|women holding hands: medium-dark skin tone, medium-light skin tone
|<nowiki>boy | family | girl | man | woman</nowiki>
|}
|}


Ligne 103 : Ligne 133 :


Par exemple le "face with tears of joy" est représenté de la façon suviante:
Par exemple le "face with tears of joy" est représenté de la façon suviante:
[[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|https://emojipedia.org<nowiki/>Variantes d'images emoji de différents vendeurs (apple, google, facebook, windows, twitter, joy, samsung)]]


=== Identifier un emoji ===
=== 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. Donc avant de se focaliser sur un caractère et une fonte précise on conseille de parcourir les variantes.
Pour utiliser un emoji, il faut (1) trouver le emoji adapté et (2) choisir une fonte parmi celles qui sont disponibles. Donc avant de se focaliser sur un caractère et une fonte précise on conseille de parcourir les variantes.


Pour trouver et sélectionner un emoji il existe plusieurs solutions:
Pour trouver et sélectionner un emoji il existe plusieurs solutions:
# Si vous parlez l'Anglais on conseille d'utiliser la [https://home.unicode.org/emoji/ base de données officielle] de unicode.org,:
# Si vous parlez l'Anglais, vous pouvez utiliser la [https://home.unicode.org/emoji/ base de données officielle] de unicode.org,:
## 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
## Cherchez un mot dans la page HTML affichée (CTRL-F dans le navigateur)
## Cliquer sur le code à gauche, cela va afficher une page avec des variantes. Notez le code, par exemple <code>1F9DB</code> pour le vampire
## Cliquez 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.[[Fichier:Openmoji-org-vampire.png|vignette|Emoji "Vampire" chez OpenMoji.org, variante "peau jaune".]]
## Identifiez 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)
# 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]
Ligne 124 : Ligne 154 :
## 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)
## Emojipedia liste également le "shortcode" utilisé dans les messageries instanées.


[[image:iconify-design-screenshot-vampire.png|right|400px|thumb|Iconify.design Noto Emoji example (Vampire)]]
=== Télécharger le SVG d'un Emoji ===
=== 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é.
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.
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 comme iconify.


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.
'''Télécharge un emoji en SVG depuis Iconify.design'''


'''Iconify.design'''
[https://iconify.design/icon-sets/twemoji/ Iconify.design] met à disposition plusieurs jeux (collections) emoji. Il faut donc d'abord choisir une collection, ci-dessous on liste les plus importantes. Ensuite, cherchez le graphisme emoji que vous désirez. Notez que certaines collections ne sont pas complètes UniCode 13 (ou mieux).
[[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:
Collections Emoji de Iconfiy.design:
* [https://iconify.design/icon-sets/twemoji/ Twemoji] (Twitter)
* [https://iconify.design/icon-sets/twemoji/ Twemoji] (Twitter, conseillé)
* [https://iconify.design/icon-sets/noto/ Noto Emoji] (Google)
* [https://iconify.design/icon-sets/noto/ Noto Emoji] (Google, conseillé)
* [https://iconify.design/icon-sets/openmoji/ OpenMoji]
* [https://iconify.design/icon-sets/openmoji/ OpenMoji]
* [https://iconify.design/icon-sets/emojione/ Emoji One (Colored)] (jeu réduit)
* [https://iconify.design/icon-sets/emojione/ Emoji One (Colored)] (jeu réduit)
* [https://iconify.design/icon-sets/fxemoji/ FireFox Emoji] (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.
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 (conseillé).
 
== Principes pour broder un emoji ==
 
Comme le dessins SVG sont faits en plusieurs couches, il faut les simplifier. Sachez que dans un logiciel de broderie professionnel comme [[Stitch Era - logiciel de broderie machine et de hotfix|Stitch Era]] digitaliser un emoji serait moins compliqué car la procédure de digitalisation comprend une option pour éliminer les superpositions (overlap.)
 
=== Exemple avec une princesse de la collection noto (google) ===
 
[[Fichier:Patch-princess-lydie.jpg|vignette|droite|Batch d'une princesse emoji]]
Pour suivre un exemple, on conseille de télécharger le SVG du emoji "princess" de Iconify.design: [https://api.iconify.design/noto:princess.svg?download=true&box=true&inline=false&height=auto noto:princess.svg].
 
'''Etape 1: Préparation de base:'''
* Ouvrir le fichier SVG
* Afficher le panneau "objets"
* Tuer le rectangle noir posé par dessus (est-ce un bug du téléchargement ?)
* Renommer les éléments importants (dans le menu objets: double clic sur un chemin)
* Tuer les éléments superposés qui n'apportent rien à la broderie (certains dégradés)
'''Etape 2: Eliminer les superpositions'''
 
Éliminer les superpositions est la partie la plus pénible et généralement on conseille la méthode suivante: Traitez les objets de bas en haut (arrière-avant) dans le panneau d'objets et faites surtout des soustractions.
 
Pour la princesse, il faut par exemple
* soustraire le pull de l'ovale pour les cheveux.
* soustraire le cou du pull
* soustraire les cheveux du haut du rond de visage
* unifier les cheveux du haut avec l'ovale pour les cheveux <code>SHIFT-select</code>, puis <code>CTRL-K</code>
* Soustraire le visage jaune des cheveux
* soustraire la couronne des cheveux
 
Exemple: Pour soustraire un objet "pull" d'un objet "oval", il faut
# Dupliquer le pull: <code>CTRL_D</code> (ou menu contextuel->Duplicate)
# Sélectionner l'oval
# Ajouter le pull dupliqué à la sélection <code>CTRL_Click</code>
# Menu Path -> Difference <code>CTRL_-</code>
# Réparez la couleur.
 
Note: Une alternative pour faire cela plus rapidement serait d'exporter le dessin comme PNG, puis tracer l'image avec des couleurs (explications à faire)
 
'''Etape 3: Ajouter des légères superpositions'''
 
Ensuite il faut agrandir certains objets pour qu'il ait des petites superpositions, ceci pour éviter à ce qu'il reste des espaces entre les objets brodés due au "pull effect". On conseille d'utiliser la fonction Path->Outset , <code>CTRL_)</code>
 
Vous pouvez laissez max. deux couches de superposition pour les petits objets (yeux, bouche, collier, etc.)
 
Ensuite, si vous avez une machine avec une seule aiguille, unifiez les couleurs similaires et triez les couleurs dans l'ordre autant que possible 
 
'''Fichiers à télécharge:'''
* Original (sans le rectangle noir): [//edutechwiki.unige.ch/fmediawiki/images/d/d9/Princess.svg media:princess.svg]
* Fichier sans superpositions [//edutechwiki.unige.ch/fmediawiki/images/0/0e/Princess-1.svg media:princess-1.svg]
* Fichier prêt pour la paramétrisation [//edutechwiki.unige.ch/fmediawiki/images/7/7d/Princess-2.svg media:princess-2.svg]
* Patch brodable [//edutechwiki.unige.ch/fmediawiki/images/4/46/Patch-princess-lydie.svg media:patch-princess-lydie.svg]
 
<gallery>
princess.svg|Original
princess-1.svg|Sans superpositions
princess-2.svg|Avec des petites superpositions (2px)
patch-princess-lydie.svg |Patch brodable (dessins paramétrisés)
</gallery>
 
=== Exemple vampire de Twitter ===
 
Les dessins de twitter sont différents et les techniques de dessins diffèrent aussi un peu. Pour le vampire, on a utilisé aussi l'opérateur "union". Sinon le principe était le même:
* Tuer les objets inutiles (2-3, notamment les contours beiges des dents)
* Nommer les éléments
* Faire des différences depuis le bas de la pile
* Union du oval visage, cou, oreilles
* Briser les objets non contigus (ici les 2 yeux)
 
Fichiers à télécharger:
* [[media:woman-vampire-light-skin-tone.svg]]
* [[media:patch-woman-vampire-light-skin-tone-1.svg]]
 
 
<gallery>
woman-vampire-light-skin-tone.svg|Original
patch-woman-vampire-light-skin-tone-1.svg |Patch brodable (dessins paramétrisés)
</gallery>


== Liens ==
== Liens ==
Ligne 156 : Ligne 262 :


* [https://www.unicode.org/emoji/charts-13.1/index.html Unicode® Emoji Charts v13.1] Listes officielles pour la version 13.1.
* [https://www.unicode.org/emoji/charts-13.1/index.html 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.
** [https://www.unicode.org/emoji/charts-13.1/emoji-list.html Liste de base avec le nom des emoji]
** [https://www.unicode.org/emoji/charts-13.1/full-emoji-list.html Liste avec images de différents vendeurs]
** [https://www.unicode.org/emoji/charts-13.1/full-emoji-list.html Liste avec images de différents vendeurs]
* [https://openmoji.org/ OpenMoji.org] Permet de chercher des emjoi avec leur nom (en Anglais) et de télécharger des images
* [https://openmoji.org/ OpenMoji.org] Permet de chercher des emjoi avec leur nom (en Anglais) et de télécharger des images
* [https://decodeunicode.org/en/search/search decodeunicode.org]
* [https://decodeunicode.org/en/search/search decodeunicode.org]

Version du 26 novembre 2020 à 19:21

Guide de tutoriels de broderie machine
Module: InkStitch
brouillon intermédiaire
2020/11/26
Prérequis
Autres pages du module
Catégorie: InkStitch


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 d'emojis 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 qui date de 2010. En nov 2020, la dernière version du jeu emoji est définie dans le document 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.»

En résumé, un emoji est définie par

  • un dessin
  • un code de caractère unicode (un ou plusieurs caractères combinés, parfois avec un "Zero Width Joiner", prononcé "zwidge")
  • un nom court à option (non-standardisé, utilisé surtout dans les chats)
  • un nom officiel dans le "Common Locale Data Repository" (CLDR)
  • des mots clefs qui facilitent la recherche

Le tableau ci-dessous montre quelques emoji simples (variante de base) avec ces critères

Exemples emoji
Code

U+

Affichages

dans votre navigateur (defauts pour taille texte, 24px et 40px, fonte parfois alternative 40px)

Nom court CLDR Shortcode

(utilisé dans les messageries)

Mots clefs
1F602 😂 😂 😂 😂 face with tears of joy

(visage avec des larmes de rire)

:joy: (Github, Slack)

:face_with_tears_of_joy:

face | face with tears of joy | joy | laugh | tear
1F478 👸 👸 👸 👸 princess :princess: fairy tale | fantasy | princess
1F9DB 🧛 🧛 🧛 🧛 Vampire :vampire: Dracula | undead | vampire
1F6E0 🛠 🛠 🛠 🛠 hammer and wrench :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>

Certains emoji peuvent avoir des variantes définies avec des codes ajoutés au code de base. Un exemple est la couleur de peau ou des cheveux. La couleur, par exemple U+1F3FF pour "medium" dark est un caractère sans espacement, donc il se pose par dessus. Ensuite, il existe des séquences d'emoji aus sens propre, par exemple une famille avec papa, maman, un garçon et une fille. Techniquement parlé, ces emoji sont combinées par superposition en en seul symbole affiché: «An Emoji ZWJ Sequence is a combination of multiple emojis which display as a single emoji on supported platforms. These sequences are joined with a Zero Width Joiner character.» (Emoji ZWJ Sequence). Le code du caractère (zéro largeur) est le U+200D (HTML &#8205; ou &zwj;). Le tableau ci-dessous montre des exemples

Le tableau suivant présent des exemples de variantes et des combinaisons. 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é). Pour finir on affiche des séquences Zero Width Joiner.

Variantes emoji
Code Affichages

dans votre navigateur (defaut, 24px et 40px en 2 variantes)

Nom court CLDR Shortcode

(utilisé dans les messageries)

Mots clefs
U+1F9DB U+200D U+2640 U+FE0F 🧛‍♀️ 🧛‍♀️ 🧛‍♀️ 🧛‍♀️ woman vampire :vampire_woman: (Github)

:woman_vampire: (Emojipedia)

:female_vampire: (Slack)

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 :princess_medium_dark_skin_tone: (Emojipedia)
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
U+1F468 U+200D U+1F469 U+200D U+1F467 U+200D U+1F466 👨‍👩‍👧‍👦 👨‍👩‍👧‍👦 👨‍👩‍👧‍👦 👨‍👩‍👧‍👦 family: man, woman, girl, boy boy | family | girl | man | woman

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:

https://emojipedia.orgVariantes d'images emoji de différents vendeurs (apple, google, facebook, windows, twitter, joy, samsung)

Identifier un emoji

Pour utiliser un emoji, il faut (1) trouver le emoji adapté et (2) choisir une fonte parmi celles qui sont disponibles. Donc avant de se focaliser sur un caractère et une fonte précise on conseille de parcourir les variantes.

Pour trouver et sélectionner un emoji il existe plusieurs solutions:

  1. Si vous parlez l'Anglais, vous pouvez utiliser la base de données officielle de unicode.org,:
    1. https://www.unicode.org/emoji/charts-13.1/emoji-list.html (version 13, nov 2020)
    2. Cherchez un mot dans la page HTML affichée (CTRL-F dans le navigateur)
    3. Cliquez sur le code à gauche, cela va afficher une page avec des variantes. Notez le code, par exemple 1F9DB pour le vampire
    4. Identifiez 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.
      Emoji "Vampire" chez OpenMoji.org, variante "peau jaune".
  2. 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)
    1. OpenMoji.org
    2. Soit utilisez le moteur de recherche, soit naviguez dans la bibliothèque
    3. 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).
    4. Si l'image ne vous plaît, notez le code, par exemple 1F9DBpour le vampire.
  3. Une alternative intéressante pour chercher un emoji plus les graphismes de plusieurs vendeurs est Emojipedia.
    1. Vous pouvez soit chercher soit parcourir les catégories
    2. Une fois trouvé une page vous pouvez examiner les variantes, et copier/coller le caractère.
    3. Ce site ne contient pas les graphismes SVG, donc il faut juste noter le code (après la liste des graphisme des vendeurs)
    4. Emojipedia liste également le "shortcode" utilisé dans les messageries instanées.
Iconify.design Noto Emoji example (Vampire)

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 comme iconify.

Télécharge un emoji en SVG depuis Iconify.design

Iconify.design met à disposition plusieurs jeux (collections) emoji. Il faut donc d'abord choisir une collection, ci-dessous on liste les plus importantes. Ensuite, cherchez le graphisme emoji que vous désirez. Notez que certaines collections ne sont pas complètes UniCode 13 (ou mieux).

Collections Emoji de Iconfiy.design:

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 (conseillé).

Principes pour broder un emoji

Comme le dessins SVG sont faits en plusieurs couches, il faut les simplifier. Sachez que dans un logiciel de broderie professionnel comme Stitch Era digitaliser un emoji serait moins compliqué car la procédure de digitalisation comprend une option pour éliminer les superpositions (overlap.)

Exemple avec une princesse de la collection noto (google)

Batch d'une princesse emoji

Pour suivre un exemple, on conseille de télécharger le SVG du emoji "princess" de Iconify.design: noto:princess.svg.

Etape 1: Préparation de base:

  • Ouvrir le fichier SVG
  • Afficher le panneau "objets"
  • Tuer le rectangle noir posé par dessus (est-ce un bug du téléchargement ?)
  • Renommer les éléments importants (dans le menu objets: double clic sur un chemin)
  • Tuer les éléments superposés qui n'apportent rien à la broderie (certains dégradés)

Etape 2: Eliminer les superpositions

Éliminer les superpositions est la partie la plus pénible et généralement on conseille la méthode suivante: Traitez les objets de bas en haut (arrière-avant) dans le panneau d'objets et faites surtout des soustractions.

Pour la princesse, il faut par exemple

  • soustraire le pull de l'ovale pour les cheveux.
  • soustraire le cou du pull
  • soustraire les cheveux du haut du rond de visage
  • unifier les cheveux du haut avec l'ovale pour les cheveux SHIFT-select, puis CTRL-K
  • Soustraire le visage jaune des cheveux
  • soustraire la couronne des cheveux

Exemple: Pour soustraire un objet "pull" d'un objet "oval", il faut

  1. Dupliquer le pull: CTRL_D (ou menu contextuel->Duplicate)
  2. Sélectionner l'oval
  3. Ajouter le pull dupliqué à la sélection CTRL_Click
  4. Menu Path -> Difference CTRL_-
  5. Réparez la couleur.

Note: Une alternative pour faire cela plus rapidement serait d'exporter le dessin comme PNG, puis tracer l'image avec des couleurs (explications à faire)

Etape 3: Ajouter des légères superpositions

Ensuite il faut agrandir certains objets pour qu'il ait des petites superpositions, ceci pour éviter à ce qu'il reste des espaces entre les objets brodés due au "pull effect". On conseille d'utiliser la fonction Path->Outset , CTRL_)

Vous pouvez laissez max. deux couches de superposition pour les petits objets (yeux, bouche, collier, etc.)

Ensuite, si vous avez une machine avec une seule aiguille, unifiez les couleurs similaires et triez les couleurs dans l'ordre autant que possible

Fichiers à télécharge:

Exemple vampire de Twitter

Les dessins de twitter sont différents et les techniques de dessins diffèrent aussi un peu. Pour le vampire, on a utilisé aussi l'opérateur "union". Sinon le principe était le même:

  • Tuer les objets inutiles (2-3, notamment les contours beiges des dents)
  • Nommer les éléments
  • Faire des différences depuis le bas de la pile
  • Union du oval visage, cou, oreilles
  • Briser les objets non contigus (ici les 2 yeux)

Fichiers à télécharger:


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