Photoshopdesign (Webseite)

Status
Nicht offen für weitere Antworten.

Samaka

Grünschnabel
Hallo liebe Community! :)


Ich hab' eine Frage, die mir einfach keine Ruhe lässt. Es geht um das designen einer Webseite mit Photoshop. Ich beschäftige mich schon sehr lange mit HTML und seit kurzem auch mit CSS und Dreamweaver Ebenen. Ich wollte immer schon wissen, was im Moment die angesagteste Methode, eine Webseite zu erstellen ist. Mir wurde gesagt dass man mit CSS und Ebenen so ziemlich das meiste realisieren kann und daher möchte ich mich noch tiefer damit beschäftigen!

Wie sieht es denn mit Euch aus? Also, wie beginnt ihr mit einer Webseite?
Angenommen, ihr macht das Design mit Photoshop .. schaut ganz fein aus .. DOCH, was macht ihr dann, wenn ihr das Design habt und den Rest im Dreamweaver mit Ebenen und CSS vollenden möchtet?

Das wäre einmal überhaupt die wichtigste Frage! Ich finde einfach kein Tutorial wo das beschrieben ist. Ich kann simple Webseiten mit CSS und Ebenen schon erstellen, aber da zeichne ich schnell eine Ebene mit Dreamweaver, eventuell mit Hintergrundfarbe und Text .. mehr ist da nicht drinnen. CSS ist ja nicht das Problem, sondern die Ebenen! Ich schaue mir hin und wieder den Quelltext auf verschiedensten Seiten an und sehe, dass fast alle mit CSS und Ebenen erstellt worden sind. Ich hab ganz einfach keine Ahnung wie man mit Photoshop ein Design entwirft und das ganze dann mit Dreamweaver realisiert. Ebenen ein -und ausblenden, css formatierungen, usw. sind alles keine Probleme, ich weiß anscheinend das leichteste vom ganzen Prinzip nicht .. :(

Ich hoffe ihr wisst was ich meine? .. Hm, ein Beispiel noch zum Abschluss:

Ich weiß ja wie ich das Design slicen kann mit Photoshop und dann als Bilder abspeichern. Gut, jetzt habe ich die Bilder, wie ich jetzt mit Tabellen weitermachen muss, weiß ich aber wie funktioniert das mit den Ebenen, also hauptsächlich die Positionierung von den einzelnen Bildern, die ich ja mit Photoshop schon gesliced habe, da ich ein -und ausblenden ja schon beherrsche!



Ich hoffe jemand hat mich verstanden und hilft mir bei meinem Problem ..






Liebe Grüße, Samaka
 
Ich persönlich fühle mich beim Arbeiten durch grafische Click&Drag Oberflächen gestört.
Meine HTML-, sowie meine PHP- und CSS-Codes erstelle ich von Hand mit einem tollen Text-Editor der sich Notepad ++ nennt.
http://notepad-plus.sourceforge.net/uk/screenshots.php?lang=de

Angenommen, ihr macht das Design mit Photoshop .. schaut ganz fein aus .. DOCH, was macht ihr dann, wenn ihr das Design habt und den Rest im Dreamweaver mit Ebenen und CSS vollenden möchtet?

Das ist in meinem Fall genau umgekehrt.
Zwar mache ich mir ein paar Gedanken über das Design. Doch das nur schematisch.
Am Anfang steht der Code !
Ich frage mich erstmal was meine Web-Anwendung können, bzw was sie dem Benutzer bieten soll.
Dann mache ich mir Gedanken über die Umsetzung.
Dazu nutze ich Charts, bzw Mindmaps um meine Gedanken zu strukturieren.
http://de.wikipedia.org/wiki/Mindmap
Da ich objektorientiert Programmiere kann ich mein Vorhaben in einzelne Problematiken zergliedern und z.B. einzelne Komponenten sowie Fähigkeiten der Web-Anwendung separat in Classes behandeln.
http://de.wikipedia.org/wiki/Objektorientierte_Programmierung
So kann ich progressiv jede Problematik abarbeiten.
Der weitere Punkt ist, ich arbeite mit Templates.
http://de.wikipedia.org/wiki/Template_Engine
http://de.wikipedia.org/wiki/Template-Toolkit
Was mir erlaubt meinen Code getrennt vom Design zu behandeln.
Während der Code-Entwicklungsphase arbeite ich noch mit Dummy-Templates ohne jegliches Design.
Wenn das abgeschlossen ist, kann ich mir dann meine HTML-Templates schreiben und grafische Elemente designen.
Der weitere Vorteil des Template-Systems ist, dass ich auch mit mehreren Designs pro Web-Anwendung arbeiten kann.
Man kennt sowas z.B. von den PHPBB2 Foren.


Mein Tip an dich ist..
Beschäftige dich mehr mit Handarbeit und der Theorie um die Web-Programmierung.
Grafische Anwendungen zum Zusammenklicken von Web-Seiten halte ich eher für behindernd beim Lernen von HTML/CSS.
 
Vielen Dank für deine Antwort! :)

Ich habe mir die Links angeschaut und du machst das sehr professionell. Das bewundere ich, nur werde ich lange nicht so weit sein wie du .. :rolleyes:

Ich möchte ja gern langsam anfangen und mit ganz simplen Designs das ganze Prinzip lernen. Eine Art Portfolio, wo der Contentbereich zentriert in der Mitte liegt und gleich darüber 3 Navigationselemente wie z.B. "Home", "Bilder" und "About me"! Mit dieser Art von Design würde ich eben gerne beginnen. Da würde ich ja gar keine Templates brauchen, da ich es ja auch lernen möchte und alles selber schreiben möchte. Jetzt geht es eben nur mehr darum, WIE ich das ganze mit Ebenen im Dreamweaver erstellen kann. Ich müsste wissen, wie ich genau die einzelnen Elemente (z.B. "Home", "Bilder", usw.) in Dreamweaver platzieren kann, so wie es auch in meinem Photoshopdesign aussieht. Oder soll man überhaupt keine Slices erstellen? Wie komme ich aber dann zu den einzelnen Ebenen?. Das Design ist echt kein Problem, denn ich lerne auch Photoshop in der Schule und in der Freizeit spiele ich mich auch sehr gerne.

Trotzdem möchte ich dir nochmal Danken für die Hilfe, nur vielleicht könnte noch jemand genauer erklären wie das mit den Ebenen funktioniert, die mir einfach keine Rue lassen! :rolleyes:



Liebe Grüße, Samaka
 
ich glaube du solltest dich direkt am Anfang von Dreamweaver trennen. Lad dir einen Texteditor mit Syntaxhighlight runter (Weaverslave/Notepad++ oä.). Ich habe den Fehler begangen und auch mit einem WYSIWYG-Editor angefangen, dass hat mich 2 Jahre zurückgeworfen.
Geh am besten auf http://self.html.de und mache zunächst ein Tabellendesign, das hilft dir später Divs zu verstehen, die eigentlich zur Konzeption von Layouts da sind.

Es wird zwar erst länger dauern, deine Homepage zu erstellen, mit mehr und mehr Übung wirst du aber jeden WYSIWYG Editor in Punkto Schnelligkeit und vor allem Valität übertreffen.
 
Status
Nicht offen für weitere Antworten.
Zurück