Artwork Guidelines/fr: Difference between revisions

From FreeCAD Documentation
(Created page with "[Obligatoirement] En vous basant sur la couleur principale de l'icône, assurez-vous qu'il y a un contour sombre (de 2 pixels comme mentionné précédemment). Cela fonctionne...")
(Updating to match new version of source page)
 
(99 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<languages/>
<languages/>
Remarque: pour des exemples d’icônes, voir le [[Artwork/fr|artwork collection page]].


== Guidelines ==
== Introduction ==


{{Emphasis|Note:}} Pour toutes les icônes de l'arborescence source, voir [[Artwork/fr|Graphisme]].
===Introduction===


Une icône FreeCAD est composée de 6 éléments qui peuvent être mémorisés facilement en utilisant l'acronyme maladroit "SALCHO":
Une icône FreeCAD est composée de 6 éléments qui peuvent être mémorisés facilement en utilisant l'acronyme "SALCHO":
'''S'''troke, '''A'''lignment, '''L'''highting, '''C'''olor, '''H'''highlighting, '''O'''utline
'''S'''troke, '''A'''lignment, '''L'''highting, '''C'''olor, '''H'''highlighting, '''O'''utline


Voici un exemple concret mais arbitraire:
Voici un exemple concret mais arbitraire :

[[File:IconAnatomy.png|256px|center|Un icône qui a pris toutes ses vitamines]]
[[File:FreeCAD_icon_example_details.svg]]
{| class="wikitable"

{| class="wikitable" style="width:70%;"
|-
|-
| style="width:8%; text-align:center;" | A
|A
|La couleur de surbrillance est utilisée pour cette surface entière pour indiquer la lumière tombant d'en haut
|La couleur de surbrillance est utilisée pour toute cette surface pour indiquer la lumière tombant du dessus.
|-
|-
| style="text-align:center;" | B
|B
|Le contour sombre obligatoire entoure la forme de l'icône pour fournir un contraste de forme
|Le contour sombre obligatoire entoure la forme de l'icône pour fournir un contraste de forme.
|-
|-
| style="text-align:center;" | C
|C
|Juste à l'intérieur du contour, le trait de surbrillance (utilisant la couleur de surbrillance) fournit un contraste sur les arrière-plans sombres
|Juste à l'intérieur du contour, le trait de surbrillance (couleur de surbrillance) offre un contraste sur les arrière-plans sombres.
|-
|-
| style="text-align:center;" | D
|D
|Cette face est principalement la couleur de base, mais un léger dégradé de la surbrillance (en haut à gauche) à la base (en bas à droite) donne une impression de lumière tombant d'en haut à gauche
|Cette face est principalement la couleur de base, mais un léger dégradé du point culminant (en haut à gauche) à la base (en bas à droite) donne l'impression que la lumière tombe du haut à gauche.
|-
|-
| style="text-align:center;" | E
|E
|Le point culminant ici est la couleur de base (un ton vers le bas) pour donner l'impression que c'est la face la plus éloignée de la lumière.
|Le point culminant ici est la couleur de base (un ton vers le bas) pour donner l'impression que c'est le visage le plus éloigné de la lumière.
|-
|-
| style="text-align:center;" | F
|F
|Cette face est comme D mais va de la Base (en haut à gauche) à la Sombre (en bas à droite), pour indiquer que c'est la face la plus éloignée de la lumière
|Cette face est comme la face D mais va de Base (en haut à gauche) à Dark (en bas à droite), pour indiquer qu'il s'agit d'une face la plus éloignée de la lumière.
|}
|}


Les sections suivantes expliquent ces éléments de manière plus structurée.
Les sections suivantes expliquent ces éléments avec plus de détails.


Cette icône s'affiche comme suit:
===Couleurs===
{| class="wikitable" style="width:70%;"
| style="width: 8%; text-align: center;" | [[File:FreeCAD_icon_example.svg|64px]]
| 64 px, taille originale, gros boutons.
|-
| style="text-align: center;" | [[File:FreeCAD_icon_example.svg|32px]]
| 32 px, taille moyenne, boutons normaux.
|-
| style="text-align: center;" | [[File:FreeCAD_icon_example.svg|16px]]
| 6 px, petite taille, comme il apparaît dans la [[tree view/fr|vue en arborescence]].
|}

==Couleurs==

{{Emphasis|Obligatoire}}

FreeCAD utilise une palette adaptée de la palette [https://web.archive.org/web/20190921043652/http://tango.freedesktop.org/tango_icon_theme_guidelines Tango palette]. Chaque couleur principale est disponible en 4 tons : Highlight, Base, Dark et Outline. Notez que le contour n'est pas complètement noir mais une variation très sombre de la base.

[[File:Green_tones.PNG]]
{{Caption|Exemple d'une famille de couleurs à 4 tons (caméléon)}}


Voir [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 FreeCAD palette] pour la gamme complète. Une sélection de quelques couleurs clés.
[Obligatory]
{| class="wikitable" style="width:70%;"
[https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 FreeCAD utilise une palette adaptée de la palette Tango]. Chaque couleur principale est disponible en 4 tons: Highlight, Base, Dark et Outline.
|style="background-color:#fce94f; width:4%;"|
[[File:Green_tones.PNG|center|Exemple d'une famille de couleurs à 4 tons (caméléon)]]
|style="background-color:#edd400; width:4%;"|
{| class="wikitable"
|style="background-color:#c4a000; width:4%;"|
|+ style="caption-side:bottom;" | Une sélection de quelques couleurs clés. (Voir [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 la palette] pour toute la gamme)
|style="background-color:#fce94f;width:5%;|
|style="background-color:#302b00; width:4%;"|
|Utilisez les tons jaunes pour les outils qui créent des objets; pour un exemple, voir [[Part Workbench/fr|Atelier Part]] et [[Draft Workbench/fr|Atelier Draft]].
|style="background-color:#edd400;width:5%;|
|style="background-color:#c4a000;width:5%;|
|style="background-color:#302b00;width:5%;|
|Utilisez les tons jaunes pour les outils qui créent des objets.
|-
|-
|style="background-color:#729fcf;width:5%;|
|style="background-color:#729fcf;|
|style="background-color:#3465a4;width:5%;|
|style="background-color:#3465a4;|
|style="background-color:#204a87;width:5%;|
|style="background-color:#204a87;|
|style="background-color:#0b1521;width:5%;|
|style="background-color:#0b1521;|
|Utilisez les tons bleus pour les outils qui modifient les objets
|Utilisez les tons bleus pour les outils qui modifient les objets; pour un exemple, voir [[Part Workbench/fr|Atelier Part]] et [[Draft Workbench/fr|Atelier Draft]].
|-
|-
|style="background-color:#34e0e2;width:5%;|
|style="background-color:#34e0e2|
|style="background-color:#16d0d2;width:5%;|
|style="background-color:#16d0d2|
|style="background-color:#06989a;width:5%;|
|style="background-color:#06989a|
|style="background-color:#042a2a;width:5%;|
|style="background-color:#042a2a|
|Utiliser les tonalités sarcelle pour les outils liés aux vues
|Utilisez les tons bleu canard pour les outils liés à la vue; pour un exemple, voir [[Std_View_Menu/fr|Le menu affichage]].
|-
|-
|style="background-color:#ef2929;width:5%;|
|style="background-color:#ef2929|
|style="background-color:#cc0000;width:5%;|
|style="background-color:#cc0000|
|style="background-color:#a40000;width:5%;|
|style="background-color:#a40000|
|style="background-color:#280000;width:5%;|
|style="background-color:#280000|
|Utiliser les tons rouges pour les outils liés à la contrainte
|Utilisez les tons rouges pour les outils liés à la contrainte; pour un exemple, voir [[Sketcher Workbench/fr|Atelier Sketcher]].
|}
|}

{| class="wikitable"
{| class="wikitable" style="width:70%;"
|-
|style="width: 25%;|
|style="width: 25%;|Pourquoi me limiter à ces couleurs ?
|Restreindre les couleurs à une palette définie permet d'éviter une iconographie hétérogène et améliore la lisibilité lorsqu'il existe de nombreuses icônes.
Pourquoi me limiter à ces couleurs?
|Limiter les couleurs à une palette définie permet d'éviter une iconographie hétérogène et améliore la lisibilité en présence de nombreuses icônes.
|-
|-
|Comment utiliser la palette FreeCAD ?
|How?
|Installation [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 la palette] est aussi simple que [https://inkscape.org/en/learn/faq/#how-install-new-extensions-palettes-document-templates-symbol-sets-icon-sets-etc le copier dans votre dossier de palette Inkscape].
|L'installation de [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 la palette] est aussi simple que de la [https://inkscape.org/en/learn/faq/#how-install-new-extensions-palettes-document-templates-symbol-sets-icon-sets-etc copier dans votre dossier de palette Inkscape].
|}
|}


===Grille et Largeur du trait===
== Grille et Largeur du trait ==


{{Emphasis|Obligatoire}}
[Obligatoirement]
Les icônes FreeCAD ont une taille nominale de 64px * 64px (bien que j'aime laisser une marge de 2px tout autour pour éviter que des choses géniales d'antialiasing ne se produisent sur le bord de l'image). Lorsque vous créez ou éditez un icône, assurez-vous que la taille de votre image est de 64 x 64, les unités étant px. Cela vous donne 60px * 60px d'espace utilisable.
[[File:IconSize.png|center|Restez dans la zone bleue et tout se passera bien]]


Les icônes FreeCAD ont une taille nominale de 64 pixels en largeur et en hauteur. Lors de la création ou de la modification d'une icône, assurez-vous que la taille du document est de 64 x 64 avec des unités en pixels (px). Laisser une marge intérieure de 2 pixels d'espace vide tout autour de la zone du document est utile car cela empêche les effets tels que l'anti-crénelage (flou des bords). Autrement dit, l'espace utilisable pour l'icône doit être considéré comme 60 x 60, et les bords doivent être laissés vides.
Il est également fortement recommandé d'appliquer au moins une grille au document comportant une ligne de quadrillage à chaque pixel et une ligne de grille majeure tous les 2 pixels. N'hésitez pas à ajouter d'autres grilles pour vous aider, mais vous devriez en avoir au moins une. Vous êtes alors aligné sur les intersections mineures de la grille. (Voir image)


[[File:FreeCAD_icon_size.svg|128px]]
Les largeurs des traits ne doivent pas être plus minces que 2px, avec les têtes de lignes arrondies et les coins dans la plupart des cas. Les traits peuvent être plus épais, mais utilisez un multiple de deux pour minimiser le flou de la mise à l'échelle.
{{Caption|Dessinez l'icône à l'intérieur de la zone bleue et tout ira bien.}}
[[File:Artwork_Grid.png|center|Grille ordonnée, tous les coups 2px, tout est parfaitement réalisé]]


Il est également fortement recommandé d'utiliser une grille visuelle qui a une ligne de grille mineure tous les pixels et une ligne de grille principale tous les 2 pixels. Les traits de l'icône doivent être alignés le long des intersections mineures de la grille.
{| class="wikitable"

Les traits ne doivent pas être ''plus petits'' que 2 pixels, avec des extrémités et des coins arrondis dans la plupart des cas. Les traits peuvent être ''plus épais'' mais ils doivent de préférence être un multiple de 2px afin de minimiser le flou de mise à l'échelle.

[[File:FreeCAD_icon_stroke_2px.svg|320px]]
{{Caption|Grille avec des traits multiples de 2px.}}

{| class="wikitable" style="width:70%;"
|-
|-
|style="width: 25%;|
|style="width:25%";|Pourquoi utiliser cette grille et cette taille de trait ?
|Pour des raisons historiques, FreeCAD utilise une icône 64x64 qui est ensuite réduite. Pas idéal, mais cela ajoute du caractère. Par conséquent, garder les choses alignées sur une puissance de deux grilles avec des épaisseurs qui sont des puissances de deux aide à éviter ou au moins à atténuer les problèmes d'anti-aliasing lors de la mise à l'échelle.
Pourquoi utiliser cette grille cette taille d'épaisseur ?
|Pour des raisons historiques, FreeCAD utilise un icône de 64px qui est ensuite réduit. Pas idéal, mais cela ajoute du caractère. Par conséquent, en gardant les éléments alignés sur un guide de deux grilles avec des épaisseurs égales à deux, vous évitez ou du moins atténuez les problèmes d'anti-aliasing lors du redimensionnement.
|-
|-
|Comment puis-je me conformer à cela?
|How?
|Allez dans "Fichier → Propriétés du document" et confirmez que la largeur, la hauteur et les unités de votre page sont correctes. Ensuite, allez dans l'onglet "Grilles" et cliquez sur "Nouveau", en définissant les unités sur "px", "Espacement X" et "Espacement Y" sur 1 et "Ligne de grille majeure" sur 2
|Si vous utilisez Inkscape, accédez à {{MenuCommand|Fichier → Propriétés du document}} et confirmez que la largeur, la hauteur et les unités de votre page sont correctes. Ensuite, allez dans l'onglet {{MenuCommand|Grilles}}, cliquez sur {{Button|Nouveau}}, définissez les unités sur {{incode|px}}, {{incode|Spacing X}} et {{incode|Spacing Y}} à 1 et {{incode|Grille principale tous les}} à 2.
|}
|}


===Contour===
== Contour ==


{{Emphasis|Obligatoire}}
[Obligatoirement]
En vous basant sur la couleur principale de l'icône, assurez-vous qu'il y a un contour sombre (de 2 pixels comme mentionné précédemment). Cela fonctionne en harmonie avec la mise en évidence pour assurer un bon contraste de forme sur plusieurs tons de fond.
[[File:Draft_Point.png|center|Wow, beaucoup trop clair, tellement contrasté]]


En vous basant sur la couleur principale de l'icône, assurez-vous qu'il y a un contour sombre de 2 pixels, comme mentionné précédemment. Cela fonctionne à l'unisson avec le point culminant pour assurer un bon contraste de forme sur plusieurs tons de fond.
{| class="wikitable"

[[File:Draft_Point.svg|x128px]] [[File:Draft_Point_backgrounds.svg|x128px]]
{{Caption|Le bord sombre de l'icône est le contour.}}

{| class="wikitable" style="width:70%;"
|-
|-
|style="width: 25%;|
|style="width: 25%";|Pourquoi l'esquisse est-elle nécessaire?
|Le contour est le squelette sur lequel tout le reste se bloque en ajoutant un contraste de forme. L'utilisation de la couleur Outline ou de la couleur Dark dépend de la situation, mais sans cette ligne, la gamme d'arrière-plans sur lesquels l'icône est visible est considérablement limitée.
Why is the outline needed?
|The outline is the skeleton on which everything else hangs by adding form contrast. Using the Outline color or the Dark color depends on the situation, but without this line, the range of backgrounds on which the icon is visible gets drastically limited
|-
|-
|Comment puis-je me conformer à cela?
|How?
|Ajoutez simplement un trait de 2 pixels autour de chaque partie de l'icône qui sera adjacente à la couleur d'arrière-plan, c'est-à-dire que le contour est destiné aux traits externes. Dans le cas de formes qui ont un trou au milieu, par exemple un beignet, le contour doit également être ajouté au trou intérieur. Accrochez les nœuds de votre chemin à la grille chaque fois que possible, en visant les intersections mineures de la grille.
|Simply add an external stroke of 2px around every part of the icon that will be adjacent to the background color. In the case of a donut shape for example, you would also do the interior hole. Snap your path's nodes to the grid whenever possible, aiming for the minor grid intersections.
|}
|}


===Highlight===
== Surbrillance ==

{{Emphasis|Fortement conseillé}}

Pour mettre en surbrillance, ajoutez un trait interne de 2px pour aider à faire ressortir le contour. Sur les fonds sombres, c'est cette mise en évidence qui fournira la forme à l'icône.


[[File:Draft_Move.svg|x128px]] [[File:Draft_Move_backgrounds.svg|x128px]]
[Strongly Advised]
{{Caption|La mise en surbrillance aide dans les arrière-plans sombres.}}
Using the Highlight color, add an internal stroke (again, 2px) to help make that outline pop. On dark backgrounds, it's this highlight that will be providing the form to the icon.
[[File:Draft_Move.png|center|That highlight will save our socks on a dark background.]]


{| class="wikitable"
{| class="wikitable" style="width:70%;"
|-
|-
|style="width: 25%;|
|style="width: 25%";|Pourquoi utiliser la surbrillance ?
|La surbrillance fonctionne harmonieusement avec le contour pour améliorer le contraste de la forme, en particulier sur les arrière-plans sombres. Ce n'est jamais une mauvaise idée, mais si vous n'avez pas l'espace, par exemple, lorsque vous avez une ligne très fine, vous pouvez la désactiver à condition d'avoir suffisamment de contraste entre la couleur principale et le contour.
Why use the highlight?
|The highlight works in unison with the outline to improve form contrast - especially on dark backgrounds. It is never a bad idea, but if you don't have the space (on a thin line for example) you can opt out of it provided you have ensured enough contrast between the main color and the outline
|-
|-
|Comment puis-je me conformer à cela ?
|How?
|Tout comme le contour, tracez simplement un trait de 2px autour du côté interne du contour, en alignant les nœuds sur la grille lorsque cela est possible, en visant les intersections de grille mineures.
|Just like the outline, simply trace a stroke of 2px around the internal side of the outline, snapping nodes to the grid when possible, aiming for the minor grid intersections.
|}
|}


===Lighting===
== Éclairage ==


{{Emphasis|Optionnel}}
[Optional]
As per Tango guidelines, if you're adding a gradient lighting effect, try to make it look like the light is coming from the top left. This is done by adding the highlight color up top left and the Base or Dark color bottom right (notice that I haven't played around trying to use a non-palette color)
[[File:Draft_Clone.png|center|Subtle but effective.]]


Selon les directives de Tango, si vous ajoutez un effet d'éclairage dégradé, essayez de lui donner l'impression que la lumière vient du coin supérieur gauche. Cela se fait en ajoutant la couleur de surbrillance en haut à gauche et la couleur de base ou sombre en bas à droite. Notez que seules les couleurs de la palette sont utilisées.
{| class="wikitable"

[[File:Draft_Clone.svg|x128px]] [[File:Draft_Clone_backgrounds.svg|x128px]]
{{Caption|Effet d'éclairage subtil venant du haut à gauche.}}

{| class="wikitable" style="width:70%;"
|-
|-
|style="width: 25%;|
|style="width: 25%";|Pourquoi utiliser l'éclairage ?
|L’éclairage est une autre façon de lier les icônes ensemble et de faire en sorte que les niveaux d'[https://en.wikipedia.org/wiki/Lightness ''éclairage''] servent à améliorer leur lisibilité. A condition que le contour et la surbrillance soient présents, cela peut être considéré comme facultatif
Why use lighting?
|Lighting is just another way to tie icons together and ensure that there are varying levels of '[https://en.wikipedia.org/wiki/Lightness value]' to improve their readability. Provided the outline and highlight are present though, it can be considered optional
|-
|-
|Comment puis-je me conformer à cela ?
|How?
|Définissez le remplissage comme un dégradé linéaire ou radial. Dans Inkscape, cela est disponible dans les paramètres de trait et de remplissage. Avec "F2", il est possible de déplacer les nœuds d'ajustement du gradient pour s'assurer qu'ils sont à l'angle voulu.
|Set the fill to be a linear or a radial gradient. (Available in the stroke and fill settings). Remember that using "F2" to set direct select, you can move the nodes of the gradient around to make sure they are at the right angle.
|}
|}


== Format d'enregistrement recommandé ==
===Closing Remarks===


Il est conseillé de faire toutes les icônes en format [[SVG|SVG]], par exemple avec [http://inkscape.org Inkscape]. Cela rend plus facile l’application des changements et des icônes dérivés dans l'espace de la même application.
That's it - that's all there is to making sure that there's a unified look to all the icons.
Remember: '''SALCHO'''
Stroke, Alignment, Lighting, Color, Highlight, Outline


Lors de la validation des icônes à utiliser directement par FreeCAD (dans un fichier *.qrc), enregistrez-les sous "Plain SVG". Cela réduira la taille de l'icône et économisera l'espace disque et mémoire.
Here's a collection of tips to be able to check your work:


== Remarques de clôture ==
====Checking Size====


Rappelez-vous : '''SALCHO''' (AVC, alignement, éclairage, couleur, mise en évidence, contour)
Inkscape has a super handy tool to check your icon at various sizes.
Go to "View > Icon Preview..." and it'll show you previews of your icon resized to 16,24,32 and 64px!


Voici quelques conseils pour vérifier votre travail :
====Checking Your Outline====


=== Vérification de la taille ===
1. Put your icon on a big rectangle that is the same color as the darkest color in your icon.


Inkscape dispose d'un outil pratique pour vérifier votre icône à différentes tailles. Allez dans {{MenuCommand|Affichage → Aperçu de l'icône...}} et il vous montrera des aperçus de votre icône redimensionnée à 16, 24, 32 et 64 pixels.
2. Still looks OK? Great! Go to step 3. If not, see the frowny face


=== Vérification de votre contour ===
3. Do the same but this time using the lightest color.


# Placez votre icône sur un grand rectangle de la même couleur que la couleur la plus foncée de votre icône.
4. Still looks OK? Great! Outlines and highlights have been used appropriately!
# Semble toujours OK? Génial. Passez à l'étape suivante. Sinon, ajustez la surbrillance.
{| class="wikitable"
# Faites de même mais cette fois en utilisant la couleur la plus claire.
# Semble toujours OK? Génial. Les contours et les faits saillants ont été utilisés de manière appropriée. Sinon, ajustez le contour.

[[File:Draft_Move_backgrounds_outline.svg|x128px]]
{{Caption|Test de l'icône au regard des couleurs les plus sombres et les plus claires en arrière-plan}}

{| class="wikitable" style="width:70%;"
|-
|-
|style="width: 25%;|
|style="width: 25%;"|Mon icône est à peine visible.
| Vous avez un contraste de forme médiocre. Vérifiez le contour et mettez en surbrillance, l'un d'entre eux est probablement manquant ou mal appliqué.
'''My icon is barely visible!'''
|You have poor form contrast. Double check the outline and highlight, one of these is probably missing or improperly applied.
|}
|}


=== Vérification de votre contraste ===
====Checking Your Contrast====

# Exportez votre icône SVG vers un format bitmap, comme {{incode|.png}} ou {{incode|.jpg}}.
# Chargez votre bitmap dans un programme d'image et changez-le en niveaux de gris. Par exemple, dans GIMP, vous iriez dans {{MenuCommand|Image → Mode → Niveaux de gris}}.
# Inkscape vous permet de convertir le SVG directement en niveaux de gris en utilisant {{MenuCommand|Extensions → Couleur → Niveaux de gris}}.
# Pouvez-vous toujours clairement distinguer les détails internes ? Génial. Le contraste est bon.


Une image en niveaux de gris vous permet d'identifier plus facilement les problèmes de contraste, car seul un mélange de noir et blanc est présent. Le test d'images en niveaux de gris est également bon pour les utilisateurs daltoniens. S'ils peuvent voir les détails dans une image en niveaux de gris, le contraste de l'image entièrement colorée est probablement également bon.
1. Get your icon and export it to either .png or .jpg, whichever you prefer


[[File:Draft_Move_contrast_grayscale.svg|x128px]]
2. Open an image program and change it to grayscale. In GIMP for example you would go to "Image > Mode > Grayscale" (This is excellent for testing for color blind users)
{{Caption|Test du contraste de l'icône en niveaux de gris}}


{| class="wikitable" style="width:70%;"
3. Can you still clearly make out any internal details? Great! You have good contrast!
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;"|Je ne peux pas distinguer tous les détails.
|Les couleurs que vous avez choisies ont un contraste de faible valeur. Essayez d'utiliser des couleurs plus éloignées de 4 tons dans votre palette, c'est-à-dire qu'un surlignage vert à côté d'un surlignage jaune sera difficile à voir, décalez l'une de ces couleurs en Base ou Foncé.
'''I can't make out all the wonderful detail!'''
|The colors you've chosen have poor value contrast. Try using colors that are further apart in your 4 tone palette. i.e. A Highlight green beside a highlight yellow will be difficult to see, knock one of those colors down to Base or Dark.
|}
|}




[[Category:Developer Documentation]]
[[Category:Artwork{{#translation:}}]]
[[Category:Developer Documentation{{#translation:}}]]

Latest revision as of 10:40, 7 March 2022

Introduction

Note: Pour toutes les icônes de l'arborescence source, voir Graphisme.

Une icône FreeCAD est composée de 6 éléments qui peuvent être mémorisés facilement en utilisant l'acronyme "SALCHO": Stroke, Alignment, Lhighting, Color, Hhighlighting, Outline

Voici un exemple concret mais arbitraire :

A La couleur de surbrillance est utilisée pour toute cette surface pour indiquer la lumière tombant du dessus.
B Le contour sombre obligatoire entoure la forme de l'icône pour fournir un contraste de forme.
C Juste à l'intérieur du contour, le trait de surbrillance (couleur de surbrillance) offre un contraste sur les arrière-plans sombres.
D Cette face est principalement la couleur de base, mais un léger dégradé du point culminant (en haut à gauche) à la base (en bas à droite) donne l'impression que la lumière tombe du haut à gauche.
E Le point culminant ici est la couleur de base (un ton vers le bas) pour donner l'impression que c'est le visage le plus éloigné de la lumière.
F Cette face est comme la face D mais va de Base (en haut à gauche) à Dark (en bas à droite), pour indiquer qu'il s'agit d'une face la plus éloignée de la lumière.

Les sections suivantes expliquent ces éléments avec plus de détails.

Cette icône s'affiche comme suit:

64 px, taille originale, gros boutons.
32 px, taille moyenne, boutons normaux.
6 px, petite taille, comme il apparaît dans la vue en arborescence.

Couleurs

Obligatoire

FreeCAD utilise une palette adaptée de la palette Tango palette. Chaque couleur principale est disponible en 4 tons : Highlight, Base, Dark et Outline. Notez que le contour n'est pas complètement noir mais une variation très sombre de la base.

Exemple d'une famille de couleurs à 4 tons (caméléon)

Voir FreeCAD palette pour la gamme complète. Une sélection de quelques couleurs clés.

Utilisez les tons jaunes pour les outils qui créent des objets; pour un exemple, voir Atelier Part et Atelier Draft.
Utilisez les tons bleus pour les outils qui modifient les objets; pour un exemple, voir Atelier Part et Atelier Draft.
Utilisez les tons bleu canard pour les outils liés à la vue; pour un exemple, voir Le menu affichage.
Utilisez les tons rouges pour les outils liés à la contrainte; pour un exemple, voir Atelier Sketcher.
Pourquoi me limiter à ces couleurs ? Restreindre les couleurs à une palette définie permet d'éviter une iconographie hétérogène et améliore la lisibilité lorsqu'il existe de nombreuses icônes.
Comment utiliser la palette FreeCAD ? L'installation de la palette est aussi simple que de la copier dans votre dossier de palette Inkscape.

Grille et Largeur du trait

Obligatoire

Les icônes FreeCAD ont une taille nominale de 64 pixels en largeur et en hauteur. Lors de la création ou de la modification d'une icône, assurez-vous que la taille du document est de 64 x 64 avec des unités en pixels (px). Laisser une marge intérieure de 2 pixels d'espace vide tout autour de la zone du document est utile car cela empêche les effets tels que l'anti-crénelage (flou des bords). Autrement dit, l'espace utilisable pour l'icône doit être considéré comme 60 x 60, et les bords doivent être laissés vides.

Dessinez l'icône à l'intérieur de la zone bleue et tout ira bien.

Il est également fortement recommandé d'utiliser une grille visuelle qui a une ligne de grille mineure tous les pixels et une ligne de grille principale tous les 2 pixels. Les traits de l'icône doivent être alignés le long des intersections mineures de la grille.

Les traits ne doivent pas être plus petits que 2 pixels, avec des extrémités et des coins arrondis dans la plupart des cas. Les traits peuvent être plus épais mais ils doivent de préférence être un multiple de 2px afin de minimiser le flou de mise à l'échelle.

Grille avec des traits multiples de 2px.

Pourquoi utiliser cette grille et cette taille de trait ? Pour des raisons historiques, FreeCAD utilise une icône 64x64 qui est ensuite réduite. Pas idéal, mais cela ajoute du caractère. Par conséquent, garder les choses alignées sur une puissance de deux grilles avec des épaisseurs qui sont des puissances de deux aide à éviter ou au moins à atténuer les problèmes d'anti-aliasing lors de la mise à l'échelle.
Comment puis-je me conformer à cela? Si vous utilisez Inkscape, accédez à Fichier → Propriétés du document et confirmez que la largeur, la hauteur et les unités de votre page sont correctes. Ensuite, allez dans l'onglet Grilles, cliquez sur Nouveau, définissez les unités sur px, Spacing X et Spacing Y à 1 et Grille principale tous les à 2.

Contour

Obligatoire

En vous basant sur la couleur principale de l'icône, assurez-vous qu'il y a un contour sombre de 2 pixels, comme mentionné précédemment. Cela fonctionne à l'unisson avec le point culminant pour assurer un bon contraste de forme sur plusieurs tons de fond.

Le bord sombre de l'icône est le contour.

Pourquoi l'esquisse est-elle nécessaire? Le contour est le squelette sur lequel tout le reste se bloque en ajoutant un contraste de forme. L'utilisation de la couleur Outline ou de la couleur Dark dépend de la situation, mais sans cette ligne, la gamme d'arrière-plans sur lesquels l'icône est visible est considérablement limitée.
Comment puis-je me conformer à cela? Ajoutez simplement un trait de 2 pixels autour de chaque partie de l'icône qui sera adjacente à la couleur d'arrière-plan, c'est-à-dire que le contour est destiné aux traits externes. Dans le cas de formes qui ont un trou au milieu, par exemple un beignet, le contour doit également être ajouté au trou intérieur. Accrochez les nœuds de votre chemin à la grille chaque fois que possible, en visant les intersections mineures de la grille.

Surbrillance

Fortement conseillé

Pour mettre en surbrillance, ajoutez un trait interne de 2px pour aider à faire ressortir le contour. Sur les fonds sombres, c'est cette mise en évidence qui fournira la forme à l'icône.

La mise en surbrillance aide dans les arrière-plans sombres.

Pourquoi utiliser la surbrillance ? La surbrillance fonctionne harmonieusement avec le contour pour améliorer le contraste de la forme, en particulier sur les arrière-plans sombres. Ce n'est jamais une mauvaise idée, mais si vous n'avez pas l'espace, par exemple, lorsque vous avez une ligne très fine, vous pouvez la désactiver à condition d'avoir suffisamment de contraste entre la couleur principale et le contour.
Comment puis-je me conformer à cela ? Tout comme le contour, tracez simplement un trait de 2px autour du côté interne du contour, en alignant les nœuds sur la grille lorsque cela est possible, en visant les intersections de grille mineures.

Éclairage

Optionnel

Selon les directives de Tango, si vous ajoutez un effet d'éclairage dégradé, essayez de lui donner l'impression que la lumière vient du coin supérieur gauche. Cela se fait en ajoutant la couleur de surbrillance en haut à gauche et la couleur de base ou sombre en bas à droite. Notez que seules les couleurs de la palette sont utilisées.

Effet d'éclairage subtil venant du haut à gauche.

Pourquoi utiliser l'éclairage ? L’éclairage est une autre façon de lier les icônes ensemble et de faire en sorte que les niveaux d'éclairage servent à améliorer leur lisibilité. A condition que le contour et la surbrillance soient présents, cela peut être considéré comme facultatif
Comment puis-je me conformer à cela ? Définissez le remplissage comme un dégradé linéaire ou radial. Dans Inkscape, cela est disponible dans les paramètres de trait et de remplissage. Avec "F2", il est possible de déplacer les nœuds d'ajustement du gradient pour s'assurer qu'ils sont à l'angle voulu.

Format d'enregistrement recommandé

Il est conseillé de faire toutes les icônes en format SVG, par exemple avec Inkscape. Cela rend plus facile l’application des changements et des icônes dérivés dans l'espace de la même application.

Lors de la validation des icônes à utiliser directement par FreeCAD (dans un fichier *.qrc), enregistrez-les sous "Plain SVG". Cela réduira la taille de l'icône et économisera l'espace disque et mémoire.

Remarques de clôture

Rappelez-vous : SALCHO (AVC, alignement, éclairage, couleur, mise en évidence, contour)

Voici quelques conseils pour vérifier votre travail :

Vérification de la taille

Inkscape dispose d'un outil pratique pour vérifier votre icône à différentes tailles. Allez dans Affichage → Aperçu de l'icône... et il vous montrera des aperçus de votre icône redimensionnée à 16, 24, 32 et 64 pixels.

Vérification de votre contour

  1. Placez votre icône sur un grand rectangle de la même couleur que la couleur la plus foncée de votre icône.
  2. Semble toujours OK? Génial. Passez à l'étape suivante. Sinon, ajustez la surbrillance.
  3. Faites de même mais cette fois en utilisant la couleur la plus claire.
  4. Semble toujours OK? Génial. Les contours et les faits saillants ont été utilisés de manière appropriée. Sinon, ajustez le contour.

Test de l'icône au regard des couleurs les plus sombres et les plus claires en arrière-plan

Mon icône est à peine visible. Vous avez un contraste de forme médiocre. Vérifiez le contour et mettez en surbrillance, l'un d'entre eux est probablement manquant ou mal appliqué.

Vérification de votre contraste

  1. Exportez votre icône SVG vers un format bitmap, comme .png ou .jpg.
  2. Chargez votre bitmap dans un programme d'image et changez-le en niveaux de gris. Par exemple, dans GIMP, vous iriez dans Image → Mode → Niveaux de gris.
  3. Inkscape vous permet de convertir le SVG directement en niveaux de gris en utilisant Extensions → Couleur → Niveaux de gris.
  4. Pouvez-vous toujours clairement distinguer les détails internes ? Génial. Le contraste est bon.

Une image en niveaux de gris vous permet d'identifier plus facilement les problèmes de contraste, car seul un mélange de noir et blanc est présent. Le test d'images en niveaux de gris est également bon pour les utilisateurs daltoniens. S'ils peuvent voir les détails dans une image en niveaux de gris, le contraste de l'image entièrement colorée est probablement également bon.

Test du contraste de l'icône en niveaux de gris

Je ne peux pas distinguer tous les détails. Les couleurs que vous avez choisies ont un contraste de faible valeur. Essayez d'utiliser des couleurs plus éloignées de 4 tons dans votre palette, c'est-à-dire qu'un surlignage vert à côté d'un surlignage jaune sera difficile à voir, décalez l'une de ces couleurs en Base ou Foncé.