Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Gestaltungsgrundlagen für Webdesigner

Durch Farbe Emotionen wecken

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Gerade bei einem Event wie der hier illuminierten City zeigt sich, wie man mit Farbe arbeiten und Wirkung erzielen kann. Hier geht's um reduzierte Farbgebung bei klarer Funktion, um Farbharmonie und um Farbklang.
10:26

Transkript

Für die Farbgestaltung möchte ich Ihnen in diesem Video zeigen, wie Sie mit Bildern Farben definieren können oder mit einem anderen Tool, was Sie Online finden. Fangen wir mit den Bildern an. Ich habe hier zunächst meine Website so weit vorbereitet. Der einzige Farbton, der hier im Vorteil liegt, das ist die Farbe Rot. Alles andere ist im Moment in Graustufen gehalten. Das ist soweit auch völlig in Ordnung. Aber ich möchte natürlich das Ganze deutlich emotionaler gestalten und das können wir natürlich mit Farben sehr gut erreichen. Dafür zeige ich Ihnen mal die Beispielbilder, die wir zur Verfügung haben, wenn wir mit diesem Projekt arbeiten. Hier geht es darum, das die gesamte Innenstadt an diesem Fest illuminiert wird, mit diversen Effekten und Spots und schöne Illuminationen, unter anderem komplette Kirchen ausgeleuchtet werden. Das sind natürlich tolle Bilder, die die Farbigkeit dieser Veranstaltung zeigen und wir wollen natürlich die Farbigkeit auch irgendwo übertragen und deswegen nehmen wir einfach mal die Adobe Bridge und sagen, ein solches Bild, das möchte ich hier doch ganz gern mal als Header-Bild einsetzen. So und dann sieht das Ganze schon mal so aus, dass ich sagen kann, ich habe hier mein Bild direkt in diesem Rahmen rein geklebt. Und mit der Direktauswahl mit der Taste A kann ich jetzt dieses Bild einfach noch vom Ausschnitt verschieben und sagen, so sieht vielleicht noch ein bisschen hübscher aus. Auch ganz schön von der Blickrichtung, der Pfeiler der Kirche, der zeigt hier direkt auf das Logo drauf, sodass es noch besser zur Geltung kommt. So, wir haben also verschiedene Farbigkeiten hier im Bild drin, das ist natürlich ein RGB-Bild und wir können uns RGB-Farben daraus herauspicken, Zum einen, dass wir natürlich Farbigkeit aus diesem Bild nehmen für diesen Header-Bereich, aber auch hier unten vielleicht für Hintergründe und anderes, zum Beispiel Farben, die hier vielleicht überhalb der Boxen liegen. sodass wir sagen, das sind zum Beispiel Farben, die hier vielleicht nur zehn Pixel einnehmen, und also Boxen, die einfach nur diese verschiedenen Spalten kenntlich machen sollen. Die schiebe ich mir hier noch zurecht und dann können wir gleich die Farben aufnehmen. So, das heißt, wenn ich jetzt hier bin und ich habe diese Box ausgewählt, einen leeren Rahmen ohne Füllung, dann kann ich mit der Pipette arbeiten. Ich kann einfach das ganz normale Pipettenwerkzeug nehmen, kann da rein klicken und dann wird die Farbe sofort auf diesen Balken übertragen. Wenn ich das anders möchte, dann drücke ich noch mal die Alt-Taste und kann quasi immer wieder eine neue Farbe daraus nehmen und damit mein Motiv einfärben. Wir machen das so, dass ich sage, ich möchte hier ein bisschen einen Farbverlauf sozusagen darstellen, von rot über violett zu blau. Also drei Farben in einer Farbharmonie, die hier innerhalb meiner Website ein bisschen mehr Akzente setzen. Diese Farben lassen sich natürlich auch sonst im Menü einsetzen, das heißt, ich habe hier zum Beispiel im Hauptmenü auch einen interessanten Punkt, zum Beispiel hier in diesem Fall dieser Hover-Text sprich dass dieser Balken, der hier bei einem Mouseover eingestellt wird, dass der natürlich auch eine gewisse Farbigkeit bekommt. Also auch hier kann ich sagen, ich möchte gern die Farbigkeit aufnehmen. Man sieht, das Ganze ist so ein bisschen pastellig, das liegt einfach schlichtweg daran, dass dieser Balken hier in seiner Transparenz auf 20 Prozent steht und das kann man auch per CSS oder per Grafik hinterher so umsetzen, dass es auch so aussieht, wie hier gemeint. Dazu gibt es natürlich noch weitere Farben in Summe, das heißt, man könnte auch Buttons beispielsweise mit diesen Farben bestücken. Das heißt, wenn ich jetzt wollte, dass zum Beispiel dieses Rot als Grundton immer wieder verwendet wird, dann muss ich mir einmal diesen Farbton auch speichern Ich sehe, das ist ein RGB-Wert, genauso wie dieses Violett oder wie dieser blaue Balken hier. Das sind die RGB-Töne und wenn man da mal direkt per Doppelklick draufgeht, dann sieht man hier unten auch die Hexadezimalwerte, das sind die Werte, die im CSS-Code später benutzt werden. So das heißt, ich kann hier einen Button durchaus so gestalten, das ich sage, der kriegt jetzt eine blaue Kontur, dieser Button, weil er sich im violetten Bereich befindet, ist jetzt hier in dem Fall in violett eingefärbt und diese Kontur kriegt natürlich eine rote Kontur. Das Ganze muss natürlich etwas aufwendiger programmiert werden, aber das ist durchaus möglich, dass man das so gestalten darf. Auch mit der Überschrift, also mit der Typographie, darf ich hier in die Typographie einsteigen. Dafür haben wir hier eine Headline-Überschrift, eine h1. Ich kann daraus natürlich noch eine etwas kleinere h2 machen später, aber hier für diesen Zweck reicht das aus. Ich kann natürlich auch mit der Farbigkeit konkret hier arbeiten, um das sozusagen Ton in Ton darzustellen. Diese Farbigkeit habe ich also aus einem Bild heraus aufgenommen und kann damit die grundsätzliche Website damit einfärben, aber auch Hintergründe können damit adressiert werden und das geht natürlich auch über Farbtöne, über Abstufungen. Das heißt, ich kann hier selbstverständlich auch wieder mit der Pipette reingehen und kann hier die Farbe aufnehmen. Man sieht hier, da entstehen plötzlich sehr interessante, sehr bunte Effekte dabei, dass das Ganze hier, diese drei Boxen, extrem gut nach vorne kommen, über diesen hohen Kontrast zum Hintergrund oder man hält es Ton in Ton, das heißt, ich nehme hier ganz bewusst einen eher neutralen Ton oder leicht in lavendel gehende und dann kann ich auch diesen Farbton hier, kann ich neu anlegen und kann davon einen Farbton ansetzen, zum Beispiel 20 Prozent, sodass das Ganze trotzdem hell und offen wirkt, aber einen Hintergrund jeweils hat. Auch Verläufe lassen sich damit gestalten. Zum Beispiel so, dass ich sage, ich nehme ein Verlaufsfeld von der ersten Farbe und wir nehmen in dem Fall die Farbfelder, die wir grad hier aufgepickt haben aus dem Bild, vom rot bis hin zu blau oder dunkelviolett. Man sieht schon, was das hier für einen sehr bunten Verlauf daraus ergibt, heute sehr häufig auch zu sehen im Web und dann kann man tatsächlich solche Effekte damit erzeugen, dass man hier einmal komplett den Verlauf hat. Aber das Problem ist jetzt, dass diese Balken gar nicht mehr auffallen, deswegen macht es Sinn, diesem Verlauf zu drehen und das kann man schlichtweg um 90 Grad machen, das heißt, ich kann hier auch den Verlauf horizontal, vertikal laufen lassen oder ich kann ihn auf den Kopf stellen, sprich gegenläufig, sodass wirklich jeder rote Balken und der blaue Balken auch wieder deutlich heraus fällt. Wir sehen also, dass mit CSS-Anweisungen auch solche Möglichkeiten bestehen, Farben einzusetzen innerhalb der Website. Dazu gibt es noch weitere Möglichkeiten, mit Farben zu arbeiten, unter anderem, dass ich Farben so einsetze, dass wir ein Werkzeug verwenden. Das Werkzeug nennt sich Adobe Color. Unter color.adobe.com gibt es die entsprechende Website. Das ist ein Webservice und wenn ich innerhalb der Creative Cloud eingeloggt bin, kann ich auch diese Adobe Color-Sets nutzen, für meine Programme, unter anderem auch in Adobe InDesign. Was wir hier machen können, ist, dass wir sagen, wir haben eine Farbregel. Farbregeln, das sind die Farbharmonien eigentlich. Das heißt, es gibt ähnliche Farben, zum Beispiel rund um einen Farbton, so wie wir es eben grad schon fast gesehen haben, dann kann ich diesen Farbton selber wählen, zum Beispiel sagen, so, zwischen blau und rot, da soll sich das abspielen und dann hätte ich hier schon meine Zwischentöne, die damit auch automatisch berechnet werden und wir sehen es im Farbwinkel, dann auch in denselben Abständen miteinander. Natürlich lassen sich die Farben auch weiter auseinanderziehen, das heißt, soll das Spektrum erweitert werden, von orange über rot, violett bis blau, so kann man das hier ebenfalls tun oder ich sage, ich möchte noch ein bisschen mehr ins türkise bis rot-orange gehen, dann haben wir ein solches Spektrum. Das Ganze lässt sich dann entsprechend speichern als Vorgabe und ich sage, das ist mein Festival-Hintergrund und ich nenne das Ganze mal Festival dunkel, weil das alles sehr dunkle Untergründe sind. Wir können dabei die Bibliothek nutzen. Wir können eine eigene Bibliothek erstellen und wir sagen, das ist die Marburg by Night 2017-Bibliothek, das speichere ich hier einfach mal so. Und dann können wir hinterher diese Farbigkeit auch in unserem Programm jeweils verwenden. Das heißt, das wird dann hier unter den CC-Bibliotheken erscheinen, dann können wir nämlich hier auch auf MBN2017 wechseln und können unsere Farbigkeit jeweils dann aufrufen damit. Das ist also eine Möglichkeit, mit diesen Bibliotheken so zu arbeiten und in das Programm hinein Informationen zu speichern. Nutzen Sie also auch die Adobe Color-Werkzeuge, wenn Sie über die Creative Cloud verfügen und damit können Sie wunderbar Farbeffekte anmischen und in Programmen zur Anwendung bringen. Ansonsten arbeiten Sie mit Bildern, die geben an Farbigkeit eigentlich immer genug her.

Gestaltungsgrundlagen für Webdesigner

Lassen Sie sich die Grundlagen guten Webdesigns anhand eines Praxisbeispiels näherbringen.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:27.07.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!