Jeder der eine eigene Webseite erstellt, möchte auch ein eigenes Titelbanner besitzen. Das Titelbanner zeigt in der Regel den Namen/Titel der Website und oft auch ein eigenes Logo. Am Titelbanner, das normaler Weise ganz oben angezeigt wird, soll dem Besucher gleich zu erkennen geben auf welcher Website er sich gerade befindet.

Da es nicht ganz einfach ist ein eigenes Titelbanner zu designen, werde ich Euch hier anhand eines Beispiels zeigen wie ich beim Gestalten des Banners vorgehe. Natürlich sind beim Design eines Banners keine Grenzen gesetzt. Es gibt so viele Möglichkeiten. Ein Titelbanner kann jede Größe und jede Form haben. Das hier gezeigte Beispiel ist sozusagen eine klassische Banner-Variante, in der das Banner die gesamte Breite des Browsers einnimmt. Aber seht selbst....

Ein Titelbanner für die eigene Webseite erstellen

Das Beispielbanner habe ich für meine persönliche Website gestaltet (auf der sich im Moment jedoch nicht sehr viel befindet). Wie bereits gesagt sollte das Design des Banners eher klassisch sein, was soviel bedeutet, dass es die gesamte breite der Seite einnimmt.

Ich versuche Euch einfach meine Ideen und Gedankengänge bei der Erstellung des Banners zu beschreiben. Wer mehr über das Vorgehen und den Umgang mit der Grafik-Software (in diesem Falle Adobe Photoshop) erfahren möchte, sollte sich am besten mal bei den anderen Anleitungen für Digital-Art & Grafik-Design umsehen.

Entwicklung des Banner-Designs

Die ersten groben Ideen für das Design des Banners waren, das es grün sein sollte und den Titel meiner Website enthalten sollte. Um die Form des Banners zu unterstreichen, sollten die Außenränder farblich etwas dunkler sein. Außerdem dachte ich mir, das Abgerundete Ecken hübsch wären und so kam ich zu folgendem ersten Design.

Titel-Banner für Webseiten erstellen - Version 1 mit abgerundeten Ecken

Da ich den Abschluss des unteren Randes des Titelbanners als zu hart empfand, habe ich daraus einen Farbverlauf ins Weiße hinzugefügt

Titel-Banner für Webseiten erstellen - Version 2 mit Farbverlauf unten

Ich war mit dem Farbverlauf noch nicht zufrieden und gestaltete ihn daher etwas um. Außerdem habe ich die Höhe des Banners etwas reduziert.

Titel-Banner für Webseiten erstellen - Version 3 mit verändertem Farbverlauf

Nachdem ich das Titelbanner in das Webseiten-Layout eingefügt habe, ist mir aufgefallen, dass die abgerundeten Ecken nicht ins Design der Seite passten. Ich habe daraufhin die Ecken im ersten Schritt einfach abgekantet.
Außerdem habe ich einen Schatten am oberen Rand des Banners eingefügt. Dadurch gewinnt das Design des Banners stark an Attraktivität. Überhaupt ist der Effekt von solchen Schatten (egal ob in Logos, Buttons, Banner etc.) nicht zu unterschätzen. Die Schatten fallen dem Betrachter zwar nicht bewusst auf, aber im Vergleich machen sie oft den Unterschied aus. Danach habe ich dass Titelbanner noch mal ins Layout eingefügt, um zu sehen, ob es jetzt zum Design der Seite passt.

Titel-Banner für Webseiten erstellen - Version 4 mit abgekanteten Ecken und Schatten

Ich war mit dem Design wieder nicht 100%-ig zufrieden. Meine nächste Idee das Design des Website-Banners zu verbessern, war die Ecken ohne jede Spielerei einfach eckig zu machen.

Titel-Banner für Webseiten erstellen - Version 5 mit normalen Ecken

Mit den normalen Ecken passte das Banner schon viel besser ins Design und nun konnte ich zum Feintuning übergehen. Um dem Banner mehr Tiefe zu geben und es interessanter zu machen, wollte ich den Hintergrund irgendwie detaillieren und strukturieren. Um dies umzusetzen, habe ich einfach eine Schrift in der Art eines Wasserzeichens in den Hintergrund des Banners eingefügt. Die Schrift habe ich quer gestellt, da sie so besser aussieht und nicht die Erkennbarkeit der Überschrift stört. Als Text habe ich einfach die Domain der Website verwendet - was läge näher?

Titel-Banner für Webseiten erstellen - Version 6 / Endversion mit Hintergrund-Text

Und damit war die Erstellung meines Titelbanners für meine Website fertig. Das Banner besitzt eine gewisse Tiefe, die durch den Farbverlauf am unteren Ende, den Schattenverlauf am oberen Ende und die wasserzeichenartige Schrift im Hintergrund erzeugt wird.
Ich selbst bin mit dem Banner-Design sehr zufrieden (hab ich ja auch selbst gemacht ;-) ) und habe richtig Lust auf mehr bekommen.