3.3 Bannerdesign - Farbverlauf
Da der Banner trotz Seitentitel noch extrem leer wirkt, möchte ich diesem im nächsten Schritt noch ein paar grafische Effekte hinzufügen. Dabei achte ich in der Regel darauf, dass diese Effekte möglichst dezent sind, da sie die Seite grafisch aufwerten, aber nicht dauerhaft den Fokus des Betrachtes auf sich ziehen sollten.
Im ersten Schritt erstelle ich wie gewohnt eine neue Ebene, auf der ich gerne einen Farbverlauf platzieren möchte. Diese Ebene sollte sich im Ebenenmanager unterhalb des Inhaltes, aber natürlich überhalb des Hintergrundes befinden. Anschließend verwende ich das Verlaufswerkzeug mit der Einstellung Radialverlauf und den beiden Farbwerten #1abd83 und #80eafa um einen Verlauf wie in Abbildung 1 zu erhalten.
Im ersten Schritt erstelle ich wie gewohnt eine neue Ebene, auf der ich gerne einen Farbverlauf platzieren möchte. Diese Ebene sollte sich im Ebenenmanager unterhalb des Inhaltes, aber natürlich überhalb des Hintergrundes befinden. Anschließend verwende ich das Verlaufswerkzeug mit der Einstellung Radialverlauf und den beiden Farbwerten #1abd83 und #80eafa um einen Verlauf wie in Abbildung 1 zu erhalten.
Der Ebene mit dem Farbverlauf füge ich jetzt eine Ebenenmaske hinzu um den Verlauf auf die obere rechte Ecke zu beschränken. Für die Maske verwende ich ebenfalls einen radialen Verlauf, so dass ein Effekt wie in Abbildung 2 entsteht.
Nun ändere ich die Deckkraft der Ebene auf 40% und wechsle zudem die Füllmethode auf die Option Farbig abwedeln. Somit löse ich die noch recht oval wirkende Form des Farbverlaufs auf um einen optisch etwas zufälliger erscheinenden Verlauf wie in Abbildung 3 zu erhalten.
Abbildung 3Durch eine Änderung der Deckkraft und der Füllmethode erhält der Farbverlauf eine wesentlich dezentere Wirkung.
Was Sie an dieser Stelle beachten sollten ist, dass der Verlauf nun über den Rand unserer eigentlichen Seite hinausragt. In Photoshop ist dies zunächst kein Problem, aber um die Umsetzung der Seite möglichst einfach zu halten empfiehlt es sich in dieser Situation, den Verlauf etwas nach links zu verschieben, so dass dieser nicht über den Rand des Inhaltsbereich ragt. Alternativ dazu können Sie selbstverständlich auch die Maske und somit den sichtbaren Bereich des Verlaufs verändern, denn genau darin liegt wie bereits erwähnt der Vorteil der Maske.
Warum Sie dies beachten sollten erkläre ich Ihnen bei der Umsetzung. Hier zeigt sich jedoch, dass es oftmals hilfreich ist wenn auch der Designer der Webseite ein grundlegendes Wissen bezüglich HTML und CSS hat. Denn oftmals sorgen Kleinigkeiten für eine enorm aufwändigere Umsetzung und in diesem Fall ist dies einfach nicht notwendig.
Abbildung 4 zeigt Ihnen meine finale Version. Ich habe die Ebene dafür lediglich etwas nach links verschoben und die Maske etwas verkleinert. Ob der Verlauf über den Rand verläuft zeigt Ihnen ein Vergleich der Farbwerte in der Nähe der Hilfslinie.
