Hintergrundgrafik Tutorial

Ein Leser schrieb mir eine Mail, in der er fragte, wie ich den Background dieser Website gemacht habe. Diese Mail gibt mir einen guten Anlass, ein neues Tutorial zu eben diesem Thema zu schreiben. Im ersten Teil werde ich über die eigentliche Erstellung der Grafiken schreiben und im zweiten Teil über die Einbindung durch den Einsatz von CSS.

Lustigerweise ist diese Version der Grafik, die momentan auch hier in Verwendung ist, einer dieser wunderbaren glücklichen Unfälle. Aus diesem Grund bestand diese Grafik ewig nur als ein Jpeg, ohne eine passende Photoshop Datei. Es hat etwas gedauert, aber ich habe den Effekt fast vollständig rekonstruieren können.

Photoshop

Die Arbeit in Photoshop war nichts umwerfend Neues. Meine Grundtechniken im Umgang mit Texturen habe ich ausführlich in dem Texturen-Tutorial erklärt. Wer dieses also noch nicht kennt, es empfiehlt sich als Grundlagen Tutorial.

Ich wollte eine Hintergrundgrafik mit einem Muster haben und keinen einfarbigen Hintergrund. Da es sich nicht lohnt, das Rad neu zu erfinden, habe ich bei Squidfingers eine Unmenge Muster gefunden. Die schwierigste Aufgabe bestand darin, das passende Muster auszuwählen. Der Rest waren einfachste Photoshop Ebenentranzparenzen. Das folgende Bild, zeigt alle verwendete Grafiken und ihre Tranzparenzwerte.

Das Bild, zeigt alle verwendete Grafiken und ihre Tranzparenzwerte. Verwendet wurden nur die zu sehenden Texturen, in verschiedenen Tranzparenzwerten, auf einem blaugrauen Hintergrund (#8F97A3).

Hintergrund Grafik

Detail

Eine kleine Anmerkung noch, die ich als wichtig empfinde. Diese Textur besteht primär aus der braunen Stofftextur und der weißen Schmucktextur. Ich habe hier noch ein Bild mit nur minimal verändertem Tranzparenzwert der Schmucktextur. Eine Änderung von nur 4% nimmt der gesamten Textur ihre Unruhe in den Strukturen. Mit nur 4% Erhöhung wirkt die Schmucktextur zu perfekt und verliert ihre zerbrochene Wirkung, die nur bei 20% wirklich subtil aber sichtbar ist.

Grundsätzlich gibt es folgendes Problem mit Hintergrundgrafiken. Schlagschatten auf Musterhintergründen sind etwas komplizierter als einfarbige Hintergründe. Aus diesem Grund bestand die Hintergrundgrafik dieser Website bis vor kurzem, aus einer einzigen Grafik, die im Bodytag definiert war. Der Vorteil? Es sind keine zusätzlichen DIVs notwendig. Der Nachteil? Wirklich alles hängt an dieser einen Grafik, die nur dem obersten Element zugeordnet ist.

Das zweite Problem war ein größeres bzw. ein hässlicheres. Egal wieviel Inhalt die Seite besaß,die Grafik würde immer vollständig das Browserfenster füllen und unten, aus dem Footer heraus laufen, ein Phänomen, welches ich „Footer Bleeding“ nenne.

Footer Bleeding

Footer Bleeding

Dies zu verhindern, gelingt nur, wenn man Hintergrundmuster- und Schlagschattengrafik trennt und separat in die jeweils passenden DIVs einbindet. Dies ist in der neuen Version geschehen und das Footer Bleeding ist Geschichte. Was sollte nun von dem Ganzen hängenbleiben?