Artwork Guidelines/de: Difference between revisions

From FreeCAD Documentation
No edit summary
No edit summary
 
(38 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<languages/>
<languages/>


<span id="Introduction"></span>
==Einführung==
==Einleitung==


{{Emphasis|Hinweis:}} für alle Symbole im Quellbaum, siehe [[Artwork/de|Illustrationen]].
{{Emphasis|Hinweis:}} für alle Symbole im Quellbaum, siehe [[Artwork/de|Grafik]].


Ein FreeCAD Symbol wird aus 6 Elementen zusammengesetzt, die man sich mit dem Akronym SALCHO merken kann: '''S'''troke, '''A'''lignment, '''L'''ighting, '''C'''olor, '''H'''ighlighting, '''O'''utline.
Ein FreeCAD Symbol wird aus 6 Elementen zusammengesetzt, die man sich mit dem Akronym SALCHO merken kann: '''S'''troke, '''A'''lignment, '''L'''ighting, '''C'''olor, '''H'''ighlighting, '''O'''utline.
Line 38: Line 39:
{| class="wikitable" style="width:70%;"
{| class="wikitable" style="width:70%;"
| style="width: 8%; text-align: center;" | [[File:FreeCAD_icon_example.svg|64px]]
| style="width: 8%; text-align: center;" | [[File:FreeCAD_icon_example.svg|64px]]
| 64 px, original size, large buttons.
| 64 px, Originalgröße, große Schaltflächen.
|-
|-
| style="text-align: center;" | [[File:FreeCAD_icon_example.svg|32px]]
| style="text-align: center;" | [[File:FreeCAD_icon_example.svg|32px]]
| 32 px, medium size, regular buttons.
| 32 px, mittlere Größe, normale Schaltflächen.
|-
|-
| style="text-align: center;" | [[File:FreeCAD_icon_example.svg|16px]]
| style="text-align: center;" | [[File:FreeCAD_icon_example.svg|16px]]
| 16 px, small size, as it appears in the [[tree view|tree view]].
| 16 px, geringe Größe, wie sie in der [[Tree_view/de|Baumansicht]] erscheint.
|}
|}


<span id="Colors"></span>
==Farben==
==Farben==


Line 56: Line 58:
{{Caption|Beispiel für eine 4 Ton Farbfamilie (Chamäleon)}}
{{Caption|Beispiel für eine 4 Ton Farbfamilie (Chamäleon)}}


See [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 FreeCAD palette] for the full range. A selection of some key colors.
Siehe [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 FreeCAD Palette] für die gesamte Bandbreite. Eine Auswahl einiger Schlüsselfarben.
{| class="wikitable" style="width:70%;"
{| class="wikitable" style="width:70%;"
|style="background-color:#fce94f; width:4%;"|
|style="background-color:#fce94f; width:4%;"|
Line 62: Line 64:
|style="background-color:#c4a000; width:4%;"|
|style="background-color:#c4a000; width:4%;"|
|style="background-color:#302b00; width:4%;"|
|style="background-color:#302b00; width:4%;"|
|Verwende die gelben Farbtöne für Werkzeuge, die Objekte erstellen; für ein Beispiel siehe [[Part_Workbench/de|Teil]] und [[Draft_Workbench/de|Entwurf Arbeitsbereich]].
|Use the Yellow tones for tools that create objects; for an example, see [[Part Workbench|Part]] and [[Draft Workbench|Draft Workbenches]].
|-
|-
|style="background-color:#729fcf;|
|style="background-color:#729fcf;|
Line 68: Line 70:
|style="background-color:#204a87;|
|style="background-color:#204a87;|
|style="background-color:#0b1521;|
|style="background-color:#0b1521;|
|Verwende die Blautöne für Werkzeuge, die Objekte verändern; für ein Beispiel siehe [[Part_Workbench/de|Teil]] und [[Draft_Workbench/de|Entwurf Arbeitsbereich]].
|Use the Blue tones for tools that modify objects; for an example, see [[Part Workbench|Part]] and [[Draft Workbench|Draft Workbenches]].
|-
|-
|style="background-color:#34e0e2|
|style="background-color:#34e0e2|
Line 74: Line 76:
|style="background-color:#06989a|
|style="background-color:#06989a|
|style="background-color:#042a2a|
|style="background-color:#042a2a|
|Use the Teal tones for view-related tools; for an example, see the [[Std_View_Menu|View Menu]].
|Verwende die blaugrünen Farbtöne für ansichtsbezogene Werkzeuge; für ein Beispiel siehe das [[Std_View_Menu/de|Ansichtsmenü]].
|-
|-
|style="background-color:#ef2929|
|style="background-color:#ef2929|
Line 80: Line 82:
|style="background-color:#a40000|
|style="background-color:#a40000|
|style="background-color:#280000|
|style="background-color:#280000|
|Use the Red tones for Constraint related tools; for an example, see [[Sketcher Workbench|Sketcher Workbench]].
|Verwende die roten Töne für Werkzeuge, die sich auf Beschränkungen beziehen; für ein Beispiel siehe [[Sketcher Workbench/de|Skizzierer Arbeitsbereich]].
|}
|}


{| class="wikitable" style="width:70%;"
{| class="wikitable" style="width:70%;"
|style="width: 25%;|Why limit myself to these colors?
|style="width: 25%;|Warum sollte ich mich auf diese Farben begrenzen?
|Die Einschränkung auf eine bestimmte Farbpalette hilft, eine heterogene Ikonographie zu vermeiden und verbessert die Lesbarkeit bei vielen Symbolen.
|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?
|Wie verwende ich die FreeCAD Palette?
|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].
|Die Installation [https://drive.google.com/open?id=0B_xxY57wUEV-RWNaMHV2OGpoY00 der Palette] ist so einfach wie [https://inkscape.org/en/learn/faq/#how-install-new-extensions-palettes-document-templates-symbol-sets-icon-sets-etc Kopiere dir sie in deinen Inkscape Palettenordner].
|}
|}


<span id="Grid_and_stroke_width"></span>
==Gitter und Strichbreite==
==Gitter und Strichbreite==


{{Emphasis|Obligatorisch}}
{{Emphasis|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.
<div class="mw-translate-fuzzy">
[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. [[File:IconSize.png|center|Bleib innerhalb der blauen Fläche und alles wird wunderbar funktionieren]]
</div>


[[File:FreeCAD_icon_size.svg|128px]]
[[File:FreeCAD_icon_size.svg|128px]]
{{Caption|Draw the icon inside the blue area and everything will work out fine.}}
{{Caption|Zeichne das Symbol innerhalb des blauen Bereichs und alles wird gut funktionieren.}}


Es wird auch dringend empfohlen, ein visuelles Gitter zu verwenden, das alle Pixel eine Nebenrasterlinie und alle 2 Pixel eine Hauptrasterlinie aufweist. Die Striche des Symbols sollten an den Schnittpunkten des Nebenrasters ausgerichtet werden.
<div class="mw-translate-fuzzy">
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).
</div>


Striche sollten nicht "dünner" als 2px sein, mit abgerundeten Köpfen und Ecken in den meisten Fällen. Striche können ''dicker'' sein, aber sie sollten vorzugsweise ein Vielfaches von 2px sein, um die Skalierung Unschärfe zu minimieren.
<div class="mw-translate-fuzzy">
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.
[[File:Artwork_Grid.png|center|Ordentliches Gitter, alle Striche 2px, Perfektion erreicht]]
</div>


[[File:FreeCAD_icon_stroke_2px.svg|320px]]
[[File:FreeCAD_icon_stroke_2px.svg|320px]]
{{Caption|Grid with strokes that are multiples of 2px.}}
{{Caption|Raster mit Strichen, die ein Vielfaches von 2px sind.}}


<div class="mw-translate-fuzzy">
{| class="wikitable" style="width:70%;"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width:25%;"|Warum dieses Gitter und Strichbreite verwenden?
|Aus historischen Gründen verwendet FreeCAD ein 64x64 Symbol, das dann verkleinert wird. Das ist nicht ideal, aber es verleiht dem Ganzen Charakter. Infolgedessen hilft die Ausrichtung an einem Zweierpotenzraster mit Dicken, die Zweierpotenzen sind, Anti-Aliasing Probleme bei der Neuskalierung zu vermeiden oder zumindest abzuschwächen.
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 kann ich das einhalten?
|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
|Wenn du Inkscape verwendest, gehe zu {{MenuCommand|Datei Dokumenteigenschaften}} und stelle sicher, dass die Breite, Höhe und Einheiten deiner Seite korrekt sind. Dann gehe auf den {{MenuCommand|Gitter}} reiter, klicke auf {{Button|Neu}}, setze die Einheiten auf {{incode|px}}, {{incode|Abstand X}} und {{incode|Abstand Y}} auf 1 und {{incode|Hauptgitterlinie jede}} auf 2.
|}
|}
</div>


<span id="Outline"></span>
==Außenlinie==
==Außenlinie==


{{Emphasis|Obligatorisch}}
{{Emphasis|Obligatorisch}}


Gestützt auf die Hauptfarbe des Symbols stelle sicher, dass es, wie bereits erwähnt, eine dunkle Umrandung von 2 px gibt. Dies funktioniert zusammen mit der Hervorhebung, um einen guten Formkontrast auf mehreren Hintergrundtönen zu gewährleisten.
<div class="mw-translate-fuzzy">
[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.
[[File:Draft_Point.png|center|Toll, viel besser, so kontrastreich]]
</div>


[[File:Draft_Point.svg|x128px]] [[File:Draft_Point_backgrounds.svg|x128px]]
[[File:Draft_Point.svg|x128px]] [[File:Draft_Point_backgrounds.svg|x128px]]
{{Caption|The dark edge of the icon is the outline.}}
{{Caption|Der dunkle Rand des Symbols ist der Umriss.}}


<div class="mw-translate-fuzzy">
{| class="wikitable" style="width:70%;"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width:25%;"|Warum wird die Außenlinie gebraucht?
|Die Umrisslinie ist das Skelett, an dem alles andere hängt, indem sie den Formkontrast erhöht. Die Verwendung der Umrissfarbe oder der dunklen Farbe hängt von der jeweiligen Situation ab, aber ohne diese Linie wird die Auswahl an Hintergründen, auf denen das Symbol sichtbar ist, drastisch begrenzt
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 kann ich dies beheben?
|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.
|Füge einfach um jeden Teil des Symbols, der an die Hintergrundfarbe angrenzt, einen Strich von 2 px hinzu, d. h. die Umrisslinie ist für externe Striche. Bei Formen, die in der Mitte ein Loch haben, z. B. ein Donut, sollte der Umriss auch um das innere Loch gelegt werden. Richte die Knoten deines Pfades so weit wie möglich am Raster aus, die auf die kleineren Gitterschnittpunkte abzielen.
|}
|}
</div>


<span id="Highlight"></span>
==Hervorhebung==
==Hervorhebung==


Line 161: Line 148:
{{Caption|Die helle Hervorhebung hilft bei dunklen Hintergründen.}}
{{Caption|Die helle Hervorhebung hilft bei dunklen Hintergründen.}}


<div class="mw-translate-fuzzy">
{| class="wikitable" style="width:70%;"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width:25%;"|Warum die Hervorhebung benutzen?
|Die Hervorhebung arbeitet mit der Kontur zusammen, um den Kontrast der Form zu verbessern, insbesondere auf dunklen Hintergründen. Es ist nie eine schlechte Idee, aber wenn du nicht den nötigen Platz hast, z. B. wenn du eine sehr dünne Linie hast, kannst du darauf verzichten, vorausgesetzt, du hast für einen ausreichenden Kontrast zwischen der Hauptfarbe und dem Umriss gesorgt.
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 kann ich das einhalten?
|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.
|Ziehe wie bei der Kontur einfach einen Strich von 2 px um die Innenseite der Kontur, wobei du die Knoten nach Möglichkeit am Raster fängst und auf die kleineren Rasterschnittpunkte abzielst.
|}
|}
</div>


<span id="Lighting"></span>
==Beleuchtung==
==Beleuchtung==


{{Emphasis|Optional}}
{{Emphasis|Optional}}


Gemäß den Tango Richtlinien solltest du beim Hinzufügen eines Beleuchtungsverlaufseffekts versuchen, es so aussehen zu lassen, als käme das Licht von links oben. Dazu fügst du die Farbe für die Lichter oben links und die Farbe für die Basis oder Dunkelheit unten rechts hinzu. Beachte, dass nur Palettenfarben verwendet werden.
<div class="mw-translate-fuzzy">
[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)
[[File:Draft_Clone.png|center|Raffiniert, aber effektiv.]]
</div>


[[File:Draft_Clone.svg|x128px]] [[File:Draft_Clone_backgrounds.svg|x128px]]
[[File:Draft_Clone.svg|x128px]] [[File:Draft_Clone_backgrounds.svg|x128px]]
{{Caption|Subtle lighting effect coming from top left.}}
{{Caption|Subtiler Lichteffekt von links oben kommend.}}


<div class="mw-translate-fuzzy">
{| class="wikitable" style="width:70%;"
{| class="wikitable"
|-
|-
|style="width: 25%;|
|style="width:25%;|Warum Beleuchtung verwenden?
|Beleuchtung ist einfach ein weiterer Weg, um Symbole miteinander zu verbiden und sicherzustellen, dass es unterschiedliche Stufen '[https://en.wikipedia.org/wiki/Lightness value]' um ihre Lesbarkeit zu verbessern. Wenn Außenlinie und Hervorhebung vorhanden sind, kann darauf verzichtet werden
|Beleuchtung ist nur eine weitere Möglichkeit, Symbole miteinander zu verbinden und sicherzustellen, dass es verschiedene Stufen von [https://en.wikipedia.org/wiki/Lightness "value"] gibt, um ihre Lesbarkeit zu verbessern. Vorausgesetzt, der Umriss und die Hervorhebung sind vorhanden, kann dies als optional betrachtet werden.
Warum Beleuchtung benutzen?
|-
|-
|Wie kann ich das einhalten?
|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.
|Stelle die Füllung auf einen linearen oder radialen Farbverlauf ein. In Inkscape ist dies in den Strich- und Fülleinstellungen möglich; mit "F2" kann man die Knoten des Farbverlaufs verschieben, um sicherzustellen, dass sie im richtigen Winkel stehen.
|}
|}
</div>


<span id="Recommended_recording_format"></span>
== Empfohlenes Aufzeichnungsformat ==
== Empfohlenes Aufzeichnungsformat ==


All icons should be created in [[SVG|SVG]] format with a vector image application, such as [http://inkscape.org Inkscape].
Alle Symbole sollten im Format [[SVG/de|SVG]] mit einer Vektorbildanwendung, wie beispielsweise [http://inkscape.org Inkscape], erstellt werden.
Dies erleichtert die Anwendung von Änderungen und die Ableitung zusätzlicher Symbole im selben Anwendungsbereich.
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.
Wenn Symbole für die direkte Verwendung durch FreeCAD (in einer *.qrc-Datei) übertragen werden, speichere sie als "Reines SVG". Dies reduziert die Größe des Symbols und spart Festplatten- und Speicherplatz.


<span id="Closing_remarks"></span>
==Abschließende Bemerkungen==
==Abschließende Bemerkungen==


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


Hier sind einige Tips, um Deine Arbeit zu überprüfen:
<div class="mw-translate-fuzzy">
Hier ist eine Sammlung von Tipps, um Deine Arbeit zu überprüfen:
</div>


<span id="Checking_size"></span>
===Größe prüfen===
===Größe prüfen===


Inkscape verfügt über ein praktisches Werkzeug, um dein Symbol in verschiedenen Größen zu prüfen. Gehe zu {{MenuCommand|Ansicht → Symbolvorschau...}} und es wird dir Voransichten deines Symbols geändert auf 16, 24, 32 und 64 Pixel anzeigen.
<div class="mw-translate-fuzzy">
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!
</div>


<span id="Checking_your_outline"></span>
<div class="mw-translate-fuzzy">
====Prüfung Deiner Außenlinie====
===Prüfung Deiner Umrißlinie===
</div>


# Setze dein Symbol auf ein großes Rechteck, das die gleiche Farbe hat wie die dunkelste Farbe deines Symbols.
<div class="mw-translate-fuzzy">
# Sieht das immer noch gut aus? Prima! Gehe zum nächsten Schritt. Wenn nicht, passe die Hervorhebung an.
1. Setze Dein Symbol in ein großes Rechteck in der gleichen Farbe wie die dunkelste Farbe Deines Symbols.
# Mache dasselbe, aber dieses Mal mit der hellsten Farbe.
</div>
# Sieht das immer noch gut aus? Sehr gut. Umrisse und Hervorhebungen wurden richtig eingesetzt. Andernfalls passe die Umrißlinie an.


[[File:Draft_Move_backgrounds_outline.svg|x128px]]
[[File:Draft_Move_backgrounds_outline.svg|x128px]]
{{Caption|Testing the icon against the darkest and lightest colors as background}}
{{Caption|Testen des Symbols vor der dunkelsten und der hellsten Farbe als Hintergrund}}


{| class="wikitable" style="width:70%;"
{| class="wikitable" style="width:70%;"
|-
|-
|style="width: 25%;"|My icon is barely visible.
|style="width: 25%;"|Mein Symbol ist kaum sichtbar.
|Du hast einen schlechten Formkontrast. Überprüfe den Umriss und die Hervorhebung. Wahrscheinlich fehlt eines der beiden Elemente oder ist nicht richtig angewendet.
|You have poor form contrast. Double check the outline and highlight, one of these is probably missing or improperly applied.
|}
|}


<span id="Checking_your_contrast"></span>
<div class="mw-translate-fuzzy">
====Prüfung Deines Kontrastes====
===Prüfung Deines Kontrastes===
</div>


# Exportiere dein Symbol von SVG in ein Bitmap Format, wie {{incode|.png}} oder {{incode|.jpg}}.
<div class="mw-translate-fuzzy">
# Lade dein Bitmap in ein Bildprogramm und ändere es in Graustufen. In GIMP würdest du zu {{MenuCommand|Bild → Modus→ Graustufen}} gehen.
1. Nimm Dein Symbol und exportiere es zu .png oder .jpg, was immer Du bevorzugst
# Inkscape erlaubt dir das SVG direkt mit {{MenuCommand|Erweiterungen → Farbe → Graustufen}} in Graustufen umzuwandeln.
</div>
# Kannst du die internen Details noch klar erkennen? Sehr gut. Der Kontrast ist gut.


Ein Graustufenbild erlaubt dir Kontrastprobleme leichter zu erkennen, da nur eine Mischung aus Schwarz und Weiß vorhanden ist. Das Testen von Graustufenbildern ist auch für farbenblinde Benutzer von Vorteil. Wenn sie die Details in einem Graustufenbild erkennen können, dann ist der Kontrast des vollfarbigen Bildes wahrscheinlich auch gut.
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.


[[File:Draft_Move_contrast_grayscale.svg|x128px]]
[[File:Draft_Move_contrast_grayscale.svg|x128px]]
{{Caption|Testing the icon's contrast in grayscale}}
{{Caption|Prüfung des Symbolkontrasts in Graustufen}}


{| class="wikitable" style="width:70%;"
{| class="wikitable" style="width:70%;"
|-
|-
|style="width: 25%;"|I can't make out all the details.
|style="width: 25%;"|Ich kann nicht alle Details ausmachen.
|Die von Ihnen gewählten Farben haben einen schlechten Wertkontrast. Versuche, Farben zu verwenden, die in deiner 4 Ton Palette weiter voneinander entfernt sind, d. h. ein helles Grün neben einem hellen Gelb wird schwer zu erkennen sein.
|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.
|}
|}



<div class="mw-translate-fuzzy">
[[Category:Developer Documentation/de]]
[[Category:Artwork{{#translation:}}]]
</div>
[[Category:Developer Documentation{{#translation:}}]]
[[Category:Developer Documentation{{#translation:}}]]

Latest revision as of 19:40, 25 November 2023

Einleitung

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

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, Originalgröße, große Schaltflächen.
32 px, mittlere Größe, normale Schaltflächen.
16 px, geringe Größe, wie sie in der Baumansicht erscheint.

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)

Siehe FreeCAD Palette für die gesamte Bandbreite. Eine Auswahl einiger Schlüsselfarben.

Verwende die gelben Farbtöne für Werkzeuge, die Objekte erstellen; für ein Beispiel siehe Teil und Entwurf Arbeitsbereich.
Verwende die Blautöne für Werkzeuge, die Objekte verändern; für ein Beispiel siehe Teil und Entwurf Arbeitsbereich.
Verwende die blaugrünen Farbtöne für ansichtsbezogene Werkzeuge; für ein Beispiel siehe das Ansichtsmenü.
Verwende die roten Töne für Werkzeuge, die sich auf Beschränkungen beziehen; für ein Beispiel siehe Skizzierer Arbeitsbereich.
Warum sollte ich mich auf diese Farben begrenzen? Die Einschränkung auf eine bestimmte Farbpalette hilft, eine heterogene Ikonographie zu vermeiden und verbessert die Lesbarkeit bei vielen Symbolen.
Wie verwende ich die FreeCAD Palette? Die Installation der Palette ist so einfach wie Kopiere dir sie in deinen Inkscape Palettenordner.

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 auch dringend empfohlen, ein visuelles Gitter zu verwenden, das alle Pixel eine Nebenrasterlinie und alle 2 Pixel eine Hauptrasterlinie aufweist. Die Striche des Symbols sollten an den Schnittpunkten des Nebenrasters ausgerichtet werden.

Striche sollten nicht "dünner" als 2px sein, mit abgerundeten Köpfen und Ecken in den meisten Fällen. Striche können dicker sein, aber sie sollten vorzugsweise ein Vielfaches von 2px sein, um die Skalierung Unschärfe zu minimieren.

Raster mit Strichen, die ein Vielfaches von 2px sind.

Warum dieses Gitter und Strichbreite verwenden? Aus historischen Gründen verwendet FreeCAD ein 64x64 Symbol, das dann verkleinert wird. Das ist nicht ideal, aber es verleiht dem Ganzen Charakter. Infolgedessen hilft die Ausrichtung an einem Zweierpotenzraster mit Dicken, die Zweierpotenzen sind, Anti-Aliasing Probleme bei der Neuskalierung zu vermeiden oder zumindest abzuschwächen.
Wie kann ich das einhalten? Wenn du Inkscape verwendest, gehe zu Datei → Dokumenteigenschaften und stelle sicher, dass die Breite, Höhe und Einheiten deiner Seite korrekt sind. Dann gehe auf den Gitter reiter, klicke auf Neu, setze die Einheiten auf px, Abstand X und Abstand Y auf 1 und Hauptgitterlinie jede auf 2.

Außenlinie

Obligatorisch

Gestützt auf die Hauptfarbe des Symbols stelle sicher, dass es, wie bereits erwähnt, eine dunkle Umrandung von 2 px gibt. Dies funktioniert zusammen mit der Hervorhebung, um einen guten Formkontrast auf mehreren Hintergrundtönen zu gewährleisten.

Der dunkle Rand des Symbols ist der Umriss.

Warum wird die Außenlinie gebraucht? Die Umrisslinie ist das Skelett, an dem alles andere hängt, indem sie den Formkontrast erhöht. Die Verwendung der Umrissfarbe oder der dunklen Farbe hängt von der jeweiligen Situation ab, aber ohne diese Linie wird die Auswahl an Hintergründen, auf denen das Symbol sichtbar ist, drastisch begrenzt
Wie kann ich dies beheben? Füge einfach um jeden Teil des Symbols, der an die Hintergrundfarbe angrenzt, einen Strich von 2 px hinzu, d. h. die Umrisslinie ist für externe Striche. Bei Formen, die in der Mitte ein Loch haben, z. B. ein Donut, sollte der Umriss auch um das innere Loch gelegt werden. Richte die Knoten deines Pfades so weit wie möglich am Raster aus, die auf die kleineren Gitterschnittpunkte abzielen.

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 mit der Kontur zusammen, um den Kontrast der Form zu verbessern, insbesondere auf dunklen Hintergründen. Es ist nie eine schlechte Idee, aber wenn du nicht den nötigen Platz hast, z. B. wenn du eine sehr dünne Linie hast, kannst du darauf verzichten, vorausgesetzt, du hast für einen ausreichenden Kontrast zwischen der Hauptfarbe und dem Umriss gesorgt.
Wie kann ich das einhalten? Ziehe wie bei der Kontur einfach einen Strich von 2 px um die Innenseite der Kontur, wobei du die Knoten nach Möglichkeit am Raster fängst und auf die kleineren Rasterschnittpunkte abzielst.

Beleuchtung

Optional

Gemäß den Tango Richtlinien solltest du beim Hinzufügen eines Beleuchtungsverlaufseffekts versuchen, es so aussehen zu lassen, als käme das Licht von links oben. Dazu fügst du die Farbe für die Lichter oben links und die Farbe für die Basis oder Dunkelheit unten rechts hinzu. Beachte, dass nur Palettenfarben verwendet werden.

Subtiler Lichteffekt von links oben kommend.

Warum Beleuchtung verwenden? Beleuchtung ist nur eine weitere Möglichkeit, Symbole miteinander zu verbinden und sicherzustellen, dass es verschiedene Stufen von "value" gibt, um ihre Lesbarkeit zu verbessern. Vorausgesetzt, der Umriss und die Hervorhebung sind vorhanden, kann dies als optional betrachtet werden.
Wie kann ich das einhalten? Stelle die Füllung auf einen linearen oder radialen Farbverlauf ein. In Inkscape ist dies in den Strich- und Fülleinstellungen möglich; mit "F2" kann man die Knoten des Farbverlaufs verschieben, um sicherzustellen, dass sie im richtigen Winkel stehen.

Empfohlenes Aufzeichnungsformat

Alle Symbole sollten im Format SVG mit einer Vektorbildanwendung, wie beispielsweise Inkscape, erstellt werden. Dies erleichtert die Anwendung von Änderungen und die Ableitung zusätzlicher Symbole im selben Anwendungsbereich.

Wenn Symbole für die direkte Verwendung durch FreeCAD (in einer *.qrc-Datei) übertragen werden, speichere sie als "Reines SVG". Dies reduziert die Größe des Symbols und spart Festplatten- und Speicherplatz.

Abschließende Bemerkungen

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

Hier sind einige Tips, um Deine Arbeit zu überprüfen:

Größe prüfen

Inkscape verfügt über ein praktisches 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.

Testen des Symbols vor der dunkelsten und der hellsten Farbe als Hintergrund

Mein Symbol ist kaum sichtbar. Du hast einen schlechten Formkontrast. Überprüfe den Umriss und die Hervorhebung. Wahrscheinlich fehlt eines der beiden Elemente oder ist nicht richtig angewendet.

Prüfung Deines Kontrastes

  1. Exportiere dein Symbol von SVG in ein Bitmap Format, wie .png oder .jpg.
  2. Lade dein Bitmap in ein Bildprogramm und ändere es in Graustufen. In GIMP würdest du zu Bild → Modus→ Graustufen gehen.
  3. Inkscape erlaubt dir das SVG direkt mit Erweiterungen → Farbe → Graustufen in Graustufen umzuwandeln.
  4. Kannst du die internen Details noch klar erkennen? Sehr gut. Der Kontrast ist gut.

Ein Graustufenbild erlaubt dir Kontrastprobleme leichter zu erkennen, da nur eine Mischung aus Schwarz und Weiß vorhanden ist. Das Testen von Graustufenbildern ist auch für farbenblinde Benutzer von Vorteil. Wenn sie die Details in einem Graustufenbild erkennen können, dann ist der Kontrast des vollfarbigen Bildes wahrscheinlich auch gut.

Prüfung des Symbolkontrasts in Graustufen

Ich kann nicht alle Details ausmachen. Die von Ihnen gewählten Farben haben einen schlechten Wertkontrast. Versuche, Farben zu verwenden, die in deiner 4 Ton Palette weiter voneinander entfernt sind, d. h. ein helles Grün neben einem hellen Gelb wird schwer zu erkennen sein.