Web-2.0-Effekt: Hintergrundtapete
Design-Trend
Hintergrundkacheln
Web-2.0-Effekt: Hintergrundtapete
Beim Begriff Tapete denkt ein Webdesigner weniger an Omas Blümchenmuster, sondern eher an die eBay-Werbung, bei der sich die Kleidung perfekt in die Wand einpasst. Und allen Webveteranen werden die Zeiten einfallen, in denen Wiederholungen im Hintergrund zu den neuen und modernen Effekten gehörten. Die Auswüchse gipfelten in bunten, sich ständig wiederholenden Logos und aufdringlichen Mustern.
Kaum glaubte man diesen Effekt beerdigt, kommt nun das Web 2.0 daher und gräbt die Hintergrundtapete oder auch Hintergrundkachel wieder aus. Dabei sind es weniger die einfach gestalteten Web-2.0-Vertreter aus dem Google- oder Yahoo-Universum, die mit Hintergrundkacheln glänzen, sondern es sind eher als Trend-affin bekannte Websites wie www.ripcurl.com.
CSS-Technik
Rein technisch basieren Hintergrundkacheln auf der Wiederholung eines einzelnen Bildes. Früher geschah das mit HTML-Attributen, heute sind die CSS-Befehle aus dem background-Bereich dafür zuständig. Für die Steuerung der Wiederholung kommt hier background-repeat zum Einsatz. Als Werte stehen no-repeat (ohne Wiederholung, sprich Kachelung), repeat-x (horizontale Wiederholung), repeat-y (vertikale Wiederholung) und repeat (horizontale und vertikale Wiederholung).
Letzteres ist aus historischen Gründen der Standardwert und damit natürlich die optimale Wahl für Hintergrundkacheln. Sie können übrigens die Art der Wiederholung auch im Universalbefehl background einsetzen, der neben der Wiederholung unter anderem auch die Adresse des Hintergrundbilds und die Hintergrundfarbe aufnimmt.
Clevere Kacheln
Web-2.0-Effekt: Hintergrundtapete
Eine Hintergrundtapete besteht aus einem Muster, das sich horizontal auf der x-Achse und vertikal auf der y-Achse beliebig weit fortsetzen lässt. Das Muster selbst ist eine einzelne Kachel oder in der Fachsprache auch ein Rapport. Letzteres hat nichts mit dem Berichterstatten beim Militär zu tun, sondern ist der kleinste mögliche Teil eines Musters. Den Rapport herauszufinden kann ausgesprochen spannend sein. Um Ihr Auge zu schulen, können Sie einfach mal eine Tapete oder ähnliche sich wiederholende Muster unter die Lupe nehmen und das Herzstück herausfinden.
Das Problem beim Rapportieren, also dem Finden eines passenden Musters, ist, dass dieses Muster nicht nur wiederholbar sein sollte, sondern auch nicht zu leicht durchschaubar sein darf. Denken Sie beispielsweise an Badezimmerfliesen. Hier besteht das Muster aus Kacheln – der Rapport ist sofort erkennbar. Dadurch wirkt aber eben auch der gesamte Hintergrund gekachelt. Im Web ergibt das nur selten eine spannende Komposition. Das heißt also, Sie benötigen eine Kachel, die durch Elemente mit verschiedenen Größen, Formen et cetera nicht so leicht als solche erkennbar ist. Dabei soll das Muster selbstverständlich auch nicht zu groß sein, dennoch aber problemlos wiederholbar sein. Und zu guter Letzt darf sich beim Wiederholen auch kein ständig wiederkehrendes Loch oder eine Unregelmäßigkeit einschleichen. Das Problem ist hier, dass das menschliche Auge in einem sich wiederholenden Muster Probleme schneller erkennt und davon besonders stark gestört wird.
Eine gute Möglichkeit, sich von der Badkacheloptik zu entfernen, besteht in der Verwendung der Diagonale. Wie unterschiedlich die Wirkung zwischen Diagonale und Horizontale sein kann, zeigen schon sehr einfache Muster, die in der Grundform nur aus wenigen Pixeln bestehen. Die Diagonale wirkt hier teilweise etwas aufgelöster, aber auch abwechslungsreicher. Der Rapport besteht als Basis jeweils nur aus einem Quadrat von 10 x 10 Pixeln.
Farbe und Kompression
Ein weiteres Problem vieler Muster ist, dass sie zu auftragend wirken. Um ein Muster weniger dominant zu gestalten, sparen Sie am besten an den Farben oder arbeiten Ton in Ton, zum Beispiel nur mit verschiedenen Blautönen. Was sich positiv auf das Auge des Betrachters auswirkt, hilft bei weniger Farben natürlich auch der Ladezeit.
Welches Dateiformat jeweils zu wählen ist, hängt bei Mustern natürlich auch vom Motiv ab. Allerdings gilt hier meist, dass die verlustfrei komprimierenden Formate wie GIF oder PNG gegenüber JPEG Vorteile haben. Bei sich wiederholenden Mustern wirken sich nämlich unscharfe Kompression und JPEG-Artefakte besonders stark aus.
Ein gutes Beispiel für ein farblich stark reduziertes Muster im Hintergrund bietet Frontlineshop. Hier besteht der Hintergrund aus einem relativ breiten und hohen GIF mit sehr wenig Farben. Die einzigen Effekte sind kleine Schmutzflecken für eine Trash-Optik. Damit wird die Hintergrundkachel verwendet, um die Optik des Shops zu verstärken. Und dank der geringen Farbmenge wird das Hintergrundbild nicht allzu groß.
Testen
Web-2.0-Effekt: Hintergrundtapete
Eine Hintergrundtapete können Sie natürlich in jedem beliebigen Grafikprogramm anlegen. Soll es eine Komposition aus mehreren Formen sein, bietet sich ein Vektorgrafikprogramm wie Adobe Illustrator an. Wenn eher auf Pixelebene Muster erarbeitet werden sollen, leistet eine Bildbearbeitung wie Adobe Photoshop gute Dienste. In beiden Programmen ist ein Muster schnell erzeugt. In Photoshop legen Sie eine Datei in der Größe des Musters an, beispielsweise zehn auf zehn Pixel. Dann wählen Sie alles aus (Menü Auswahl, Alles auswählen) und machen dann mit dem Menübefehl Bearbeiten, Muster festlegen ein Photoshop-Muster aus der Tapete. Der Vorteil ist, dass Sie mit dem Muster nun per Füllwerkzeug beliebige andere Dateien füllen können. So erstellen Sie beispielsweise eine 100 x 100 Pixel große Datei und testen dort ihr Muster.
In Illustrator wählen Sie eine Kachel aus und rapportieren Sie dann über Verschieben und dann das erneute Anwenden dieser Transformation. Numerisches Verschieben geht zwar in Photoshop auch, aber in Illustrator haben Sie für die Gruppierung und Ausrichtung von Vektorelementen wesentlich mehr Möglichkeiten.
Kantenprobleme
Bei der Arbeit mit Kacheln ergeben sich immer wiederkehrende Probleme. Unangenehm sind Unsauberkeiten an den Kanten. Diese können durch Antialiasing oder einfach durch Copy and Paste entstehen. Hier ist meist manuelles Nacharbeiten notwendig. Wenn Sie Bilder aus einem Vektorgrafikprogramm in die Bildbearbeitung exportieren, gibt es oft ähnliche Probleme.
Um Schwierigkeiten zu vermeiden, können Sie Elemente beispielsweise doppelt so groß wie gewünscht in Photoshop importieren. Beim Verkleinern sollte dann allerdings je nach Musterart auf den Algorithmus zur Verkleinerung geachtet werden. Die Pixelwiederholung bietet sich bei kleinen geometrischen Mustern an, da so keine Aufweicheffekte entstehen.
Wenn Sie im Vektorgrafikprogramm schon größere Musterflächen angelegt haben, können Sie auch beispielsweise drei mal drei Felder exportieren und in Photoshop erst den Feinschnitt machen. Außerdem ist es natürlich nicht notwendig, dass Kacheln immer quadratisch sind. Bei der Snowboard-Marke Amplid etwa ist der Hintergrund sehr breit und wiederholt sich in der Vertikalen häufiger. Dies ist notwendig, um die Farbkante zwischen schwarzem und weißem Hintergrund zu realisieren. Über dem wiederholten Muster liegt noch ein Element, das für eine ausgefranste Kante sorgt. Bei großen Auflösungen fällt hier das Fehlen der Kante in der vertikalen Wiederholung auf. Es ist dann Einstellungssache, ob man das als künstlerische Freiheit oder eher als hässlich empfindet.
Beachtenswertes
Web-2.0-Effekt: Hintergrundtapete
Wenn Sie sich an eine eigene Kachel machen, sollten Sie zunächst überlegen, was geschehen soll. Bereiche auf der rechten Seite der Kachel werden von den Elementen der linken Seite der Kachel fortgeführt. Dasselbe gilt natürlich auch für oben und unten. Das heißt natürlich auch, wie die einzelne Kachel aussieht ist für das Muster egal. Sehen Sie sich hierzu die Kacheln identkachel1.tif und identkachel2.tif aus den Beispielen zum Artikel auf der Heft-CD an (das Illustrator-Original liegt ebenfalls bei). Sie ergeben ein völlig identisches Muster mit einem Buchstaben im Zentrum. Der einzige, aber manchmal gravierende Unterschied ist, wo das Muster beginnt: beginnt es mit dem ganzen Buchstaben oder mit einem Anschnitt des Buchstabens.
Wie schon beim Beispiel von Amplid erwähnt, können Sie ein Muster auch nur in einer Richtung wiederholen. Sinnvoll ist dies beispielsweise bei Verläufen. Hier wird nur ein horizontaler oder vertikaler Streifen benötigt. Wie lang oder hoch dieser sein muss, hängt natürlich davon ab, was auf höheren Auflösungen geschehen soll.
Verläufe lassen sich auch sehr gut mit anderen Mustern kombinieren. Am besten bauen Sie hier zuerst die Kachel mit dem Muster und erweitern dann die Arbeitsfläche nach unten oder rechts. In einer unter dem Muster liegenden Ebene legen Sie dann den Verlauf an und füllen die Musterebene komplett auf. Der Verlauf selbst muss so breit sein wie die jeweilige Kachel. Das Beispiel Hintergrundverlauf.png beziehungsweise im Original Hintergrundverlauf.psd zeigt sehr schön, wie ein vertikaler Verlauf mit einem Muster mit diagonalen Linien verbunden werden kann. Ähnlich geschieht das beispielsweise bei der oben erwähnten Website von Ripcurl.
Logos
Web-2.0-Effekt: Hintergrundtapete
Die Königsdisziplin ist eine Kachel mit Logo. Die hohe Schwierigkeit bei dieser Kachelvariante liegt darin, dass gekachelte Logos unheimlich schnell langweilig und eintönig aussehen. Im vorliegenden Beispiel soll sich das ändern. Zum Entwerfen kommt hier Illustrator zum Einsatz. Bei Logos ist meist ein Vektorgrafikprogramm empfehlenswert, da das Logo in Vektorform vorliegt – oder vorliegen sollte. Sie finden vier Einzelschritte bei den Beispielen zu diesem Artikel (logorapport1.ai bis logorapport4.ai). Das Logo selbst besteht aus einer Kombination von Schriften, die größtenteils von Dafont.com stammen. Die Schriften sind allerdings schon in Zeichenwege umgewandelt. Bevor Sie einen Rapport anlegen, müssen Sie sich für die Proportionen entscheiden. Im vorliegenden Fall sind das 340 x 270 Pixel. Um den Rapport zu schneiden, kommt hier ein Rechteck als Rahmen zum Einsatz. Der Rahmen sollte an Pixeln ausgerichtet sein, damit genau geschnitten werden kann. Die Linie kann anfangs sichtbar sein. Später wird das Rechteck dann als Maske verwendet und der Rahmen fällt weg. Um ein wenig Spannung zu erzeugen, drehen Sie das Logo um 45 Grad.
Im zweiten Schritt wird aus dem Rapport ein erstes Testmuster. Sie kopieren die Elemente einfach mit einem Versatz von 340 Pixel nach rechts oder 270 Pixel nach unten. Jetzt erkennen Sie Löcher in der Komposition und können diese schließen. Hier kommen dafür beispielsweise rote Zahlen als Gestaltungselemente zum Einsatz. Diese neuen Elemente müssen Sie natürlich in alle im Testmuster enthaltenen Rapporte einfügen. Hier sieht man auch ein Problem beim Entwickeln von Mustern. Wenn beispielsweise die Position eines Wortes wie hier Ladung nicht optimal passt, müssen Sie diese entweder in allen Rapporten des Musters ändern oder das Wort überall löschen und neu duplizieren.
Wenn Sie in einem Muster zu wenige Variationen haben, können Sie auch aus vier einzelnen Rapporten einen neuen Rapport machen und dort Einzelheiten verändern. Dann ist die Grundform des Musters zwar etwas größer, Sie haben damit aber ein spannenderes Muster erzeugt. Solche Detailkorrekturen haben die Autoren im vorliegenden Beispiel bei den R-Symbolen und beim X umgesetzt. Testen können Sie das auch wieder, indem Sie den nun größer gewordenen Rapport wieder kopieren und jetzt natürlich um die doppelte Breite oder Höhe verschieben.
Zum Schluss wandert das fertige Muster dann in Photoshop. Dort passen Sie die Größe an und achten auf die Übergänge. Mit der schon erwähnten Musterfunktion können Sie das Ergebnis Ihrer Arbeit noch einmal testen und dann beispielsweise als PNG exportieren.
Mehr
In Sachen Kacheln ist Ihrer Fantasie natürlich keine Grenze gesetzt. Der klassischen Tapete nachempfundene Ornamente sind beispielsweise eine interessante Alternative. Und auch die Mischung von Vorder- und Hintergrund oder von diversen Hintergrundbildern bietet neue Spannung. Bei der einfachen Mischung von Vorder- und Hintergrund gibt es ein Vordergrundelement, das sich in den Hintergrund einpasst und so dessen Regelmäßigkeit aufbricht. Beim Überlagern mit mehreren Hintergrundbildern kommt Transparenz zum Einsatz. Diese kann im Web entweder mit PNG-24 (mit den bekannten Problemen und Umgehungsmöglichkeiten für den Internet Explorer 6) oder mit Flash erzeugt werden.
Generell gilt: Wenn Hintergrundtapeten nicht aussehen wie die klassischen Kästchen aus längst vergangenen Webzeiten, können sie eine Website wirklich aufwerten. Natürlich sollte der Einsatz recht dezent und durchdacht erfolgen, aber mit dem richtigen diagonal gestreiften Verlauf oder einem spannenden Logo-Rapport hebt man sich heute deutlich vom Web-Einheitsbrei ab.