Artwork Guidelines/fr: Difference between revisions

From FreeCAD Documentation
(Created page with "== Format d'enregistrement recommandé ==")
No edit summary
Line 100: Line 100:
{{Caption|Dessinez l'icône à l'intérieur de la zone bleue et tout ira bien.}}
{{Caption|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.
<div class="mw-translate-fuzzy">
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)
</div>


<div class="mw-translate-fuzzy">
<div class="mw-translate-fuzzy">

Revision as of 08:07, 26 December 2019

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

Grille ordonnée, tous les coups 2px, tout est parfaitement réalisé
Grille ordonnée, tous les coups 2px, tout est parfaitement réalisé

Grid with strokes that are multiples of 2px.

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

Contour

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.

Wow, beaucoup trop clair, tellement contrasté
Wow, beaucoup trop clair, tellement contrasté

The dark edge of the icon is the outline.

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.
Comment ? Ajoutez simplement un trait externe de 2px autour de chaque partie de l'icône qui sera adjacente à la couleur d'arrière-plan. Dans le cas d'une forme de beignet par exemple, vous feriez aussi le trou intérieur. Alignez les nœuds de votre chemin sur la grille lorsque cela est possible, en visant les intersections mineures de la grille.

Surlignage

Fortement conseillé

En utilisant la couleur Highlight, ajoutez un trait interne de 2px pour aider à faire ressortir ce contour. Sur les fonds sombres, c'est cette mise en évidence qui fournira la forme à l'icône.

The light highlight helps in dark backgrounds.

Pourquoi utiliser le point culminant?

Le surlignage fonctionne à l'unisson 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 ne disposez pas de l'espace (sur une fine ligne, par exemple), vous pouvez vous désengager si vous avez obtenu un contraste suffisant entre la couleur principale et le contour.
Comment ? 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.

Subtle lighting effect coming from top left.

Pourquoi utiliser l'éclairage ?

L’éclairage est une autre façon de relier les icônes et de faire en sorte que les niveaux déclairage' servent à améliorer leur lisibilité. Pourvu que le contour et les surlignages soient présents, il peut être considéré comme facultatif
Comment? Définissez le remplissage comme étant un dégradé linéaire ou radial. (Disponible dans les paramètres de trait et de remplissage). Rappelez-vous qu'en utilisant "F2" pour définir la sélection directe, vous pouvez déplacer les nœuds du dégradé pour vous assurer qu'ils sont à angle droit.

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.

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 vous verrez les aperçus de votre icône redimensionnés à 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 sombre de votre icône.

Testing the icon against the darkest and lightest colors as background

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

  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é.

Template:Artwork