Komplexes Grafisches Template umsetzen

[Castordesigns]

Hallo zusammen
Vorneweg: Dies ist zwar ein Hilfe-such-Thread, aber er hat weder bei Photoshop noch bei HTML&CSS reingepasst weil die Problemstellung beide Bereiche umfasst.

Ich habe ein grafisches Design in PS gebastelt und möchte dieses nun umsetzen. Das Problem dabei ist, dass es sehr grafisch lastig ist.

Anhanden dieses Designs habe ich also eine Berechnung durchgeführt, wie ich das mit Bildern umsetzen möchte.
Alle nachfolgenden Überlegungen sowie Berechnungen beziehen sich nur auf den Hintergrund.

1. Weisses Grunge Hintergrund Pattern - 502x350px (jpg) - 16KB (x sowie y wiederholbar)
2. Roter linker Splash Rahmen Pattern des Inhalts - 150x500px (png) - 123KB (y-repeat)
3. Roter rechter Splash Rahmen Pattern des Inhalts - 150x500px (png) - 101KB (y-repeat)
4. Oranger Header mit Drache - 1260x400px (jpg) - 150KB
5. Footer; unteres Ende des Splash Rahmens - 1260x275px (png) - 400KB

Das ergibt zusammen, nur für den Hintergrund 790KB was irgendwie zuviel ist.
Hier noch einige wichtige Überlegungen:

1. Die Roten Rahmen links und rechts sind PNG weil ich einen Verlauf von 100% zu 0% Transparenz drinhab. Wenn ich dieselben Rahmen als JPG nehm, sieht das dann so aus:
   
   der Grund ist, dass das Design centered ist, und jeder eine andere Bildschirmaufösung hat. Es wird also eine Kante sichtbar sein.
2. Der Footer, als Abschluss ist ebenfalls ein PNG mit Verlauf von 100% zu 0%. Sonst würde es ja irgendwie so aussehen:
   
   Ferner ist enden die Roten Rahmen ja je nach Seitenlänge an einem anderen Ort im Pattern, weshalb ich den Verlauf von 100% zu 0% brauche.

Tjo nun ist meine Frage an euch: Wie würdet ihr das lösen? Wirklich jeder Ansatz kann mir weiterhelfen.
Vielen Dank schon im Voraus und ich hoffe schwer, dass ihr mir helfen könnt.

/edit: JPG sind bis zum geht nicht mehr kompirmiert und die pngs habe ich sogar noch nach exportieren aus Photoshop nochmals komprimiert!

 

[Lichtschutzfaktor]

AW: Komplexes Grafisches Template umsetzen

Hi,

wenn du dir das mal, besonders den Teil über die Nachteile durchliest, wird dir klar werden, das du niemals auf so geringe Dateigrößen wie beim JPG kommst. Und das bei deinem Bild Nr.2 ist eh klar da JPG nicht transparent kann.

Gruss Micha

 

[Castordesigns]

AW: Komplexes Grafisches Template umsetzen

Hi,

wenn du dir das mal, besonders den Teil über die Nachteile durchliest, wird dir klar werden, das du niemals auf so geringe Dateigrößen wie beim JPG kommst. Und das bei deinem Bild Nr.2 ist eh klar da JPG nicht transparent kann.

Gruss Micha

ehm Ja vielen Dank Leider ist damit das Problem nicht gelöst und darum geht es mir ja

 

[cebito]

AW: Komplexes Grafisches Template umsetzen

Das würde alles viel einfacher sein, hättest du dir mal im Vorfeld Gedanken darüber gemacht. Man könnte den Hintergrundpattern von einer zentrierten Position aus wiederholen, dann wäre er bei allen Auflösungen immer gleich an den Kanten des Contents. Aber wie willst du den dann mit dem anderen Pattern zusammenbringen?

Weisses Grunge Hintergrund Pattern - 502x350px (jpg) - 16KB (x sowie y wiederholbar)

1. Roter linker Splash Rahmen Pattern des Inhalts - 150x500px (png) - 123KB (y-repeat)
2. Roter rechter Splash Rahmen Pattern des Inhalts - 150x500px (png) - 101KB (y-repeat)
3. Oranger Header mit Drache - 1260x400px (jpg) - 150KB
4. Footer; unteres Ende des Splash Rahmens - 1260x275px (png) - 400KB

Bis 500px würde das noch hinhauen, spätestens dann hättest du mit jpg's Kanten. Bei 3500px wäre dann wieder alles gut bis 4000px, dann gehts erneut los :uhm: Alles was dazwischen zusammenpasst wäre reiner Zufall.
Du wirst also wohl oder übel große Grafikdateien in Kauf nehmen oder dich nochmal wohlüberlegt an die Sache dransetzen müssen.

 

[MainAngler]

AW: Komplexes Grafisches Template umsetzen

Sagt mir ob ich falsch liege, aber ich denke, dass sich das Design schon umsetzen lässt, wenn auch etwas anders als wohl geplant.

Mal sehen ob ihr versteht was ich meine:
Wenn sich der Inhalt der rechten und linken Spalte nicht großartig ändert, dann sollte es ja kein Problem sein der Seite feste Werte (Höhe und Breite) zuzuweisen.
Andernfalls müsste bei jedem Artikel (in der linken Spalte) ein Scrollbalken sein - jeder Artikel in einem extra Div so dass der Inhalt darin separat scrollbar ist.
Quasi so wie es schon rechts im Design, bei Teamspeak, angedeutet wurde.

Dann würde es mit dem Hintergrundbild im Body (?:uhm auch kein Problem geben, da es sich ja nicht kacheln müsste.

Ich verstehe die Problematik bei versch. Auflösungen, da würde ich ggf. nochmal im gesamten Hintergrund die Ränder per Transparenz mit einem Verlauf zu weiß bearbeiten

 

[JannisL]

AW: Komplexes Grafisches Template umsetzen

Erstmal zu deiner Frage: Lässt es sich umsetzten->Ja.
Zweitens: Das Layout sieht richtig gut aus!
Drittens: Du weißt wohl, dass du dass mit ein passendem Community-CMS umsetzten musst. Das wird nicht sehr leicht!
Viertens:

Wenn sich der Inhalt der rechten und linken Spalte nicht großartig ändert, dann sollte es ja kein Problem sein der Seite feste Werte (Höhe und Breite) zuzuweisen.

Da hast du Recht. Trotzdem würde ich mind. die linke Spalte so gestalten, dass sie sich dem Inhalt anpasst.

Andernfalls müsste bei jedem Artikel (in der linken Spalte) ein Scrollbalken sein - jeder Artikel in einem extra Div so dass der Inhalt darin separat scrollbar ist.

Wie kann man bitte in Div´s Scrollbalken machen ohne Frames?
Ich würde einfach eine bestimmte Länge Inhalt pro Artikel in der Vorschau bestimmen und fertig.

P.S.: Viel Spaß beim umsetzten . Ich würde eher dort ein richtigen Webdesigner arbeiten lassen, wenn es nicht zu teuer wird

 

[cebito]

AW: Komplexes Grafisches Template umsetzen

Wie kann man bitte in Div´s Scrollbalken machen ohne Frames?

Feste Höhe, overflow auto oder scroll... passt aber, machte sich einer die Mühe für ein tolles grafisches Layout, und verschandelt es dann mit "superschönen" Scrollbars :uhm:

 

[MainAngler]

AW: Komplexes Grafisches Template umsetzen

Wie kann man bitte in Div´s Scrollbalken machen ohne Frames?

Das geht und zwar ohne Frames!
Damit du es mir glaubst hab ich die Blockgrößen per Web-Developer eingeblendet.
Die Scrollbalken siehst du ja.

Wie das geht? Lern CSS!

Ich würde einfach eine bestimmte Länge Inhalt pro Artikel in der Vorschau bestimmen und fertig.

Das ist ja genau das was ich schon geschrieben habe - wenn sich der Inhalt nicht ändert...

@cebito
Stimmt schon, aber wenn jemand das Design so haben möchte und der Inhalt unterschiedlich lang wird.... bleiben nur Scrollbars.

 

[Castordesigns]

AW: Komplexes Grafisches Template umsetzen

Das würde alles viel einfacher sein, hättest du dir mal im Vorfeld Gedanken darüber gemacht. Man könnte den Hintergrundpattern von einer zentrierten Position aus wiederholen, dann wäre er bei allen Auflösungen immer gleich an den Kanten des Contents. Aber wie willst du den dann mit dem anderen Pattern zusammenbringen? Bis 500px würde das noch hinhauen, spätestens dann hättest du mit jpg's Kanten. Bei 3500px wäre dann wieder alles gut bis 4000px, dann gehts erneut los :uhm: Alles was dazwischen zusammenpasst wäre reiner Zufall.
Du wirst also wohl oder übel große Grafikdateien in Kauf nehmen oder dich nochmal wohlüberlegt an die Sache dransetzen müssen.

Hey der Gedanke ist richtig gut! Leider funktioniert er in diesem Fall nicht, weil es einen Überlegungsfehler drin hat:

1. Kanten bem linken Rand: Die wird es immer geben, da das Hintergrund Pattern ja das ganze Browserfenster füllt und der #wrapper (dessen linker Rand diese roten Splatter sind) zentriert dargestellt ist. Je nachdem wie gross das Browserfenster grad in der Breite eingestellt ist wird der linke Rahmen immer an einer anderen Stelle im Hintergrundpattern übergehen. Dasselbe gilt für den rechten Rand...
2. Der Footer: Dieser wird immer an einer anderen Stelle des Roten-
   Rahmen-Patterns übergehen weil der Rahmen je nach Seiteninhalt z.B. 2.3*Pattern lang ist oder vielleicht auch 4.6*Pattern

Der Gedanke ist aber eigentlich super. Funktioniert nur leider nicht.

Wenn sich der Inhalt der rechten und linken Spalte nicht großartig ändert, dann sollte es ja kein Problem sein der Seite feste Werte (Höhe und Breite) zuzuweisen.
Andernfalls müsste bei jedem Artikel (in der linken Spalte) ein Scrollbalken sein - jeder Artikel in einem extra Div so dass der Inhalt darin separat scrollbar ist.

Der Inhalt werde ich auf keinen Fall mit Scrollbars umsetzen. Vorher werde ich das Design ohne Bilder, Farben und JS machen. Der Grund dafür ist, dass die Usability einer Seite in meinen Augen immer wichtiger ist als das Design. Ferner ist in dem Template dann auch ein Forum integriert. Schonmal ein Forum in einem festen Rahmen gescrollt gehabt? voll mühsam.

Feste Höhe, overflow auto oder scroll... passt aber, machte sich einer die Mühe für ein tolles grafisches Layout, und verschandelt es dann mit "superschönen" Scrollbars :uhm:

Werde ich nicht machen, irgendwie werde ich es sonst vereinfachen.

Vielen Dank für die vielen Rückmeldungen hat wirklich gute Tipps dabei.

 

[JannisL]

AW: Komplexes Grafisches Template umsetzen

Das geht und zwar ohne Frames!
Damit du es mir glaubst hab ich die Blockgrößen per Web-Developer eingeblendet.
Die Scrollbalken siehst du ja.

Wie das geht? Lern CSS!

Bin ich schon seit einem halben Jahr dran . Nur ich habe noch kein richtiges Buch und muss mir deshalb alles raussuchen . Aber jetzt weiß ich noch mehr . Ok, benutzen werde ich sie eigentlich nie, aber wer nicht fragt bleibt dumm

 

[cebito]

AW: Komplexes Grafisches Template umsetzen

Hey der Gedanke ist richtig gut! Leider funktioniert er in diesem Fall nicht, weil es einen Überlegungsfehler drin hat:

Kein Überlegungsfehler, wenn du das Pattern als Hintergrund so definierst:

body{background:url(pattern.jpg) center top;}

dann setzt der Hintergrund in der Mitte an und wiederholt sich von der Mitte aus nach beiden Seiten und nach unten. Da dein Content Mittig ist, ist somit rechts und links davon, egal bei welcher Auflösung der Body-Hintergrund derselbe.
Ach ja, und wo ist das Problem beim Footer? Ich sehe keines. Nicht mal ein hausgemachtes

 

[Castordesigns]

AW: Komplexes Grafisches Template umsetzen

Kein Überlegungsfehler, wenn du das Pattern als Hintergrund so definierst:

body{background:url(pattern.jpg) center top;}

dann setzt der Hintergrund in der Mitte an und wiederholt sich von der Mitte aus nach beiden Seiten und nach unten. Da dein Content Mittig ist, ist somit rechts und links davon, egal bei welcher Auflösung der Body-Hintergrund derselbe.
Ach ja, und wo ist das Problem beim Footer? Ich sehe keines. Nicht mal ein hausgemachtes

Du bist mein Gott! Wie geil und simpel ist die Lösung denn eigentlich? das Problem für die Seitenränder wäre somit gelöst würde ich mal sagen (sofern ich die Pattern dahingehend anpasse, dass das eine das doppelte vom anderen ist und das kann ich ja )

Beim footer ist das Problem, dass der Seiteninhalt unterschiedlich lange ist. Das Footer pattern soll möglichst nahtlos in den Rahmen übergehen. Jedoch "bricht" das Rahmenpattern je nach Seitenlänge an einer anderen Stelle "ab". Manchmal nach einem Durchlauf, manchmal nach 3/4 des Patterns etc. weil das Pattern (500px Höhe) ja je nach Containerlänge so oder so oft wiederholt wird.
Darum habe ich ein PNG mit Verlauf von 100% bis 0% so, dass es an jeder Stelle einen fliessenden Übergang gibt.
(Wollte ich das Problem umgehen müsste ich z.B. per JS definieren, dass der Container nur immer ein vielfaches des Patterns sein darf, das ist aber ausserordentlich unschön weil dann je nach Seitenende ein grosser Leerraum entsteht)