Bildbearbeitung Tutorials

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing


Farbharmonien in Affinity Photo und Designer!

Ahadesign Tutorials

farbharmonien-menueEgal ob Bildbearbeitung, Grafikdesign oder Webdesign, überall trifft man auf Werke, welche farblich harmonisch gestaltet sind und deshalb besonders angenehm sowie durch passende Akzente interessant wirken.

Um auch ohne großes Fachwissen Farb-Harmonien einsetzen zu können, bieten die Affinity-Programme automatische Möglichkeiten, welche sehr einfach nutzbar sind. Nachfolgend wird erläutert, wie die Arbeit mit den automatischen Farbharmonien in den Affinity-Programmen funktioniert, was die Harmonien bewirken und was die Begriffe bedeuten.

Farbverteilung hinzufügen!

farbton-saettigung

Egal welches Projekt gerade ansteht. In der Regel möchte man eine harmonische Wirkung erzielen oder Bereiche besonders hervorheben. Ein Beispiel wäre eine Website, wo Header, Footer, Seitenleisten und Inhaltsbereiche sowie Schrift, einfach zusammenpassen müssen und vielleicht eine zusätzliche Werbegrafik oder auch das Logo, besondere Aufmerksamkeit erregen soll. Weitere Beispiele wären Flyer, Plakate, Grußkarten oder einfach eine Grafik für das Internet usw.

Das funktioniert natürlich nicht, wenn willkürlich Farben zusammengestellt werden, die sich im schlechtesten Fall auch noch beißen. Der erfahrene Designer könnte mit einer intuitiven Farbwahl vielleicht ganz gut fahren. Besser sind aber Hilfsmittel, welche Farbharmonien nach lange bewährten Regeln bieten.

Manche Software-Applikationen für Design und/oder Bildbearbeitung haben solche Tools bereits an Board. So auch die Affinity-Programme. Auf Werkzeuge von Drittanbietern kann somit bei vielen Projekten verzichtet werden, wenn auch nicht unbedingt in jedem Fall. Am Beispiel von Affinity Photo soll geklärt werden, was es mit den Farbharmonien aufsich hat. In Affinity Designer kann alles ganz genauso nachvollzogen werden, die beiden Programme unterscheiden sich hier nicht.

Dokument einrichten

affinityphoto-dokument-neu

Zunächst wird in Affinity Photo über Datei -> Neu ein neues Dokument geöffnet. Hier im Beispiel ein transparentes Dokument vom Typ Web mit der Einheit Pixel und dem Farbformat RGB. Es könnte aber auch einfach ein Foto geöffnet werden. Eigentlich ist das für die nachfolgenden Beschreibungen egal.

affinityphoto-farbe-farbfelderEs wird davon ausgegangen, dass die Paletten Farbe und Farbfelder eingeblendet sind. Sollte das nicht der Fall sein, können diese Paletten über das Menü Ansicht -> Studio eingeblendet werden. Nun sollte zunächst eine Basisfarbe definiert werden, aus welcher später die Harmonien abgeleitet werden. Das könnte die Farbe eines Website-Headers und dergleichen sein.

Standardmäßig sind bereits einige Programmpaletten im Register Farbfelder wie z.B. Farben vorhanden, aus denen man sich bedienen kann. Entweder holt man sich hier eine gewünschte Farbe aus einer der Paletten, oder nimmt mithilfe der Pipette eine Farbe auf, was ja auch außerhalb des Programmfensters funktioniert. Oder man mischt sich eine Farbe über das Register Farbe. Im Register Farbfelder kann dann das Paletten-Icon rechts neben der Palettenbezeichnung geklickt werden und die Farbe wird der aktuellen Palette hinzugefügt.

affinityphoto-programmpalette-neuBesser ist jedoch das Anlegen einer neuen Palette, nachdem die Basisfarbe erstellt bzw. gewählt wurde. Das geht recht schnell über das Menü des Farbfelder-Registers mit dem Befehl Programmpalette hinzufügen. Natürlich könnte man auch nur eine Dokumentpalette hinzufügen, welche dann aber nur für dieses eine Dokument verfügbar ist.

Farbe und Palette anlegen

affinityphoto-farbe-mischenHier im Beispiel wird also zunächst im Register Farbe ein Rot mit R: 255, G: 0 und B: 0 definiert. Dann wird in das Register Farbfelder gewechselt und über das dortige Menü eine neue Programmpalette hinzugefügt. Diese trägt zunächst die Bezeichnung Unbenannt. Wieder über das eben benutzte Menü und den Befehl Palette umbenennen bekommt sie einen gewünschten Namen. Hier die Bezeichnung Harmonie. Jetzt folgt der Klick auf das bereits oben genannte Paletten-Icon, um die Farbe in diese Palette aufzunehmen.

affinityphoto-farbe-zuweisenMit einem Rechtsklick auf das neue Farbquadrat könnte die Bezeichnung für die Farbe geändert werden. Das Kontextmenü der rechten Maustaste enthält aber auch den Eintrag Farbverteilung zu Farbfeldern hinzufügen. Fährt man mit der Maus über diesen Eintrag, erscheinen alle verfügbaren Harmonien, welche bei Auswahl automatisch in die Farbpalette eingefügt werden.

Farbharmonien und Farbkreise

Hier tauchen diverse gängige Begriffe auf, die der Profi sicher kennt, dem Hobbyanwender aber nicht zwangsläufig etwas sagen.

affinityphoto-farbverteilung

Die im oberen Bereich gelisteten Begriffe von Komplementär bis Quadratisch beziehen sich auf einen Farbkreis, welcher häufig in 12 Abschnitte aufgeteilt ist. In dem hilfreichen Tool ColorSchemer Studio würde das z.B. so aussehen:

farbkreis

Hier ist ganz oben Rot, also R: 255, G: 0 und B: 0 hervorgehoben.

Komplementär

Wählt man in Affinity Photo jetzt Komplementär, wird genau die gegenüberliegende Farbe im Kreis dazugenommen. Bei einem Farbkreis mit den primären Farben Rot, Grün und Blau, ist das also Cyan.

farbkreis-komplementaer

In der Farbpalette von Affinity Photo sind jetzt drei Farben zu sehen. Eigentlich würde man hier ja nur Rot und Cyan erwarten.

affinityphoto-farbe-doppeltAffinity Photo fügt Rot und Cyan ein, so wie es sein soll. Das bisherige Rot bleibt aber auch in der Palette und ist damit doppelt vorhanden. Das passiert auch bei den anderen Methoden zur Farbverteilung. Eine Kleinigkeit, welche die Entwickler bei Serif noch verbessern könnten. Über einen Rechtsklick auf eines der überflüssigen roten Farbquadrate kann es gelöscht werden.

Geteilt Komplementär

affinityphoto-geteilt-komplementaerKomplementär ist also leicht zu verstehen und man kann sich das gut merken. Geteilt Komplementär ist auch noch recht einfach. Anstelle der gegenüberliegenden Farbe werden hier der linke und rechte Nachbar der gegenüberliegenden Farbe verwendet. In diesem Beispiel also nicht das gegenüberliegende Cyan, sondern der linke Nachbar von Cyan mit einem mittleren Blauton, auch oft Kobaltblau genannt und der rechte Nachbar von Cyan mit einem türkisen Ton.

Sinnvollerweise fügt Affinity Photo mit jeder weiteren Methode zur Farbverteilung, der Palette auch weitere Farben hinzu. Es werden also immer mehr. Hier wurden zu besseren Anschauungszwecken immer vor dem Anwenden einer neuen Harmonie die vorherigen Farben aus der Palette enfernt.

Analog

affinityphoto-analogWeiter geht es mit der Methode Analog. Das bedeutet in Affinity Photo, zur Basisfarbe werden sein direkter linker und rechter Nachbar hinzugenommen. Im Falle von Rot als Basis, links davon ein etwas dunkleres Rot und rechts davon ein helleres, also Orange. Hier scheint sich Affinity Photo aber einen Fehler zu erlauben. Zwar bekommt man das Orange, aber das dunklere Rot nicht. Stattdessen wird nochmals die Basisfarbe Rot in die Palette eingefügt und wäre somit sogar dreimal vorhanden, wenn man aus bereits genannten Gründen nicht ohnehin immer einmal die überflüssige Basisfarbe löscht. Eigentlich müsste es so aussehen:

farbkreis-analog

Mit anderen Basisfarben passiert dies genauso, weshalb hier wohl ein Bug vorliegt.

Analog Akzente

affinityphoto-analog-akzenteBei Analog Akzente wird von Affinity Photo die Komplementärfarbe von Rot, also Cyan und zusätzlich sein linker und rechter Nachbar also Kobaltblau und Türkis verwendet. Damit ist es fast wie beim weiter oben beschriebenen Geteilt Komplementär, nur eben zusätzlich mit der gegenüberliegenden Farbe. Somit sind jetzt auch vier Farben vorhanden.

Triadisch

affinityphoto-triadischWie der Name schon vermuten lässt, handelt es sich bei Triadisch um einen Dreiklang. Inklusive der Basisfarbe werden drei Farben im Farbkreis gleichmäßig verteilt. Hier sind das 0 Grad, 120 Grad und 240 Grad, weil die Basisfarbe Rot bei 0 Grad steht.

farbkreis-triade

Hier also eine Triade aus Rot, Grün und Blau.

Tetradisch

affinityphoto-tetradischTetradisch beschreibt einen Vierklang mit im Farbkreis verteilten Farben, welche nicht unbedingt gleichmäßig verteilt sein müssen. Affinity Photo meint hier die Basisfarbe und seinen rechten Nachbarn und jeweils dessen Komplementärfarben. Hier also Rot, Orange und Cyan sowie Kobaltblau.

Quadratisch

affinityphoto-quadratischEine gleichmäßig verteilte Tetrade bekommt man in Affinity Photo mit der Methode Quadratisch. Das wäre hier dann Rot, ein helles Grün, Cyan und Violett. Der Farbkreis würde demnach so aussehen:

farbkreis-tetrade

Sehr häufig brauchbar sind die im unteren Bereich verfügbaren Schattierungen und Tonwerte.

Schattierungen und Tonwerte

affinityphoto-schattierungenZur Wahl stehen helle und dunkle Schattierungen. Dabei wird immer von der Grundfarbe ausgegangen und für die hellen Werte bis zu Weiß und für die dunklen Werte bis zu Schwarz gegangen. Zur Basisfarbe werden also immer sechs Schattierungen in gleichmäßigen Abständen hinzugefügt. Hier sieht man die Basisfarbe Rot genau in der Mitte und links die sechs dunklen sowie rechts die sechs hellen Schattierungen.

affinityphoto-tonwerteSchließlich gibt es noch die Tonwerte. Ausgehend von der Basisfarbe werden auch hier sechs weitere Farben mit unterschiedlicher Sättigung hinzugefügt. Der letzte Tonwert ist immer mittleres Grau mit R: 128, G: 128 und B: 128.

Damit bieten Affinity Photo und Designer zwar nur grundlegende, aber für viele Anforderungen durchaus ausreichende und in jedem Fall hilfreiche Möglichkeiten für schnelle und ansehnliche Farbgestaltungen. Wer mehr will, findet im Internet zahlreiche Online-Tools wie Adobe Color und andere, die meist nichts außer einer Anmeldung kosten.

Die Kommentarfunktion steht während unseres Urlaubs kurzzeitig bis 06.08.2017 aus Sicherheitsgründen nicht zur Verfügung.