Header einer Webseite gestalten

[Anton]

Hi,

dem Header meiner Webseite habe ich eine kachelbare Hintergrundgrafik hinzugefügt. Bei dieser Hintergrundgrafik handelt es sich um Leiterbahnen eines Motherboards.

Als Header hätte ich statt dieses zweidimensionalen Motherboardhintergrundes viel lieber eine dreidimensionalen Motherboardhintergrund.

Wie macht man denn sowas? Gibt es hierfür fertige Vorlagen, oder muss man sich einen solchen dreidimensionalen Hintergrund komplett selbst gestalten.

Wäre super wenn ihr mir einen Link geben könntet, der sich mit dieser Thematik auseinandersetzt.

[suit]

Wie macht man denn sowas? Gibt es hierfür fertige Vorlagen, oder muss man sich einen solchen dreidimensionalen Hintergrund komplett selbst gestalten.

wenn du einen "dreidimensionalen" hintergrund willst, also eine projetion mit perspektive, kannst du das ding unmöglich kacheln

Wäre super wenn ihr mir einen Link geben könntet, der sich mit dieser Thematik auseinandersetzt.

nutze ein grafikprogramm und verzerre dein hintergrundbild mit einer technik die sich "transformation" oder ähnliches nennt ;)

sprich du nimmst deine quadratische oder rechteckige textur und "verzerrst" so so (sprich verschiebst die eckpunkte) dass die kanten nicht mehr parallel dazu sind

dazu dürfte dich das thema perspektive interessieren

[Gunnar Bittersmann]

@@suit:

wenn du einen "dreidimensionalen" hintergrund willst, also eine projetion mit perspektive, kannst du das ding unmöglich kacheln

Das hängt von der Perspektive ab (no pun intended).

Bei Parallelprojektionen (wie bspw. Kavalierperspektive) sollte Kachelung möglich sein.

Bei Zentralperspektive natürlich nicht.

Live long and prosper,
Gunnar

[suit]

Bei Parallelprojektionen (wie bspw. Kavalierperspektive) sollte Kachelung möglich sein.

parallelprojektion ist eine projektion ohne perspektive (fluchtpunkt) - die kann man natürlich schon kacheln

Bei Zentralperspektive natürlich nicht.

ja, da der fluchtpunkt das bild verzerrt :)

[Harlequin]

Yerf!

wenn du einen "dreidimensionalen" hintergrund willst, also eine projetion mit perspektive, kannst du das ding unmöglich kacheln

Mit CSS wohl nicht, aber es gibt (gab?) Grafikprogramme, die perspektivisch kacheln können. Das einzige mir bekannte ist allerdings DPaint (AMIGA), in anderen Programmen konnte ich die Funktion bisher nicht finden. Wenn jemand einen guten Tip hat, immer her damit ;-)

Gruß,

Harlequin

[suit]

Mit CSS wohl nicht, aber es gibt (gab?) Grafikprogramme, die perspektivisch kacheln können. Das einzige mir bekannte ist allerdings DPaint (AMIGA), in anderen Programmen konnte ich die Funktion bisher nicht finden. Wenn jemand einen guten Tip hat, immer her damit ;-)

ja, aber die kachlen alle erst und erzeugen dann die perspektive - umgekehrt gehts nicht, da die kanten des tiles dann nicht mehr deckungsgleich sind ;)

[Harlequin]

Yerf!

ja, aber die kachlen alle erst und erzeugen dann die perspektive - umgekehrt gehts nicht, da die kanten des tiles dann nicht mehr deckungsgleich sind ;)

DPaint hat das in einem Schritt gemacht. Allerdings konnte man auf so einem 7,14MHz A500 bei größeren Flächen schon mal gemütlich einen Kaffee trinken gehen, bis der fertig war ;-)

Das Problem mit dem erst kacheln - dann perspektive ist, dass ich ein Problem habe eine Fläche über die komplette breite des Bildes zu füllen. Durch die Perspektive wird ja die hintere Kante verkürzt, womit das Ursprungsrechteck eigentlich eine (fast) unendliche Breite braucht, damit man keine Parallelogramm-Kanten sieht. (Es geht darum eine Bodentextur perspektivisch in das Bild zu legen)

Gruß,

Harlequin

[Anton]

Hallo,

eine Frage zu folgendem Vorgehen:

1.)
Von der Seite http://www.cgtextures.com/ habe ich mir eine kachelbare Textur heruntergeladen.

2.)
Zunächst habe ich diese Textur als Hintergrund meines Headers festgelegt. Dies hat soweit gut geklappt.

3.)
Ich möchte aus dieser Textur nun einen dreidimensionalen Headerhintergrund basteln. Dazu nutze ich z.B. das Grafikprogramm Gimp um die Kanten der kompletten Textur zu verzerren.

4.)
Mal angenommen ich habe die Kanten der Textur wie gewünscht verzerrt. Wie geht es denn nun weiter? Mal angenommen die verzerrte Textur hat eine Auflösung von 1024 x 700 Pixeln. Muss ich diese Textur jetzt auf eine bestimmtes Pixelmaß zurechtschneiden? Falls ja, dann kann ich die Webseite zwar so gestalten, dass der 3D-Header für die aktuelle Auflösung gut aussieht... was ist aber wenn ich die Auflösung ändere? Dann ist doch alles wieder futsch oder? Ist es möglich einen 3D-Header zu basteln, der bei allen Auflösungen gut aussieht?
nach oben nach unten

[Harlequin]

Yerf!

4.)
Mal angenommen ich habe die Kanten der Textur wie gewünscht verzerrt. Wie geht es denn nun weiter? Mal angenommen die verzerrte Textur hat eine Auflösung von 1024 x 700 Pixeln. Muss ich diese Textur jetzt auf eine bestimmtes Pixelmaß zurechtschneiden?

Man kann auch Hintergrundbilder einbinden, die größer als das Element sind und diese dann per background-position zurechtschieben.

Aber Pixelgrafiken werden dich immer einschränken, was das Layout angeht. Leider sind Vektorgrafiken in Webseiten noch nicht so richtig verwendbar, der IE kann kein SVG (nd das PlugIn dürften die wenigsten haben) und ob SVG als Hintergrundgrafik per CSS geht bleibt auszuprobieren (wird aber wohl auhc wenig bringen, da CSS die Hintergrundgrafik nicht skalieren kann...)

Gruß,

Harlequin

[Anton]

mmm so ein Mist...

... bringt das denn überhaupt etwas wenn ich jetzt versuche die Verzerrung der Textur mit Hilfe von Gimp hinzubekommen, wenn es sowieso nicht möglich ist den Kram bei allen Auflösungen richtig darzustellen?

Kannst du mir vielleicht sagen wo ich Informationen finden kann, die sich damit auseinandersetzen, wie man eine dreidimensionalle Textur korrekt bei allen Auflösungen darstellen kann?

[Harlequin]

Yerf!

... bringt das denn überhaupt etwas wenn ich jetzt versuche die Verzerrung der Textur mit Hilfe von Gimp hinzubekommen, wenn es sowieso nicht möglich ist den Kram bei allen Auflösungen richtig darzustellen?

Du musst halt das Layout an der stelle auf Pixel "festklopfen" und keine der relativen Maßangaben (wie z.B. em oder %) verwenden.

Kannst du mir vielleicht sagen wo ich Informationen finden kann, die sich damit auseinandersetzen, wie man eine dreidimensionalle Textur korrekt bei allen Auflösungen darstellen kann?

"Auflösung" ist ja sowiso die falsche Ausgangsbasis, da eher die Viewportgröße des Browsers entscheidend ist. Hinzu kommen dann noch Schriftgrößenänderung und Zoomfaktor. Du musst dei Grafik eben so einbinden, dass sie (und die direkt damit zusammenhängenden Elemente) unabhängig von diesen Einflussgrößen ist. Das ist einfach ein Kompromiss den man zwischen anpassungsfähigem layout und der verzierung mit Grafiken eingehen muss.

Vielleicht kannst du das ganze mal online stellen, mit einer Beschreibung wo genau das Problem liegt, vielleicht findet ja einer hier eine Lösung dafür. An einem konkreten Beispiel zu arbeiten ist immer leichter, als das ganze nur theoretisch abzuhandeln.

Gruß,

Harlequin