Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Photoshop CC Grundkurs

Photoshop und Dreamweaver

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Photoshop-Bilder können in Dreamweaver für den Gebrauch auf einer Website umgewandelt und mit der Originaldatei synchronisiert werden. Der Quelltext einer CSS-Vorlage kann ebenfalls aus Photoshop in den Dreamweaver-Quelltext kopiert werden.

Transkript

Schauen wir uns jetzt an, wie Photoshop mich bei der Arbeit mit Dreamweaver unterstützen kann. Als allererstes lege ich in Dreamweaver eine neue Site an. Wir gehen dazu auf "Sites verwalten", erzeugen eine neue Site. Nennen wir sie hier einfach mal "Test", und legen die neue Site auf dem Desktop an. Hier z.B. in einen Site-Ordner. Wichtig ist, dass ich innerhalb des Sites-Ordners auch einen Ordner später für Bilder habe. Ich lege den auch gleich an, und wähle jetzt als allererstes diesen Site-Ordner aus. Den soll er jetzt als lokalen Site-Ordner haben. In den erweiterten Einstellungen kann ich jetzt noch einen Standard-Bilder-Ordner definieren. Das ist dann entsprechend mein "Images"-Ordner. Und das Ganze kann ich jetzt speichern. Natürlich möchte ich für meine neue Site auch eine neue HTML-Datei. Wir nehmen hier "Kein Layout", aber den Dokumenttyp HTML5. Und klicken einfach mal auf "Erstellen". Meiner neuen Site möchte ich jetzt ein Bild hinzufügen. Dazu speichern wir das Dokument als "Index.html" ab, und wollen jetzt hier ein Bild auf die Seite platzieren. Ich habe ein entsprechendes Bild hier auch schon in Photoshop vorbereitet, und ich speichere es jetzt einfach als Photoshop-Datei in den Website-Ordner ab: "Desktop - Site - Images". Aus PSD speichern wir es, und schließen es hier in Photoshop. Jetzt gehe ich zurück zu Dreamweaver, und wenn ich hier einmal auf "Aktualisieren" gehe, taucht hier mein PSD-Dokument auf. Jetzt ist es klar, ein Photoshop-Dokument kann ich nicht direkt auf einer Webseite benutzen, aber ich kann es einfach per "Drag und Drop" hier in die Entwurfsansicht ziehen. Und Dreamweaver fragt mich jetzt, mit was für einer Qualität ich das Bild optimieren möchte. Ich kann also jetzt sagen: Ich möchte es hier als JPEG haben, mit einer Qualität von 68. Ich bestätige das mit "OK", und speichere jetzt mit dieser Qualitätsstufe ein JPEG ab. Ich brauch noch einen Alternativtext. Auch  hier wieder "OK". Auf meiner Seite liegt jetzt ein entsprechendes JPEG. Das Schöne ist, dass die beiden synchronisiert sind. D.h., wir gehen mal hier nach links oben, dort zeigt mir Dreamweaver so ein kleines Icon an, zeigt, dass das Bild entsprechend synchron ist mit der Photoshop-Datei. Möchte ich jetzt Änderungen machen, klicke ich auf das PS-Zeichen, und in Photoshop wird tatsächlich die PSD-Datei wieder geöffnet. Nicht das, was ich in Dreamweaver hatte. Hier kann ich Änderungen machen, z.B. "Ebenen ausblenden", "Farbkorrekturen hinzufügen" oder ähnliches, mein Dokument speichern und schließen, wieder zurückkehren zu Dreamweaver und Dreamweaver zeigt jetzt an, dass das Bild vom Originalelement geändert wurde. Klicke ich hier unten auf "Aktualisieren", so werden mir jetzt hier die Änderungen angezeigt, werden entsprechend übernommen. Wir können sehen hier, die Balkons tauchen auch wieder auf. Das ist jetzt eine Möglichkeit, mit Photoshop und Dreamweaver zusammenzuarbeiten, wenn es um die Erstellung von Bildern geht. Wenn ich das Photoshop-Dokument nicht auf dem Webserver später haben möchte, dann kann ich das hier in den erweiterten Einstellungen der Website - ich habe hier einen Doppelklick auf diese Liste gemacht, um die Zeit-Einstellungen zu öffnen. Und dort unter "Cloaking", dort kann ich sagen, wenn ich dieses Cloaking aktiviere: "Photoshop-Dokumente sollen nicht auf den Webserver übertragen werden". Speichern wir das Ganze, mit "OK" bestätigen. Dann sehe ich, die PSP-Datei wird durchgestrichen. Spätestens, wenn ich jetzt einen FDP-Update meiner Webseite mache - wenn ich das Ganze auf dem Webserver bereitstelle, dann ist mein JPEG und meine HTML-Datei dort, aber nicht das Photoshop-Dokument. Ein zweiter Anwendungs-File, wenn ich das Bild noch einmal lösche, könnte sein, dass ich mir CSS-Stile in Photoshop kopieren möche. Und dafür habe ich ein Design vorbereitet. Das möchte ich jetzt hier entsprechend umsetzen. Und ich sehe z.B. ein Teil des Designs, hier so ein Button, der nutzt einen Verlauf. Das ist eine Formebene, die heißt "Button oben". Auf dieser Ebene ist ein Verlauf angebracht. Das Schöne ist, ich kann mit einem Rechtsklick in Photoshop sagen, ich möchte mir die CSS-Stile dieses Verlaufes kopieren. Das geht auch für Text. Wenn ich dann zu Dreamweaver gehe, und lege mir ein "diff", an und gebe dem beim Klassennamen den gleichen Namen wie meiner Ebene im Photoshop - das war "Button oben" - sage "OK", dann habe ich natürlich erstmal nur ein Diff. Hier in meinem Header, dort kann ich die Stile hinzufügen. Ich verwende dazu ein Style-Tag und beende es auch hier. Zwischen diese beiden Style-Tags kann ich meinen Quelltext aus Photoshop, was ich aus der Zwischenablage habe, einfügen. Dementsprechend, wenn ich mir das Ganze im Browser anschaue - speichere das - kann ich sehen, ich übernehme entsprechend die Formatierung aus Photoshop über die CSS-Eigenschaften. Das ist natürlich eine feine Sache, insbesondere weil ich das bearbeiten kann. Vielleicht wollte ich die Positionsangaben nicht haben, dann kann ich die löschen, wenn es mir nur um die Verläufe geht. D. h., die CSS sind entsprechend in Dreamweaver weiter bearbeitbar. Wir haben gesehen, wie man mit Photoshop und Dreamweaver zusammenarbeitet. Dass ich auf der einen Seite Bilder benutzen kann, die ich irgendwo in meinem Design verwende für den Inhaltsbereich, und dass ich die Möglichkeit habe, bei dem Design Informationen aus meiner Photoshop-Datei in CSS-Stile in Dreamweaver umzuwandeln.

Photoshop CC Grundkurs

Lernen Sie in dieser umfassenden Basisschulung, wie Photoshop "denkt", wie Sie die zahlreichen Werkzeuge nutzen und was Sie mit Ebenen, Auswahlen oder Masken machen können.

14 Std. 54 min (159 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.06.2013

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!