Illustrationsrichtlinien

Anmerkung: Beispielsymbole findest Du auf der Illustrationen-Seite.

Richtlinien

Einleitung

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

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

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

Farben

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

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.

Gitter & Strichbreite

[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

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

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

[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

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

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

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

	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.

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.

2. Sieht es immer noch OK aus? Großartig! Gehe zu Schritt 3. Wenn nicht, sieh' Dir das gerunzelte Gesicht an

3. Mach' das Gleiche, aber dieses Mal mit der hellsten Farbe.

4. Sieht das immer noch gut aus? Großartig! Außenlinien und Hervorhebungen wurden geeignet benutzt!

Mein Symbol ist kaum sichtbar!

Du hast schlechten Formkontrast. Überprüfe nochmal Außenlinie und Hervorhebung, eins von diesen fehlt oder wurde ungeeignet angewandt.

Prüfung Deines Kontrastes

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

2. Öffne ein Bildprogramm und wandle es in Graustufen um. In GIMP würdest Du beispielsweise "Image > Mode > Graustufen" ausführen (das ist hervorragend geeignet als Test auf farbenblinde Benutzer)

3. Kannst Du immer noch alle internen Details erkennen? Großartig! Du hast guten Kontrast!

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.