29
07

barcode

Hintergrundgrafik Tutorial

Ein Leser schrieb mir eine Mail, in der er fragte, wie ich den Back­ground die­ser Web­site gemacht habe. Diese Mail gibt mir einen guten Anlass, ein neues Tuto­rial zu eben die­sem Thema zu schrei­ben. Im ers­ten Teil werde ich über die eigent­li­che Erstel­lung der Gra­fi­ken schrei­ben und im zwei­ten Teil über die Ein­bin­dung durch den Ein­satz von CSS.

Lus­ti­ger­weise ist diese Ver­sion der Gra­fik, die momen­tan auch hier in Ver­wen­dung ist, einer die­ser wun­der­ba­ren glück­li­chen Unfälle. Aus die­sem Grund bestand diese Gra­fik ewig nur als ein Jpeg, ohne eine pas­sende Pho­to­shop Datei. Es hat etwas gedau­ert, aber ich habe den Effekt fast voll­stän­dig rekon­stru­ie­ren kön­nen.

Pho­to­shop

Die Arbeit in Pho­to­shop war nichts umwer­fend Neues. Meine Grund­tech­ni­ken im Umgang mit Tex­tu­ren habe ich aus­führ­lich in dem Texturen-Tutorial erklärt. Wer die­ses also noch nicht kennt, es emp­fiehlt sich als Grund­la­gen Tuto­rial.

Ich wollte eine Hin­ter­grund­gra­fik mit einem Mus­ter haben und kei­nen ein­far­bi­gen Hin­ter­grund. Da es sich nicht lohnt, das Rad neu zu erfin­den, habe ich bei Squid­fin­gers eine Unmenge Mus­ter gefun­den. Die schwie­rigste Auf­gabe bestand darin, das pas­sende Mus­ter aus­zu­wäh­len. Der Rest waren ein­fachste Pho­to­shop Ebe­nen­tranz­pa­ren­zen. Das fol­gende Bild, zeigt alle ver­wen­dete Gra­fi­ken und ihre Tranz­pa­renz­werte.

Das Bild, zeigt alle ver­wen­dete Gra­fi­ken und ihre Tranz­pa­renz­werte. Ver­wen­det wur­den nur die zu sehen­den Tex­tu­ren, in ver­schie­de­nen Tranz­pa­renz­wer­ten, auf einem blau­grauen Hin­ter­grund (#8F97A3).

Hintergrund Grafik

Detail Eine kleine Anmer­kung noch, die ich als wich­tig emp­finde. Diese Tex­tur besteht pri­mär aus der brau­nen Stoff­tex­tur und der wei­ßen Schmuck­tex­tur. Ich habe hier noch ein Bild mit nur mini­mal ver­än­der­tem Tranz­pa­renz­wert der Schmuck­tex­tur. Eine Ände­rung von nur 4% nimmt der gesam­ten Tex­tur ihre Unruhe in den Struk­tu­ren. Mit nur 4% Erhö­hung wirkt die Schmuck­tex­tur zu per­fekt und ver­liert ihre zer­bro­chene Wir­kung, die nur bei 20% wirk­lich sub­til aber sicht­bar ist.

Grund­sätz­lich gibt es fol­gen­des Pro­blem mit Hin­ter­grund­gra­fi­ken. Schlag­schat­ten auf Mus­ter­hin­ter­grün­den sind etwas kom­pli­zier­ter als ein­far­bige Hin­ter­gründe. Aus die­sem Grund bestand die Hin­ter­grund­gra­fik die­ser Web­site bis vor kur­zem, aus einer ein­zi­gen Gra­fik, die im Body­tag defi­niert war. Der Vor­teil? Es sind keine zusätz­li­chen DIVs not­wen­dig. Der Nach­teil? Wirk­lich alles hängt an die­ser einen Gra­fik, die nur dem obers­ten Ele­ment zuge­ord­net ist.

Das zweite Pro­blem war ein grö­ße­res bzw. ein häss­li­che­res. Egal wie­viel Inhalt die Seite besaß,die Gra­fik würde immer voll­stän­dig das Brow­ser­fens­ter fül­len und unten, aus dem Foo­ter her­aus lau­fen, ein Phä­no­men, wel­ches ich “Foo­ter Blee­ding” nenne.

Foo­ter Blee­ding

Footer Bleeding

Dies zu ver­hin­dern, gelingt nur, wenn man Hintergrundmuster- und Schlag­schat­ten­gra­fik trennt und sepa­rat in die jeweils pas­sen­den DIVs ein­bin­det. Dies ist in der neuen Ver­sion gesche­hen und das Foo­ter Blee­ding ist Geschichte. Was sollte nun von dem Gan­zen hän­gen­blei­ben?

0 Kommentare

Für diesen Eintrag wurden die Kommentare geschlossen.