Recommandations pour la charte graphique

From FreeCAD Documentation
Revision as of 11:31, 17 October 2019 by FuzzyBot (talk | contribs) (Updating to match new version of source page)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Other languages:
Deutsch • ‎English • ‎français • ‎italiano

Remarque: pour des exemples d’icônes, voir le artwork collection page.

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

Voici un exemple concret mais arbitraire:

Un icône qui a pris toutes ses vitamines
A La couleur de surbrillance est utilisée pour cette surface entière pour indiquer la lumière tombant d'en haut
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 (utilisant la couleur de surbrillance) fournit un contraste sur les arrière-plans sombres
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
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.
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

FreeCAD icon example details.svg

A The highlight color is used for this entire surface to indicate light falling from above.
B The obligatory dark outline surrounds the icon shape to provide form contrast.
C Just inside the outline, the highlight stroke (Highlight color) provides contrast on dark backgrounds.
D This face is primarily the base color, but a light gradient from highlight (top left) to base (bottom right) gives the impression of light falling from above left.
E The highlight here is the base color (one tone down) to give the impression of this being the face furthest from the light.
F This face is like D but goes from Base (top left) to Dark (bottom right), to indicate that this is the face furthest from the light.

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

This icon is displayed as follows:

FreeCAD icon example.svg 64 px, original size, large buttons.
FreeCAD icon example.svg 32 px, medium size, regular buttons.
FreeCAD icon example.svg 16 px, small size, as it appears in the tree view.

Couleurs

Obligatory

[Obligatory] FreeCAD utilise une palette adaptée de la palette Tango. Chaque couleur principale est disponible en 4 tons: Highlight, Base, Dark et Outline.

Exemple d'une famille de couleurs à 4 tons (caméléon)
Une sélection de quelques couleurs clés. (Voir la palette pour toute la gamme)
Utilisez les tons jaunes pour les outils qui créent des objets.
Utilisez les tons bleus pour les outils qui modifient les objets
Utiliser les tonalités sarcelle pour les outils liés aux vues
Utiliser les tons rouges pour les outils liés à la contrainte

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.
How? Installation la palette est aussi simple que le copier dans votre dossier de palette Inkscape.

Green tones.PNG

Example of a 4 tone color family (Chameleon)


See FreeCAD palette for the full range. A selection of some key colors.

Use the Yellow tones for tools that create objects; for an example, see Part and Draft Workbenches.
Use the Blue tones for tools that modify objects; for an example, see Part and Draft Workbenches.
Use the Teal tones for view-related tools; for an example, see the View Menu.
Use the Red tones for Constraint related tools; for an example, see Sketcher Workbench.
Why limit myself to these colors? Restricting the colors to a defined palette helps avoid heterogeneous iconography and improves readability when there are many icons.
How do I use the FreeCAD palette? Installing the palette is as easy as copying it into your Inkscape palette folder.

Grille et Largeur du trait

Obligatory

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

Restez dans la zone bleue et tout se passera bien

FreeCAD icon size.svg

Draw the icon inside the blue area and everything will work out fine.


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)

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é

FreeCAD icon stroke 2px.svg

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

Obligatory

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

Draft Point.svg Draft Point backgrounds.svg

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.

Surligner

Strongly advised

[Fortement conseillé] En utilisant la couleur de surbrillance, ajoutez un trait interne (encore une fois, 2px) pour vous aider à créer ce contour. Sur les fonds sombres, c'est ce point culminant qui fournira le formulaire à l'icône.

Ce point culminant sauvera nos chaussettes sur un fond sombre.

Draft Move.svg Draft Move backgrounds.svg

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

Optional

[Optionnel] Selon les directives de Tango, si vous ajoutez un effet d'éclairage dégradé, essayez de faire en sorte que la lumière vienne du haut à 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 je n'ai pas joué en essayant d'utiliser une couleur autre que celle de la palette)

Subtil mais efficace.

Draft Clone.svg Draft Clone backgrounds.svg

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.

Remarques de clôture

C’est tout - il s’agit de s’assurer qu’il existe un aspect unifié pour tous les icônes. Rappelez-vous: SALCHO AVC, alignement, éclairage, couleur, mise en évidence, contour

Voici une collection de conseils pour pouvoir vérifier votre travail:

Vérification de la taille

Inkscape dispose d'un outil très 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.

Draft Move backgrounds outline.svg

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. Obtenez votre icône et exportez-la vers .png ou .jpg, selon votre préférence

A grayscale image allows you to more easily identify problems in contrast, as only a mix of black and white is present. Testing grayscale images is also good for colorblind users. If they can see the details in a grayscale image, then the contrast of the fully colored image is probably good as well.

Draft Move contrast grayscale.svg

Testing the icon's contrast in grayscale


I can't make out all the details. The colors you've chosen have poor value contrast. Try using colors that are further apart in your 4 tone palette, that is, a highlight green beside a highlight yellow will be difficult to see, knock one of those colors down to Base or Dark.