[CS5] - Dokumentgröße für ein web-basiertes Layout

[Anne2009]

Hallo,
ich weiß nicht, ob ich mich korrekt ausgedrückt habe. Deshalb hier mein Anliegen ausführlich:
Ich möchte in Photoshop ein Layout erstellen, welches ich anschließend als .psd-Datei an einen Entwickler übergebe, der mir die grundlegende Umsetzung dieses Layouts in HTML5/CSS3 anfertigt (flexibles Layout). Es sollen drei Beispielseiten erstellt werden, mit denen ich dann später arbeiten kann. HTML/CSS-Basis-Kenntnisse sind vorhanden. Von der Gestaltung der Startseite und den folgenden 3 Beispielseiten habe ich konkrete Vorstellungen, deshalb kommt ein gekauftes Layout (Template) für mich nicht in Frage.

Meine Frage bei der Erstellung des Layouts in PS: Wie groß muss/sollte die Bildgröße sein (Höhe, Breite)??
Anne

 

[Funnymaker18]

Wenn ichs richtig verstanden habe, willst du die komplette Seite (so wie man sie sieht) mit Photoshop gestalten.

Das kommt darauf an wie groß die Seite sein soll. Lieber mehr als zu wenig. 1920x1080 ist Standard, geh eine Stufe höher auf 2560*1440 oder noch mehr. Darunter auf keinen Fall.

 

[Castordesigns]

Es kommt auf das Design darauf an, wie dynmaisch das Layout sein soll.
Es gibt Layouts, bei denen mehr oder weniger alles mit CSS3 umgesetzt ist, das bildschirmfüllend ist, egal wie breit und hoch der Bildschirm ist.
Dann gitb es Layouts, die mit Grafiken umgesetzt sind so, dass die Grafiken eine ganz bestimmte Pixelbreite haben.

Im ersten Fall spielt die grösse keine Rolle, sollte jedoch einer Bildschirmauflösung entsprechen. Ich würde 1920x1080 empfehlen.

Im zweiten Fall solltest du dir überlegen, wie breit die Website bzw. der Container denn sein soll. Solltest du eine bestimmte Breite bevorzugen, kann ich dir das 960grid-system empfehlen: http://960.gs/

 

[Anne2009]

Hallo,
danke für Eure Antworten!
Ich möchte so viel wie möglich mit CSS3 umsetzen, deshalb werde ich wie empfohlen 1920x 1080 nehmen.
Mittlerweile habe ich mich intensiv mit CSS3 und HTML5 beschäftigt und glaube, das irgendwie hinzukriegen. Aber zunächst bastle ich noch an dem Layout mit PS.
Anne

 

[patrick_l]

Das kommt darauf an wie groß die Seite sein soll. Lieber mehr als zu wenig. 1920x1080 ist Standard, geh eine Stufe höher auf 2560*1440 oder noch mehr. Darunter auf keinen Fall.

Murks! Die Größe des Desktop interessiert gleich Null. Orientieren sollte man sich wenn überhaupt am "meist" verwendeten Viewport. Zusätzlich sollte man gleich von Anfang an ein Grid verwendeten. Genau dieses sorgt für ein harmonischen Gesamteindruck, erleichtert zu gleich die spätere Umsetzung. Egal ob und welches Framework / Grid System letztendlich verwendet wird.

Im ersten Fall spielt die grösse keine Rolle, sollte jedoch einer Bildschirmauflösung entsprechen. Ich würde 1920x1080 empfehlen.

Die Bildschirmauflösung wie bereits erwähnt spielt keine Rolle. Lediglich der Viewport ist interessant. Sprich der Bereich, der abzüglich Taskleiste und Browser-Elemente wie die Scrollbar, Bookmark-List und der Gleichen, zur Darstellung der Website übrig bleibt. Bei Desktops wäre man dann bei 960 Pixeln, die das meiste abdecken.

Leg ein Dokument mit 1200 Pixeln in der Breite an und setze eine zentrierte Hilfslinie. Anschließend eine Auswahl von 960 (> 996) Pixeln aufziehen. Dieser Bereich wird später der Inhaltsbereich sein. Alles andere wird dann rein mit HTML und CSS umgesetzt. Sollte die Website responsive werden, sollte man "mobile first" berücksichtigen.

Sprich, die Seite erst für mobile Endgeräte gestalten. Dafür idealerweise mehre Dokumente anlegen oder zumindest in Ebenengruppen und/oder Kompositionen organisieren. Davon mal ganz ab, wäre der beauftragte Programmierer der richtige Ansprechpartner. Unter Umständen hat eben dieser genaue Vorgaben. Stellt dir vielleicht sogar eine Muster-PSD bereit.

Hier von mir zwei Vorlagen. Einmal ein 12 sowie 16 Kolumnen Grid, an dem du dich orientieren kannst. Einfach die jeweilige PSD öffnen, neue Gruppen für bestimmte Elemente und Bereiche anlegen, und an den jeweiligen Hilfslinien ausrichten.

-

Liebe Grüße, Patrick

 

[Anne2009]

Hallo Patrick,
vielen Dank für Deine Antwort und die mitgelieferten -grid.zip's. Leider bin ich nun nicht der Profi, der damit problemlos umgehen kann. Ich konzentriere mich zur Zeit auf das Layout mit PS und werde mir Deinen Vorschlag von meinem beauftragten Programmierer erklären lassen. Und dann sehen wir weiter!
Nochmals vielen Dank!
Anne