Illustrationsrichtlinien

From FreeCAD Documentation
Revision as of 12:34, 4 August 2021 by Maker (talk | contribs) (Created page with "{{Caption|Zeichne das Symbol innerhalb des blauen Bereichs und alles wird gut funktionieren.}}")

Einführung

Hinweis: für alle Symbole im Quellbaum, siehe Illustrationen.

Ein FreeCAD Symbol wird aus 6 Elementen zusammengesetzt, die man sich mit dem Akronym SALCHO merken kann: Stroke, Alignment, Lighting, Color, Highlighting, Outline. (deutsch: Strich, Ausrichtung, Beleuchtung, Farbe, Hervorhebung, Kontur)

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

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

In den folgenden Abschnitten werden diese Elemente ausführlicher erläutert.

Dieses Symbol wird wie folgt angezeigt:

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

Farben

Obligatorisch

FreeCAD verwendet eine Palette, die der Tango Palette nachempfunden ist. Jede Hauptfarbe gibt es in 4 Farbtönen: Highlight, Base, Dark und Outline. Beachte, dass die Umrisslinie nicht komplett schwarz ist, sondern eine sehr dunkle Variante der Grundfarbe.

Beispiel für eine 4 Ton Farbfamilie (Chamäleon)

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 und Strichbreite

Obligatorisch

FreeCAD Symbole haben eine nominale Größe von 64 Pixeln, sowohl in der Breite als auch in der Höhe. Bei der Erstellung oder Bearbeitung, vergewissere dich, dass die Dokumentgröße 64 x 64 beträgt, wobei die Einheit Pixel (px) ist. Ein innerer Rand von 2px Leerraum rund um den Dokumentbereich ist nützlich, da er Effekte wie Anti-Aliasing (Verwischung der Kanten) verhindert. Das heißt, der nutzbare Raum für das Symbol sollte als 60 x 60 betrachtet werden, und die Ränder sollten leer gelassen werden.

Zeichne das Symbol innerhalb des blauen Bereichs und alles wird gut 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
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

Obligatorisch

[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

Dringend empfohlen

Füge einen internen Strich von 2px unter Verwendung der Hervorhebungsfarbe hinzu, um zu helfen, dass die Außenlinie hervorspringt. Auf dunklen Hintergründen ist es diese Hervorhebung, die dem Symbol die Form gibt.

Die helle Hervorhebung hilft bei dunklen Hintergründen.

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.

Empfohlenes Aufzeichnungsformat

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.

When committing icons to be used directly by FreeCAD (in a *.qrc file), save them as "Plain SVG". This will reduce the icon size and save the disk and memory space.

Abschließende Bemerkungen

Denke daran:: SALCHO, Stroke, Alignment, Lighting, Colour, Highlight, Outline

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

Größe prüfen

Inkscape verfügt über ein hilfreiches Werkzeug, um dein Symbol in verschiedenen Größen zu prüfen. Gehe zu Ansicht → Symbolvorschau und es wird dir Voransichten deines Symbols geändert auf 16, 24, 32 und 64 Pixel anzeigen.

Prüfung Deiner Umrißlinie

  1. Setze dein Symbol auf ein großes Rechteck, das die gleiche Farbe hat wie die dunkelste Farbe deines Symbols.
  2. Sieht das immer noch gut aus? Prima! Gehe zum nächsten Schritt. Wenn nicht, passe die Hervorhebung an.
  3. Mache dasselbe, aber dieses Mal mit der hellsten Farbe.
  4. Sieht das immer noch gut aus? Sehr gut. Umrisse und Hervorhebungen wurden richtig eingesetzt. Andernfalls passe die Umrißlinie an.

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.

Template:Artwork/de