Artwork Guidelines/fr: Difference between revisions

From FreeCAD Documentation
(Created page with "===Couleurs===")
(29 intermediate revisions by the same user not shown)
Line 37: Line 37:


[Obligatory]
[Obligatory]
[https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 FreeCAD uses a palette adapted from the Tango palette]. Each main color comes in 4 tones: Highlight, Base, Dark and Outline.
[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.
[[File:Green_tones.PNG|center|Example of a 4 tone color family (Chameleon)]]
[[File:Green_tones.PNG|center|Exemple d'une famille de couleurs à 4 tons (caméléon)]]
{| class="wikitable"
{| class="wikitable"
|+ style="caption-side:bottom;" | A selection of some key colors. (See [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 the palette] for the full range)
|+ 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:#fce94f;width:5%;|
|style="background-color:#edd400;width:5%;|
|style="background-color:#edd400;width:5%;|
|style="background-color:#c4a000;width:5%;|
|style="background-color:#c4a000;width:5%;|
|style="background-color:#302b00;width:5%;|
|style="background-color:#302b00;width:5%;|
|Utilisez les tons jaunes pour les outils qui créent des objets.
|Use the Yellow tones for tools that create objects.
|-
|-
|style="background-color:#729fcf;width:5%;|
|style="background-color:#729fcf;width:5%;|
Line 51: Line 51:
|style="background-color:#204a87;width:5%;|
|style="background-color:#204a87;width:5%;|
|style="background-color:#0b1521;width:5%;|
|style="background-color:#0b1521;width:5%;|
|Utilisez les tons bleus pour les outils qui modifient les objets
|Use the Blue tones for tools that modify objects
|-
|-
|style="background-color:#34e0e2;width:5%;|
|style="background-color:#34e0e2;width:5%;|
Line 57: Line 57:
|style="background-color:#06989a;width:5%;|
|style="background-color:#06989a;width:5%;|
|style="background-color:#042a2a;width:5%;|
|style="background-color:#042a2a;width:5%;|
|Utiliser les tonalités sarcelle pour les outils liés aux vues
|Use the Teal tones for view-related tools
|-
|-
|style="background-color:#ef2929;width:5%;|
|style="background-color:#ef2929;width:5%;|
Line 63: Line 63:
|style="background-color:#a40000;width:5%;|
|style="background-color:#a40000;width:5%;|
|style="background-color:#280000;width:5%;|
|style="background-color:#280000;width:5%;|
|Utiliser les tons rouges pour les outils liés à la contrainte
|Use the Red tones for Constraint related tools
|}
|}
{| class="wikitable"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;|
Pourquoi me limiter à ces couleurs?
Why limit myself to these colors?
|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.
|Restricting the colors to a defined palette helps avoid heterogeneous iconography and improves readability when there are many icons.
|-
|-
|How?
|How?
|Installing [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 the palette] is as easy as [https://inkscape.org/en/learn/faq/#how-install-new-extensions-palettes-document-templates-symbol-sets-icon-sets-etc copying it into your Inkscape palette folder].
|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].
|}
|}


===Grid & Stroke Width===
===Grille et Largeur du trait===


[Obligatoirement]
[Obligatory]
FreeCAD Icons are 64px*64px nominal size (Though I like to leave a 2px margin all around to prevent funky antialiasing things from happening on the image edge). When creating or editing an icon, make sure your document size is 64 x 64 with the units being px. This gives you 60px * 60px of useable space.
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|Stay inside the blue area and everything will work out just fine]]
[[File:IconSize.png|center|Restez dans la zone bleue et tout se passera bien]]


It's also strongly recommended to apply at least one grid to the document that has a grid line every pixel and a major grid line every 2 pixels. Feel free to add other grids to help out, but you should have at least that one. You're strokes would then be aligned along the minor grid intersections. (See image)
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.
Strokes should be no ''thinner'' than 2px, with rounded caps and corners in most cases. Strokes can be ''thicker'', but aim for a multiple of two to minimise scaling fuzziness.
[[File:Artwork_Grid.png|center|Orderly grid, all strokes 2px, perfection achieved]]
[[File:Artwork_Grid.png|center|Grille ordonnée, tous les coups 2px, tout est parfaitement réalisé]]


{| class="wikitable"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;|
Pourquoi utiliser cette grille cette taille d'épaisseur ?
Why use this grid and stroke size?
|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.
|For historical reasons, FreeCAD uses a 64px icon that then gets scaled down. Not ideal, but it adds character. As a result, keeping things aligned to a power of two grid with thicknesses that are powers of two helps to avoid or at least mitigate anti-aliasing issues upon rescaling.
|-
|-
|How?
|How?
|Go to "File > Document Properties" and confirm the width, height and units of your page are correct. Then go to the "Grids" tab and click "New", setting the units to "px", "Spacing X" and "Spacing Y" to 1 and "Major grid line every" to 2
|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
|}
|}


===Outline===
===Contour===


[Obligatoirement]
[Obligatory]
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.
Basing yourself on the main color of the icon, ensure that there is a dark outline (of 2px as mentioned earlier). This works in union with the highlight to ensure good form contrast on multiple background tones.
[[File:Draft_Point.png|center|Wow, much clear, so contrast]]
[[File:Draft_Point.png|center|Wow, beaucoup trop clair, tellement contrasté]]


{| class="wikitable"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;
|Pourquoi l'esquisse est-elle nécessaire?
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
|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 ?
|How?
|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.
|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===
===Surligner===


[Fortement conseillé]
[Strongly Advised]
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.
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.]]
[[File:Draft_Move.png|center|Ce point culminant sauvera nos chaussettes sur un fond sombre.]]


{| class="wikitable"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;|
Pourquoi utiliser le point culminant?
Why use the highlight?
|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.
|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 ?
|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===


[Optionnel]
[Optional]
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)
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.]]
[[File:Draft_Clone.png|center|Subtil mais efficace.]]


{| class="wikitable"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;|
Pourquoi utiliser l'éclairage ?
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
|L’éclairage est une autre façon de relier les icônes et de faire en sorte que les niveaux d''[https://en.wikipedia.org/wiki/Lightness éclairage]' servent à améliorer leur lisibilité. Pourvu que le contour et les surlignages soient présents, il peut être considéré comme facultatif
|-
|-
|How?
|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.
|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.
|}
|}


===Closing Remarks===
===Remarques de clôture===


C’est tout - il s’agit de s’assurer qu’il existe un aspect unifié pour tous les icônes.
That's it - that's all there is to making sure that there's a unified look to all the icons.
Remember: '''SALCHO'''
Rappelez-vous: '''SALCHO'''
AVC, alignement, éclairage, couleur, mise en évidence, contour
Stroke, Alignment, Lighting, Color, Highlight, Outline


Here's a collection of tips to be able to check your work:
Voici une collection de conseils pour pouvoir vérifier votre travail:


====Checking Size====
====Vérification de la taille====


Inkscape has a super handy tool to check your icon at various sizes.
Inkscape dispose d'un outil très pratique pour vérifier votre icône à différentes tailles.
Go to "View > Icon Preview..." and it'll show you previews of your icon resized to 16,24,32 and 64px!
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!


====Checking Your Outline====
====Vérification de votre contour====


1. Put your icon on a big rectangle that is the same color as the darkest color in your icon.
1. Placez votre icône sur un grand rectangle de la même couleur que la couleur la plus sombre de votre icône.


2. Still looks OK? Great! Go to step 3. If not, see the frowny face
2. Semble toujours OK ? Génial! Aller à l'étape 3. Sinon, voir la face froncée


3. Faites la même chose mais cette fois en utilisant la couleur la plus claire.
3. Do the same but this time using the lightest color.


4. Semble toujours OK ? Génial! Les contours et les traits surlignés ont été utilisés de manière appropriée !
4. Still looks OK? Great! Outlines and highlights have been used appropriately!
{| class="wikitable"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;|
'''My icon is barely visible!'''
'''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é.
|You have poor form contrast. Double check the outline and highlight, one of these is probably missing or improperly applied.
|}
|}


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


1. Get your icon and export it to either .png or .jpg, whichever you prefer
1. Obtenez votre icône et exportez-la vers .png ou .jpg, selon votre préférence


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)
2. Ouvrez un programme d'image et modifiez-le en niveaux de gris. Dans GIMP par exemple, vous iriez à "Image Mode Niveaux de gris" (Ceci est excellent pour tester les utilisateurs daltoniens)


3.Pouvez-vous encore clairement distinguer des détails internes ? Génial ! Vous avez un bon contraste!
3. Can you still clearly make out any internal details? Great! You have good contrast!
{| class="wikitable"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width: 25%;|
'''Je ne peux pas distinguer tous les détails merveilleux !'''
'''I can't make out all the wonderful detail!'''
|Les couleurs que vous avez choisies ont un contraste de valeur médiocre. Essayez d'utiliser des couleurs plus éloignées dans votre palette à 4 tons. c'est-à-dire qu'un vert surligné à côté d'un surlignage jaune sera difficile à voir, renversez l'une de ces couleurs jusqu'à Base ou Sombre.
|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:Developer Documentation/fr]]

Revision as of 10:10, 17 August 2018

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

Guidelines

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": Stroke, Alignment, Lhighting, Color, Hhighlighting, Outline

Voici un exemple concret mais arbitraire:

Un icône qui a pris toutes ses vitamines
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

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

Couleurs

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

Grille et Largeur du trait

[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
Restez dans la zone bleue et tout se passera bien

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é
Grille ordonnée, tous les coups 2px, tout est parfaitement réalisé

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

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

[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.
Ce point culminant sauvera nos chaussettes sur un fond sombre.

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 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.
Subtil mais efficace.

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.

2. Semble toujours OK ? Génial! Aller à l'étape 3. Sinon, voir la face froncée

3. Faites la même chose mais cette fois en utilisant la couleur la plus claire.

4. Semble toujours OK ? Génial! Les contours et les traits surlignés ont été utilisés de manière appropriée !

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

2. Ouvrez un programme d'image et modifiez-le en niveaux de gris. Dans GIMP par exemple, vous iriez à "Image → Mode → Niveaux de gris" (Ceci est excellent pour tester les utilisateurs daltoniens)

3.Pouvez-vous encore clairement distinguer des détails internes ? Génial ! Vous avez un bon contraste!

Je ne peux pas distinguer tous les détails merveilleux !

Les couleurs que vous avez choisies ont un contraste de valeur médiocre. Essayez d'utiliser des couleurs plus éloignées dans votre palette à 4 tons. c'est-à-dire qu'un vert surligné à côté d'un surlignage jaune sera difficile à voir, renversez l'une de ces couleurs jusqu'à Base ou Sombre.