Homepage designen - ?

[aposch]

Hallo Leute,

Ich kenne mich aus mit Photoshop und will jetzt endlich eine Homepage für unser Internetcafe machen.

Ich weis nicht wie ich anfangen soll mit dem Design, sprich ich weis nicht wie ich die Maße machen soll und welches Dateiformat ich machen soll, welche Auflösung und wie ich das ganze dann verlinke...Soll ich es dann ganz normal als PSD File speichern Und was für ein Farbmodus soll ich wählen

Auf Adobe Dreamweaver hab ich keine Lust ich möchte es lieber mit Photoshop machen...ich habe gehört da muss man slicen..ich weis auch nicht wie man das macht und dann in ne Tabelle setzen wie macht man das? Aber egal erst mache ich mal das Deisgn mit den Buttons und so.. danach stelle ich es hier mal rein und dann schauen wir mal weiter^^

Ich brauche halt erstmal diese GrundInfos

Danke schon einmal im Voraus
Aposch

 

[derpfaff]

Das ist gut
Ok, wo fange ich an...?
Dreamweaver: Dreamweaver ist kein Grafikprogramm sondern ein Programm um Webseiten zu "programmieren" - ein HTML-Editor.
Also "entweder oder" wird da schwierig

Als nächstes empfehle ich dir, dich mit den Grundlagen von HTML zu beschäftigen Es gibt viele Tutorials und selfhtml. Gerade letzteres ist ein tolles Nachschlagewerk

Auflösung: Welche Auflösung du wählst darfst du frei entscheiden. Der Standard liegt momentan bei 1024, würde ich sagen. Dabei ist zu beachten, dass du einen Browser mit Rahmen und Steuerelementen hast. Also ziehe an allen Seiten etwas ab!

Wenn du es als PSD-File speicherst, was willst du dann damit tun? Das Design erstellen? Das wird nicht funktionieren, da PSD ein Format ist, welches nur vn bestimmten Programmen gelesen werden kann. Nimm lieber jpeg oder gif. Teste, was davon gut aussieht und eine kleine Dateigröße hat.

Slicen.... im deutschen auch gerne "schneiden" genannt. Dabei erstellst du aus einem Design die ienzelnen teile wie Banner, Buttons und sonstige Grafiken. Ob du das benötigst, hängt vom Design ab. Ich erstelle oftmals alles einzeln, dann muss ich nix "slicen".

 

[aposch]

[...]Als nächstes empfehle ich dir, dich mit den Grundlagen von HTML zu beschäftigen Es gibt viele Tutorials und selfhtml. Gerade letzteres ist ein tolles Nachschlagewerk....

Hab ich auch schon^^ Aber ich werde es mal Tifer eingehen^^

Auflösung: Welche Auflösung du wählst darfst du frei entscheiden. Der Standard liegt momentan bei 1024, würde ich sagen. Dabei ist zu beachten, dass du einen Browser mit Rahmen und Steuerelementen hast. Also ziehe an allen Seiten etwas ab!

Also meinst du damit, dass ich dann die Hilfslinien an jeder Seite hinstellen soll, damit ich ein bisschen abstand habe? OK ich nehme dann 1024..und wie viel DPI soll ich wählen?

Wenn du es als PSD-File speicherst, was willst du dann damit tun? Das Design erstellen? Das wird nicht funktionieren, da PSD ein Format ist, welches nur vn bestimmten Programmen gelesen werden kann. Nimm lieber jpeg oder gif. Teste, was davon gut aussieht und eine kleine Dateigröße hat.

Ich weis ja was ein PSD File ist...aber ich habe gedacht da braucht man ein extra Dateiformat^^ Ich schau dann was besser ist.

Slicen.... im deutschen auch gerne "schneiden" genannt. Dabei erstellst du aus einem Design die ienzelnen teile wie Banner, Buttons und sonstige Grafiken. Ob du das benötigst, hängt vom Design ab. Ich erstelle oftmals alles einzeln, dann muss ich nix "slicen".

Also kann ich für jedes Element eine Ebene machen und ich muss dann nachher nichts ,,slicen,,?

mfg, Aposch

 

[lexz]

Hey,

also wenn ich dich Richtig verstanden habe, willst du mit dem eigentlichem Programmieren nichts zu tun haben.

Das heißt dann für mich, du erstellst alles in Photoshop, schneidest alles zu und belegst diese Sachen dann mit Funktionen in Image(war doch das Programm, welches mit PS installiert wird, oder?), wie zum Beispiel nen Link auf nen Button legen. Am Schluß speicherst du das dann noch fürs Web ab. Fertig ist es.

Meine Persönliche Meinung dazu ..., Bitte nehme nicht diesen Weg.
Nimm lieber die Ratschläge vom "derpfaff" an.

Erstelle ein Design in einem beliebegem Bildbearbeitungsprogramm The Gimp, Paint oder Photoshop, aufgrund derer erstellst du ein Box-Layout mit hilfe von CSS und HTML, als Füllplätze. Fülle diese mit Inhalt, hinterlege gegebenfalls diese mit Grafiken. Und fertig sollte deine Barrierefreie Homepage sein.

mfg

Alex

\\edit

Mit der Auflösung meinte er eigentlich eher sowas wie 924x760 oder so etwas, da du im Browser bist, du hast ja nicht die ganze Auflösung zu deiner Verfügung.

\\edit2

Danke
Btw, geile Signatur ->

Um die Welt zu verändern, brauch' ich schon den Quelltext!

 

[derpfaff]

@ Alexander: Danke für die Zustimmung, ich kann sie zurückgeben. Ebenfalls korrekte Ratschläge!

zu Photoshop: Natürlich solltest du alles auf seperaten Ebenen erstellen. Andernfalls bekommst du schon bei kleinsten Änderungen Probleme. Wenn du es dann "slicen" willst (ich kann diesen Ausdruck nicht leiden!), reduzierst du es beispielsweise auf eine Ebene - Sicherheitskopie vorher anlegen - und kannst dann per "strg+c", "strg+n" und "strg+v" die markierten Ausschnitte in neue Photoshopdateien exportieren. Speichern und fertig!
Was ich eigentlich meinte ist, dass du nicht das komplette Design in Photoshop gestalten musst. Viele Dinge, die man sich dort zurechtzaubert, bekommst du später in HTML/CSS nur schwer umgesetzt. Beschränke dich am besten auf wesentliche Dinge (z. B. Titel/Banner, eventuell Headline) und erstelle sie gleich in der korrekten Größe. dann musst du auch nichts zurechtschneiden...

Noch was vergessen:
Welche DPI-Zahl du verwenden musst, ist eigentlich simpel: 72dpi!
Warum? Weil ein Monitor nur 72dpi darstellen kann. Willst du für Printmedien Grafiken erstellen, dann kannst du über 300dpi/600dpi nachdenken

 

[schutzgeist]

Wenn du es dann "slicen" willst (ich kann diesen Ausdruck nicht leiden!), reduzierst du es beispielsweise auf eine Ebene - Sicherheitskopie vorher anlegen - und kannst dann per "strg+c", "strg+n" und "strg+v" die markierten Ausschnitte in neue Photoshopdateien exportieren. Speichern und fertig!

Muss er nicht mal.
Hilflienen ziehen (damit die Slices nicht verrutschen), Slices ziehen und dann einfach "Speichern unter für Web"

 

[aposch]

Also ich design jetzt mal meine Homepage, ich möchte sowieso das ganze einfach halten..ich möchte mich fast nur auf das Aussehen konzentrieren. Wenn ich dann alles gemacht habe komm ich nochmal auf diesen Threat zurück.

Danke!!

 

[DJTrancelight]

Hi Aposch,

ich möchte nur kurz den letzten Beitrag von derPfaff ergänzen. Was er meinte war, dass du in Photoshop für die Headergrafik, Navigationsbereich etc. eine einzelne Datei in der richtigen Größe anlegen solltest. Z.B. Header --> 190 x 760 Pixel 72 dpi usw.

Noch eine andere wichtige Sache! Ich habe auf den Link zu deiner Homepage gedrückt. Nette Idee und auch schön umgesetzt, nur wäre Microsoft sicher nicht so begeistert. Und wenn ein Anwalt zufällig auf die Seite findet kann es teuer werden, weil du
a) Das geschützte Firmenlogo verwendet und umgebaut hast
b) Das WindowsXP-Design verwendet hast.

An deiner Stelle würde ich das schleunigst entfernen. Kannst ja gerne mal bei Microsoft nachfragen, ob die dir das erlauben, ich glaube jedoch nicht....

 

[Beppone]

(...) Noch was vergessen:
Welche DPI-Zahl du verwenden musst, ist eigentlich simpel: 72dpi!
Warum? Weil ein Monitor nur 72dpi darstellen kann. Willst du für Printmedien Grafiken erstellen, dann kannst du über 300dpi/600dpi nachdenken

72 dpi sind überholt. Ein einfaches 19" LCD mit einer Auflösung von 1280 x 1024 Pixeln (0,294mm Pixelpitch) hat z.B. 86 dpi, bei 1440 x 900 (0,285mm) wären es 89 dpi, höher auflösende Monitore zeigen einen Pixelabstand von 0,250 mm, was 102dpi entspricht. Höchstauflösende Monitore (Medizinbereich, CAD) gibt es mit über 200 dpi.

Trotzdem ist richtig, dass sich die Frage nach der relativen Auflösung nicht stellt.

Grüße!

 

[derpfaff]

Ok, das ist interessant und auch für mich neu, obwohl ich in etwa diesen Bereich studiere...
Habe hier einen Artikel gefunden, der sich damit beschäftigt: Essay: 72dpi-Mythos

Die Frage ist für mich jetzt: sollte ich dann meine bisherige herangehensweise mit den 72dpi ändern? Sollte ich ab jetzt Layouts fürs Web mit rund 90dpi anfertigen?

Gruß,
derPfaff

\\Edit
Habe den Artikel nochmal gelesen und da steht tatsächlich: für Screendesign ist die Auflösung Banane... Also kann ich fürs Web auch Grafeiken mit 1dpi erstellen? Nur drucken ist dann schwierig? Ich bin echt erstaunt... :/