Illustrationsrichtlinien

From FreeCAD Documentation
Revision as of 11:59, 23 December 2019 by FuzzyBot (talk | contribs) (Updating to match new version of source page)

Einleitung

Anmerkung: Beispielsymbole findest Du auf der Illustrationen-Seite.

Ein FreeCAD-Symbol besteht aus sechs Elementen, die einfach mit dem unbeholfenen Akronym "SALCHO" bezeichnet werden: Stroke, Alignment, Lighting, Colour, Highlighting, Outline (Strich, Ausrichtung, Beleuchtung, Farbe, Hervorhebung, Kontur)

Hier ist ein konkretes, wenn auch willkürliches Beispiel:

Ein Symbol, das alle seine Vitamine genommen hat
Ein Symbol, das alle seine Vitamine genommen hat
A Die Hervorhebungsfarbe wird für die gesamte Oberfläche benutzt, um von oben hereinfallendes Licht anzudeuten
B Die obligatorische dunkle Außenlinie umgibt die Symbolform, um Formkontrast zu bieten
C Direkt innerhalb der Außenlinie bietet der Hervorhebungsstrich (in der Hervorhebungsfarbe) Kontrast zu dunklen Hintergründen
D Diese Fläche ist hauptsächlich die Basisfarbe, aber ein leichter Verlauf von der Hervorhebung (oben links) zur Basis (unten rechts) vermittelt den Eindruck von Licht, das von links einfällt
E Die Hervorhebung hier ist die Basisfarbe (ein Ton darunter), um den Eindruck zu vermitteln, dass dies die am weitesten vom Licht entfernte Fläche ist
F Diese Fläche ist wie D, geht aber von der Basisfarbe (oben links) nach Dunkel (unten links), um den Eindruck zu vermitteln, dass dies die am weitesten vom Licht entfernte Fläche ist

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.

Die folgenden Abschnitte erklären die Element in einer strukturierteren Weise.

This icon is displayed as follows:

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

Farben

Obligatory

[Obligatorisch] FreeCAD benutzt eine Palette, die an die Tango-Palette angelehnt (adapted) ist. Jede Hauptfarbe kommt in vier Tönen: Hervorhebung, Basis, Dunkel und Außenlinie.

Beispiel einer Vierton-Familie (Chameleon)
Beispiel einer Vierton-Familie (Chameleon)
Eine Auswahl von einigen wichtigen Farben (betrachte die Palette für den vollen Umfang)
Benutze die Gelbtöne für Werkzeuge, die Objekte erzeugen.
Benutze die Blautöne für Werkzeuge, die Objekte verändern.
Benutze die Blaugrüntöne (teal) für ansichtsverwandte Werkzeuge.
Benutze die Rottöne für beschränkungsverwandte Werkzeuge

Warum mich selbst auf diese Farben beschränken?

Die Beschränkung der Farben auf eine definierte Palette hilft dabei, heterogene Ikonographie zu vermeiden und verbessert die Lesbarkeit bei vielen Symbolen.
Wie? Die Installation der Palette ist so einfach wie in Wie installiert man neue Erweiterungen, Paletten, Dokumentvorlagen, Symbol-Sets, Icons usw.? beschrieben.

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.

Gitter & Strichbreite

Obligatory

[Obligatorisch]

FreeCAD-Symbole haben eine nominelle Größe von 64px*64px (obwohl ich lieber eine 2px-Begrenzung rundherum lasse, um Anti-Aliasing an den Bildkanten zu vermeiden). Bei der Erstellung oder Änderung eines Symbols solltest Du sicherstellen, dass die Dokumentgröße 64 x 64 und die Einheit px ist. Das bietet Dir einen nutzbaren Platz von 60px * 60px.
Bleib innerhalb der blauen Fläche und alles wird wunderbar funktionieren
Bleib innerhalb der blauen Fläche und alles wird wunderbar funktionieren

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

Es wird außerdem dringend dazu geraten, mindestens ein Gitter mit einem Abstand von einem Pixel und einem Hauptabstand von 2 Pixeln zu verwenden. Du kannst zusätzlich weitere anlegen, solltest aber mindestens das eine haben. Deine Striche wären dann entlang des untergeordneten Gitter ausgerichtet (siehe Bild).

Striche sollten nicht dünner als 2px sein, in den meisten Fällen mit abgerundeten Enden und Ecken. Striche können dicker sein, aber versuch' ein Vielfaches von Zwei anzustreben, um Skalierungsprobleme zu minimieren.

Ordentliches Gitter, alle Striche 2px, Perfektion erreicht
Ordentliches Gitter, alle Striche 2px, Perfektion erreicht

Grid with strokes that are multiples of 2px.

Warum dieses Gitter und Strichbreite verwenden?

Aus historischen Gründen benutzt FreeCAD ein 64px Symbol, das dann herunterskaliert wird. Nicht ideal, aber es fügt eine Eigenart hinzu (acts character). Als ein Ergebnis vermeidet oder verringert wenigstens die Ausrichtung an einem Gitter mit einem Vielfachen von Zwei mit Strichen in der Dicke eines Vielfachen von Zwei Anti-Aliasing während der Reskalierung.
Wie? Gehe zu "Datei > Dokumenteigenschaften" und bestätige, dass die Breite, Höhe und Einheiten Deiner Seite korrekt sind. Dann gehe zum "Grids"-Reiter und klicke "Neu", setze die Einheiten auf "px", "Abstand X" und "Abstand Y" auf 1 und "Hauptgitterlinien jede" auf 2

Außenlinie

Obligatory

[Obligatorisch] Dich selbst auf die Hauptfarbe des Symbols stützend solltest Du sicherstellen, dass es eine dunkle Außenlinie (von 2px, wie vorher erwähnt) gibt. Dies funktioniert in Verbindung mit der Hervorhebung, um einen guten Kontrast auf verschiedenen Hintergrundtönen sicherzustellen.

Toll, viel besser, so kontrastreich
Toll, viel besser, so kontrastreich

The dark edge of the icon is the outline.

Warum wird die Außenlinie gebraucht?

Die Außenlinie ist das Skelett, an dem alles andere hängt, indem Formkontrast hinzugefügt wird. Die Verwendung der Außenlinie oder der dunklen Farbe hängt von der Situation ab, aber ohne diese Linie wird die Auswahl der Hintergründe, auf denen das Symbol sichtbar ist, stark eingeschränkt
Wie? Lege einfach einen externen Strich von 2px um jedes Teil des Symbols, das an die Hintergrundfarbe angrenzt. Im Fall einer Donut-Form zum Beispiel würdest Du auch das innere Loch bearbeiten. Raste die Knoten Deines Pfades wo immer möglich am Gitter ein, auf die untergeordneten Schnittpunkte zielend.

Hervorhebung

Strongly advised

[Dringend angeraten] Füge mit der Hervorhebungsfarbe einen internen Strich (wieder 2px) hinzu, um die Außenlinie sichtbar zu machen. Auf dunklen Hintergründen wird diese Hervorhebung die Form des Symbols darstellen.

Diese Hervorhebung rettet uns bei einem dunklen Hintergrund.
Diese Hervorhebung rettet uns bei einem dunklen Hintergrund.

The light highlight helps in dark backgrounds.

Warum die Hervorhebung benutzen?

Die Hervorhebung arbeitet in Verbindung mit der Außenlinie zur Verbesserung des Formkontrastes - speziell auf dunklen Hintergründen. Es ist nie eine schlechte Idee, aber wenn Du den Platz nicht hast (auf einer dünnen Linie zum Beispiel), kann Du Dich anders entscheiden, vorausgesetzt Du hast genug Kontrast zwischen der Hauptfarbe und der Außenlinie
Wie? Genau wie bei der Außenlinie lege einen Strich von 2px um die innere Seite der Außenlinie, die Knoten möglichst am Gitter einrastend.

Beleuchtung

Optional

[Optional] Wie bei den Tango-Richtlinien, wenn Du einen Beleuchtungsverlaufseffekt hinzufügen willst, dann versuch' es so aussehen zu lassen, als würde das Licht von links oben kommen. Dies passiert durch hinzufügen der Hervorhebungsfarbe oben links und die Basis- oder dunkle Farbe unten rechts (beachte, dass ich nicht versucht habe, eine Farbe außerhalb der Palette zu verwenden)

Raffiniert, aber effektiv.
Raffiniert, aber effektiv.

Subtle lighting effect coming from top left.

Beleuchtung ist einfach ein weiterer Weg, um Symbole miteinander zu verbiden und sicherzustellen, dass es unterschiedliche Stufen 'value' um ihre Lesbarkeit zu verbessern. Wenn Außenlinie und Hervorhebung vorhanden sind, kann darauf verzichtet werden

Warum Beleuchtung benutzen?

Wie? Setze die Füllung auf einen linearen oder sternförmigen Verlauf (verfügbar in den Strich- und Füllungseinstellungen). Denke daran, dass die Benutzung von "F2" die direkte Auswahl setzt, so dass Du die Knoten des Verlaufs verschieben kannst, damit sie den richtigen Winkel haben.

Recommended recording format

All icons should be created in SVG format with a vector image application, such as Inkscape. This makes it easier to apply changes and derive additional icons in the same application space.

Abschließende Bemerkungen

Das war's - das ist alles, was man braucht, um ein einheitliches Aussehen der Symbole sicherzustellen. Denk' dran: SALCHO Stroke, Alignment, Lighting, Colour, Highlight, Outline

Hier ist eine Sammlung von Tipps, um Deine Arbeit zu überprüfen:

Größe prüfen

Inkscape hat ein superpraktisches Werkzeug zur Prüfung Deines Symbols bei verschiedenen Größen. Gehe zu "Ansicht > Symbolvoransicht..." und Du wirst Voransichten Deines Symbols in 16, 24, 32 und 64px sehen!

Prüfung Deiner Außenlinie

1. Setze Dein Symbol in ein großes Rechteck in der gleichen Farbe wie die dunkelste Farbe Deines Symbols.

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.

Prüfung Deines Kontrastes

1. Nimm Dein Symbol und exportiere es zu .png oder .jpg, was immer Du bevorzugst

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.

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.