Schritte um aus PSD-Datei eine Web-Projekt zu machen

F

Frank_hat_Fragen

Grünschnabel
Guten Tag, ich habe jetzt schon einiges herum probiert und gelesen, aber als blutiger Photoshop-Beginner stehe ich vor einer prinzipiellen Frage.

Erst einmal das Problem: Ich habe einem Bekannten zugesagt, ihm eine Web-Präsenz zu erstellen, er hätte von der Agentur fertige Vorlagen. HTML und etwas Programmieren kann ich. Nun bekam ich von der Agentur eine psd-Datei. Ich habe noch nie mit Photoshop gearbeitet. Habe mir wegen des Preis (ist ja irre teuer die Software) die 30-Tage-Testversion geladen. Komme jetzt also an die Daten ran.
In der PSD ist wunderschön ein Projekt aufgebaut mit verschiedenen Ebenen, dann sieht man die Unterseiten. Also ich komme an alles ran.

Nun meine Frage: Muss ich jetzt wirklich jedes Element separat speichern und komplett die ganze Seite neu aufbauen? Es gibt in PS eine Option Speichern für Web oder so ähnlich, aber dann wird die ganze Seite als Grafik gespeichert und das kann es ja nicht sein (wegen Ladezeiten und die Links sind ja farbig anders usw.)
Gibt es in PS eine Funktion, dass man ein ganzes Projekt als Web-Projekt speichert oder muss ich alles "händisch" kopieren und ein neues Web-Projekt erstellen?

Wenn letzteres, dann stellt sich mir die Frage, weshalb man überhaupt in PS Web-Projekte als Agentur erstellt, wenn danach sowieso wieder jemand für die Web-Präsenz alles zerstückeln muss. Bei einer 1000-€-Software dürfte man doch mehr Automatismus erwarten....


Vielen Dank für Infos, auch wenn ich als Anfänger vielleicht den Wald vor lauter Bäumen nicht sehe.
 
Hi,
also schalte erstmal alle Elemente ein die man auf einer bestimmten Unterseite sieht.
Nun deaktivierst du wieder die die mittels CSS bzw. dynamisch erzeugt werden, wie Texte und einfarbige Objekte.
Nun greifst du zum Slice Tool (k) und zerteilst dir die Grafiken bzw. ganze Webseite in einzelstücke. Du siehst dann so orangene Linien.
Nun gehst du über "Für Web und Geräte speichern" nun kannst du für jeden Slices eine eigene Einstellung zum Abspeichern vornehmen.
Wenn du nun auf Speichern gehst werden alle SLices abgespeichert und du kannst sie verwenden.

Viele Grüße
 
Danke für deine Hilfe.

Das Slice Tool finde ich nicht. Unter (k) steht bei mir 3-D-Objekt drehen.

Im Moment behelfe ich mir damit, dass ich in der Ebenen-Auswahl immer nur ein Objekt mir anzeigen lasse und dann das fürs Web exportiere als Grafik. Die Texte habe ich in Word kopiert, leider gingen die Farben und Formate verloren.
Gibt es da einen Trick oder muss ich alle in css neu formatieren?

Aber ich vermute, ich muss also jede Seite irgendwie zerschneiden und exportieren und in HTML neu zusammensetzen, sehe ich das richtig?
 
Ich nehme an, du hast dir CS4 runtergeladen. Dort befindet sich das sog. Slice-Werkzeug unterhalb
des Freistellungswerkzeuges, welches auch mit Shortcut C erreichbar ist.

btw: Du hast ja jetzt schon das richtige Stichwort bekommen ("slicen"). Dies mit den passenden
Suchbegriffen bei Google eingegeben und du findest eine Reihe an Tutorials, unter anderem
Slice & Umsetzung in HTML einer Webseite u.v.m.
 
Markus Kolletzky hat gesagt.:
Ich nehme an, du hast dir CS4 runtergeladen. Dort befindet sich das sog. Slice-Werkzeug unterhalb
des Freistellungswerkzeuges, welches auch mit Shortcut C erreichbar ist.
Zum Vergrößern anklicken....

Ja, habe das CS4. Freistellungswerkzeug finde ich, aber nicht das Slice-Werkzeug. Kann es sein, dass das ausgeblendet ist oder nur in gewissen Modi erscheint?
Markus Kolletzky hat gesagt.:
btw: Du hast ja jetzt schon das richtige Stichwort bekommen ("slicen"). Dies mit den passenden
Suchbegriffen bei Google eingegeben und du findest eine Reihe an Tutorials, unter anderem
Slice & Umsetzung in HTML einer Webseite u.v.m.
Zum Vergrößern anklicken....
Ja danke, das was ich da lese, bedeutet aber zu meiner Anfangsfrage, Photoshop kann keine Web-Sites speichern, sondern Grafiken bearbeiten. Für HP muss man andere Tools nehmen und aus PS alles getrennt speichern (mit Slice oder einzelne Ebenen gesondert speichern).

Kann Slice den die Farboptionen (u.a. Formattierungen / css) aus einem Text entnehmen und in html/css umwandeln? Oder ist das zu viel verlangt?
 
Das Slicewerkzeug befindet sich unter dem Freistellungswerkzeug. Wenn du dies mit der Maus in der Werkzeugpalette länger drückst, erscheinen auch die beiden Slice-Tools. Antworten auf deine weiteren Fragen findest du wunderbar in der Hilfe von Photoshop sowie in folgendem Video: [VIDEO ] Photoshop - Slicen leichtgemacht Eventuell lohnt sich auch die Anschaffung eines Buches welches ein Mitgliedes aus unseren Reihen in Kürze herausbringen wird: Webdesign mit Photoshop Grüße
 
Ja das ist zuviel verlangt. Du kannst zwarHtml mit Tabellen ausgeben aber das wars schon.
Den Shortcut für das Slicewerkzeug habe ich doch schon oben beschrieben. Damit bekommst du es auf jedenfall auch wenn du es in der Werkzeugleiste nicht findest.
Für Grafiken für Webseiten hat Adobe ansonsten noch das ehemalige Macromedia Fireworks im Programm.
Und bezüglich der HTML ausgabe aus Photoshop kannst du dir mal Sitegrinder ansehen.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück