Hintergrundgrafik Tutorial

Ein Leser schrieb mir eine Mail, in der er fragte, wie ich den Background dieser Websitegemacht habe. Diese Mail gibt mir einen guten Anlass, ein neues Tutorial zu eben diesemThema zu schreiben. Im ersten Teil werde ich über die eigentliche Erstellung der Grafikenschreiben 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 dieserwunderbaren glücklichen Unfälle. Aus diesem Grund bestand diese Grafik ewig nur als ein Jpeg, ohneeine passende Photoshop Datei. Es hat etwas gedauert, aber ich habe den Effekt fast vollständigrekonstruieren können.

Photoshop

Die Arbeit in Photoshop war nichts umwerfend Neues. Meine Grundtechniken im Umgang mitTexturen 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 Mustergefunden. Die schwierigste Aufgabe bestand darin, das passende Muster auszuwählen. Der Rest wareneinfachste Photoshop Ebenentranzparenzen. Das folgende Bild, zeigt alle verwendete Grafiken undihre Tranzparenzwerte.

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

Hintergrund Grafik

DetailEine kleine Anmerkung noch, die ich als wichtig empfinde. Diese Textur besteht primär aus der braunenStofftextur und der weißen Schmucktextur. Ich habe hier noch ein Bild mit nur minimal verändertemTranzparenzwert der Schmucktextur. Eine Änderung von nur 4% nimmt der gesamten Textur ihre Unruhe inden 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 sindetwas komplizierter als einfarbige Hintergründe. Aus diesem Grund bestand die Hintergrundgrafik dieser Websitebis vor kurzem, aus einer einzigen Grafik, die im Bodytag definiert war. Der Vorteil? Es sind keine zusätzlichenDIVs notwendig. Der Nachteil? Wirklich alles hängt an dieser einen Grafik, die nur dem obersten Elementzugeordnet ist.

Das zweite Problem war ein größeres bzw. ein hässlicheres. Egal wieviel Inhalt die Seite besaß,die Grafik würdeimmer vollständig das Browserfenster füllen und unten, aus dem Footer heraus laufen, ein Phänomen, welchesich “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?