3.2 Bannerdesign - Seitentitel

Nachdem das Grundlayout im vorigen Unterkapitel erläutert wurde zeige ich Ihnen nun, wie Sie den Banner, also das was sich über dem Inhaltsbereich befindet, entwerfen können. Im ersten Teil geht es um den Schriftzug und dessen Spiegelung. Die grafischen Designelemente in der oberen rechten Ecke erläutere ich Ihnen im folgenden Unterkapitel.

Seitentitel mit Spiegelung

Wie jede andere Webseite, soll auch diese einen Seitentitel erhalten. Ich habe sie schlicht und einfach "WebdesignTutorial" getauft. Wie Sie Ihre Seite benennen bleibt selbstverständlich Ihnen überlassen. Gleiches gilt für die Wahl der Schriftart und der Farben. Achten Sie lediglich darauf eine Schriftart zu verwenden, die unten bündig abschließt. Sollte dies nicht der Fall sein, so wirkt der Spiegelungs-Effekt meines Erachtens nicht. Sollten Sie keine passende Schriftart finden, so können Sie bei Photoshop in den Zeichen-Einstellungen (Fenster => Zeichen) die Option Kapitälchen aktivieren. Somit werden lediglich Großbuchstaben verwendet.
Wenn möglich sollten Sie zudem lediglich einen Textbaustein verwenden, da sich dieser anschließend leichter spiegeln lässt. Darin können Sie selbstverständlich wie in meinem Beispiel mehrere Farben oder Leerzeichen usw. verwenden.

Erzeugen Sie im nächsten Schritt von der gerade angelegten Textebene eine Kopie, indem Sie die Ebene auf das Icon für Neue Ebene erstellen ziehen oder verwenden Sie das Kontextmenü (rechte Maustaste) der Ebene und wählen Sie dort Ebene duplizieren. Spiegeln Sie nun die duplizierte Ebene, indem Sie im Menü Bearbeiten => Transformieren => Vertikal spiegeln auswählen. Meinen Zwischenstand nach dem Verschieben der Ebene zeigt Abbildung 1.

Spendieren Sie der gespiegelten Textebene jetzt noch eine Ebenenmaske, indem Sie die Ebene anwählen und im Ebenenmenü die Funktion Vektormaske hinzufügen wählen. Anschließend können Sie diese Maske mit einem Klick darauf anwählen und befüllen. Dazu ist für Sie folgendes wichtig zu wissen: Schwarze Bereiche in der Maske sorgen für Tranzparenz, weiße Bereiche sind opak. Wenn Sie die Ebenenmaske demnach vollständig weiß befüllen, ändert sich nichts in der Darstellung der Ebene. Eine Ebene mit einer vollständig schwarz gefärbten Ebenenmaske hingegen ist vollständig transparent und wird somit nicht dargestellt.
Diese Eigenschaften der Ebenenmasken sind oftmals sehr hilfreich, da Sie auch hier sehr flexibel bleiben und keine Bereiche der Ebene weglöschen, sondern lediglich maskieren. Somit bleiben die Inhalte erhalten und Sie können zu einem späteren Zeitpunkt erneut darauf zurückgreifen, sollten Sie etwa doch einen anderen Bereich eines Hintergrundbildes verwenden wollen.
Ebenfalls sehr vorteilhaft ist es, dass Sie auch Verläufe in Masken verwenden können. Wählen Sie dazu die Ebenenmaske an, wählen Sie das Verlaufswerkzeug und achten Sie darauf, dass Sie die Vordergrund-/Hintergrundfarbe auf weiß bzw. schwarz gesetzt haben. Ziehen Sie anschließend einen linearen Verlauf von oben nach unten in der Höhe der Spiegelung. Halten Sie dabei die Shift-Taste gedrückt um einen exakt senkrechten Verlauf zu erzeugen. Sollte Ihnen der Verlauf nicht zusagen, so können Sie diesen einfach erneut aufziehen, da Sie die vorherige Maske überdecken. Mit dem Ergebnis in Abbildung 2 bin ich zufrieden.

Wenn Sie jetzt die Deckkraft der Ebene etwa auf 40% reduzieren, erhalten Sie bereits ein recht ansehnliches Ergebnis (vgl. Abbildung 3).

Spiegelebene

Zusätzlich zur Spiegelung möchte ich gerne eine ganz leicht sichtbare Ebene haben, auf der die Spiegelung statt findet. Dazu erstelle ich eine neue Ebene und färbe den in Abbildung 4 dargestellten Bereich weiß.

Anschließend erhält auch diese Ebene eine Maske mit einem linearen Verlauf, der für ein Ergebnis wie in Abbildung 5 sorgt.

Damit die Ebene nicht nur einen linearen Verlauf enthält, verwende ich das Auswahlellipse-Werzeug (siehe Abbildung 6) und erstelle damit eine wie in Abbildung 7 gezeigte ovale Selektion mit einer weichen Kante von 10 Pixeln.

Diese Auswahl invertiere ich im nächsten Schritt über Auswahl => Auswahl umkehren und drücke anschließend bei angewählter Spiegelebene die Entfernen-Taste, so dass ein Ergebnis wie in Abbildung 8 entsteht.

Abschließend können Sie auch bei dieser Ebene die Deckkraft beliebig verringern, so dass der finale Textblock inklusive Spiegelung auf einer dafür erstellten Ebene wie in Abbildung 9 aussehen könnte. Ich habe mich für eine 20%-Deckkraft entschieden.