Platziere in Dreamweaver (Design- oder Code-Ansicht) den Einfügepunkt auf deiner Seite an der Stelle, an der du das Bild einfügen möchtest.
Zuletzt aktualisiert am
27. April 2021
Erfahren Sie, wie Photoshop in Dreamweaver integriert ist. Arbeiten Sie mit Smartobjekten in Photoshop/Dreamweaver-Workflows.
Photoshop-Integration
Anmerkung
Die Photoshop-Integrations-Workflows werden in Dreamweaver 21.0 und neueren Versionen eingestellt.
Du kannst Photoshop-Grafikdateien (PSD-Format) in Web-Seiten in Dreamweaver einfügen und Dreamweaver diese als Web-taugliche Bilder (GIF-, JPEG- und PNG-Formate) optimieren lassen. Wenn du das machst, fügt Dreamweaver das Bild als Smart Object ein und behält eine Live-Verbindung zur ursprünglichen PSD-Datei bei.
Du kannst auch alle oder Teile eines mehrschichtigen oder in mehrere Slices unterteilten Photoshop-Bildes in eine Web-Seite in Dreamweaver einfügen. Wenn du jedoch aus Photoshop kopierst und einfügst, wird keine Live-Verbindung zur ursprünglichen Datei beibehalten. Um das Bild zu aktualisieren, nimm deine Änderungen in Photoshop vor und kopiere und füge erneut ein.
Anmerkung
Wenn du diese Integrationsfunktion häufig verwendest, möchtest du deine Photoshop-Dateien möglicherweise in deiner Dreamweaver-Seite speichern, um einfacheren Zugriff zu haben. Wenn du das machst, stelle sicher, dass du sie verbirgst, um eine Offenlegung der ursprünglichen Assets sowie unnötige Übertragungen zwischen der lokalen Seite und dem Remote-Server zu vermeiden.
Ein Tutorial über die Photoshop-Integration mit Dreamweaver, finden Sie unter Integrieren von Dreamweaver mit Photoshop (auf Englisch).
Workflow für Smartobjekte und für Photoshop/Dreamweaver
Es gibt zwei Haupt-Workflows für die Arbeit mit Photoshop-Dateien in Dreamweaver: den Kopieren/Einfügen-Workflow und den Smart Objects-Workflow.
Kopieren/Einfügen-Workflow
Der Kopieren/Einfügen-Workflow ermöglicht es dir, Slices oder Ebenen in einer Photoshop-Datei auszuwählen und dann Dreamweaver zu verwenden, um sie als Web-taugliche Bilder einzufügen. Wenn du den Inhalt später aktualisieren möchtest, musst du jedoch die ursprüngliche Photoshop-Datei öffnen, deine Änderungen vornehmen, dein Slice oder deine Ebene erneut in die Zwischenablage kopieren und dann das aktualisierte Slice oder die aktualisierte Ebene in Dreamweaver einfügen. Dieser Workflow wird nur empfohlen, wenn du einen Teil einer Photoshop-Datei (zum Beispiel einen Abschnitt eines Design-Comps) als Bild auf eine Web-Seite einfügen möchtest.
Smart-Objekte-Workflow
Wenn du mit vollständigen Photoshop-Dateien arbeitest, empfiehlt Adobe den Smart Objects-Workflow. Ein Smart Object in Dreamweaver ist ein Bild-Asset, das auf einer Web-Seite platziert wurde und eine Live-Verbindung zu einer ursprünglichen Photoshop (PSD)-Datei hat. In der Dreamweaver-Designansicht wird ein Smart Object durch ein Symbol in der oberen linken Ecke des Bildes gekennzeichnet.
Wenn das Webbild (das heißt, das Bild auf der Dreamweaver-Seite) nicht mit der ursprünglichen Photoshop-Datei synchron ist, erkennt Dreamweaver, dass die ursprüngliche Datei aktualisiert wurde, und zeigt einen der Pfeile des Smart Object-Symbols in rot an.Wenn du das Web-Bild in der Designansicht auswählst und auf den Button „Vom Original aktualisieren" im Eigenschaftsinspektor klickst, wird das Bild automatisch aktualisiert und spiegelt alle Änderungen wider, die du an der ursprünglichen Photoshop-Datei vorgenommen hast.
Wenn du den Smart-Objects-Workflow verwendest, musst du Photoshop nicht öffnen, um eine Web-Grafik zu aktualisieren.Darüber hinaus sind alle Änderungen, die du an einem Smart-Objekt in Dreamweaver vornimmst, zerstörungsfrei.Das bedeutet, du kannst die Web-Version des Bilds auf deiner Seite ändern, während das ursprüngliche Photoshop-Bild intakt bleibt.
Du kannst ein Smart-Objekt auch aktualisieren, ohne das Webbild in der Designansicht auszuwählen.Das Assets-Bedienfeld ermöglicht es dir, alle Smart-Objekte zu aktualisieren, einschließlich Bilder, die möglicherweise nicht im Dokumentfenster auswählbar sind (beispielsweise CSS-Hintergrundbilder).
Bildoptimierungseinstellungen
Für den Kopieren/Einfügen- und den Smartobjekte-Workflow können Sie im Dialogfeld Bildoptimierung Optimierungseinstellungen festlegen. In diesem Dialogfeld können Sie das Dateiformat und die Bildqualität festlegen. Wenn Sie ein Slice oder eine Ebene kopieren oder eine Photoshop-Datei zum ersten Mal als Smartobjekt einfügen, zeigt Dreamweaver dieses Dialogfeld an, damit Sie das Webbild ganz leicht erstellen können.
Wenn Sie eine Aktualisierung eines bestimmten Slice bzw. einer bestimmten Ebene kopieren und einfügen, wendet Dreamweaver die ursprünglichen Einstellungen an und erstellt das Webbild anhand dieser Einstellungen neu. Ebenso verwendet Dreamweaver bei der Aktualisierung eines Smartobjekts über den Eigenschafteninspektor dieselben Einstellungen, die Sie beim erstmaligen Einfügen des Bilds verwendet haben. Sie können die Einstellungen eines Bilds jederzeit ändern, indem Sie das Webbild in der Entwurfsansicht auswählen und dann im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten klicken.
Speichern von Photoshop-Dateien
Wenn Sie ein Webbild eingefügt haben und die Photoshop-Originaldatei nicht in Ihrer Dreamweaver-Site gespeichert haben, erkennt Dreamweaver den Pfad zur Originaldatei als absoluten lokalen Dateipfad. (Dies gilt sowohl für den Kopieren/Einfügen- als auch für den Smartobjekte-Workflow.) Wenn beispielsweise der Pfad zu Ihrer Dreamweaver-Site „C:\Sites\meineSite“ lautet und die Photoshop-Datei unter „C:\Bilder\Photoshop“ abgespeichert ist, erkennt Dreamweaver die Originaldatei nicht als Teil der Site „meineSite“. Dies führt zu Problemen, wenn Sie die Photoshop-Datei für andere Team-Mitglieder freigeben möchten, da Dreamweaver die Datei lediglich als auf einer bestimmten lokalen Festplatte verfügbar erkennt.
Wenn Sie die Photoshop-Datei jedoch in Ihrer Site speichern, richtet Dreamweaver einen Site-relativen Pfad zur Datei ein. Alle Benutzer, die Zugriff auf die Site haben, können den richtigen Pfad zur Datei aufbauen, vorausgesetzt, Sie haben auch die Originaldatei für sie zum Herunterladen bereitgestellt.
Ein Videotutorial über die nahtlose Bearbeitung mit Photoshop finden Sie unter Nahtlose Bearbeitung mit Photoshop (auf Englisch).
Smartobjekte erstellen
Wenn du ein Photoshop-Bild (PSD-Datei) in deine Seite einfügst, erstellt Dreamweaver ein Smartobjekt.Ein Smart-Objekt ist ein web-taugliches Bild, das eine Live-Verbindung zum ursprünglichen Photoshop-Bild aufrechterhält. Wann immer du das ursprüngliche Bild in Photoshop aktualisierst, gibt dir Dreamweaver die Möglichkeit, das Bild in Dreamweaver mit einem Klick auf eine Schaltfläche zu aktualisieren.
Wählen Sie Einfügen > Bild.
Anmerkung
Du kannst die PSD-Datei auch aus dem Bedienfeld Dateien auf die Seite ziehen, wenn du deine Photoshop-Dateien in deiner Website speicherst.In diesem Fall können Sie den nächsten Schritt überspringen.
Wählen Sie im Dialogfeld Bildquelle auswählen die Photoshop-Bilddatei im PSD-Format aus, indem Sie auf die Schaltfläche „Durchsuchen“ klicken und zu der Datei navigieren.
Passen Sie die Optimierungseinstellungen in dem angezeigten Dialogfeld Bildoptimierung nach Bedarf an und klicken Sie auf „OK“.
Speichere die weboptimierte Grafikdatei an einem Ort innerhalb des Stammordners deiner Website.
Dreamweaver erstellt das Smart Object basierend auf den ausgewählten Optimierungseinstellungen und platziert eine weboptimierte Version des Bildes auf deiner Seite.Das Smart Object erhält eine Live-Verbindung zum ursprünglichen Bild und informiert dich, wenn die beiden nicht mehr synchron sind.
Anmerkung
Wenn Sie zu einem späteren Zeitpunkt die Optimierungseinstellungen für ein Bild in Ihren Seiten ändern möchten, wählen Sie das Bild aus und klicken im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten. Im Dialogfeld Bildoptimierung können Sie dann die gewünschten Änderungen an dem Bild vornehmen. Änderungen im Dialogfeld Bildoptimierung werden angewendet, ohne dass negative Auswirkungen auf die Originaldatei entstehen. Die ursprüngliche Photoshop-Datei wird in Dreamweaver niemals geändert. Stattdessen wird das Webbild immer anhand der Originaldaten neu erstellt.
Ein Videotutorial über die nahtlose Bearbeitung mit Photoshop finden Sie unter Nahtlose Bearbeitung mit Photoshop (auf Englisch).
Smartobjekte aktualisieren
Wenn du die Photoshop-Datei änderst, mit der dein Smart Object verknüpft ist, benachrichtigt dich Dreamweaver, dass das Web-optimierte Bild nicht mehr mit dem Original synchron ist.In Dreamweaver werden Smart Objects durch ein Symbol in der oberen linken Ecke des Bildes gekennzeichnet.Wenn das Web-optimierte Bild in Dreamweaver mit der ursprünglichen Photoshop-Datei synchron ist, sind beide Pfeile im Symbol grün.Wenn das Web-optimierte Bild nicht mit der ursprünglichen Photoshop-Datei synchron ist, wird einer der Pfeile des Symbols rot.
Um ein Smartobjekt mit dem aktuellen Inhalt der ursprünglichen Photoshop-Datei zu aktualisieren, wählen Sie das Smartobjekt im Dokumentfenster aus und klicken dann im Eigenschafteninspektor auf die Schaltfläche Von Original aktualisieren.
Anmerkung
Du benötigst keine Photoshop-Installation, um das Update von Dreamweaver aus durchzuführen.
Mehrere Smartobjekte aktualisieren
Du kannst mehrere Smart Objects gleichzeitig über das Assets-Bedienfeld aktualisieren.Das Assets-Bedienfeld ermöglicht es dir auch, Smart Objects anzuzeigen, die möglicherweise nicht im Dokumentfenster auswählbar sind (z. B. CSS-Hintergrundbilder).
Klicke im Bedienfeld Dateien auf die Registerkarte Assets, um
Bereich-Assets anzuzeigen.
Achten Sie darauf, dass die Bildansicht ausgewählt ist. Klicken Sie andernfalls auf die Schaltfläche Bilder.
Wählen Sie im Bedienfeld „Elemente“ die einzelnen Bildelemente aus. Wenn du
ein Smart Object auswählst, siehst du das Smart Object-Symbol in der oberen
linken Ecke des Bildes. Bei normalen Bildern wird dieses Symbol nicht angezeigt.
Klicke für jedes Smart Object, das du aktualisieren möchtest, mit der rechten Maustaste
auf den Dateinamen und wähle Vom Original aktualisieren aus. Du kannst auch bei gedrückter Strg-Taste klicken,
um mehrere Dateinamen auszuwählen und sie alle gleichzeitig zu aktualisieren.
Anmerkung
Du musst Photoshop nicht installiert haben, um das Update von Dreamweaver aus durchzuführen.
Größe von Smartobjekten ändern
Du kannst ein Smart Object im Dokumentfenster genauso in der Größe ändern wie jedes andere Bild.
Wähle das Smart Object im Dokumentfenster aus
und ziehe die Größenregler, um die Größe des Bildes zu ändern. Du kannst die
Breiten- und Höhenproportionen beibehalten, indem du die Umschalttaste gedrückt hältst, während
du ziehst.
Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Von Original aktualisieren.
Wenn du das Smart Object aktualisierst, wird das Web-Bild zerstörungsfrei in der neuen Größe gerendert, basierend auf dem aktuellen Inhalt der Originaldatei und den ursprünglichen Optimierungseinstellungen.
Originaldatei eines Smart Objects in Photoshop bearbeiten
Nachdem du ein Smart Object auf deiner Dreamweaver-Seite erstellt hast, kannst du die ursprüngliche PSD-Datei in Photoshop bearbeiten. Nachdem du deine Änderungen in Photoshop vorgenommen hast, kannst du das Web-Bild in Dreamweaver ganz einfach aktualisieren.
Anmerkung
Stelle sicher, dass du Photoshop als primären externen Bildeditor festgelegt hast.
Wählen Sie das Smartobjekt im Dokumentfenster aus.
Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Bearbeiten.
Nehmen Sie die Änderungen in Photoshop vor und speichern Sie die neue PSD-Datei.
Wählen Sie in Dreamweaver erneut das Smartobjekt aus und klicken Sie auf die Schaltfläche Von Original aktualisieren.
Anmerkung
Wenn Sie die Größe des Bilds in Photoshop geändert haben, müssen Sie die Größe des Webbilds in Dreamweaver zurücksetzen. Smartobjekte werden in Dreamweaver nur entsprechend den Inhalten der ursprünglichen Photoshop-Datei und nicht entsprechend ihrer Größe aktualisiert. Um die Größe eines Webbilds mit der Größe der ursprünglichen Photoshop-Datei zu synchronisieren, klicken Sie mit der rechten Maustaste auf das Bild und wählen Größe auf Original zurücksetzen.
Smartobjekt-Statuswerte
Die folgende Tabelle listet die verschiedenen Zustände für Smart Objects auf.
|
Smartobjekt-Status |
Beschreibung |
Empfohlene Aktion |
|
Bilder sind synchronisiert |
Das Webbild ist mit den aktuellen Inhalten der ursprünglichen Photoshop-Datei synchronisiert. Die Attribute für Breite und Höhe im HTML-Code entsprechen den Abmessungen des Webbilds. |
Keine. |
|
Originalelement wurde geändert |
Die ursprüngliche Photoshop-Datei wurde nach dem Erstellen des Webbilds in Dreamweaver geändert. |
Über die Schaltfläche Von Original aktualisieren im Eigenschafteninspektor können Sie die beiden Bilder synchronisieren. |
|
Abmessungen des Webbilds weichen von der ausgewählten HTML-Breite und -Höhe ab |
Die Attribute für Breite und Höhe im HTML-Code unterscheiden sich von den Abmessungen für Breite und Höhe des Webbilds, das in Dreamweaver beim Einfügen erstellt wurde. Wenn die Abmessungen des Webbilds kleiner sind als die ausgewählten Werte für die Breite und Höhe im HTML-Code, wird das Webbild möglicherweise verpixelt angezeigt. |
Über die Schaltfläche „Von Original aktualisieren“ im Eigenschafteninspektor können Sie das Webbild aus der ursprünglichen Photoshop-Datei neu erstellen. Beim Neuerstellen des Bilds in Dreamweaver werden die aktuell festgelegten Abmessungen für Breite und Höhe verwendet. |
|
Abmessungen des Originalelements sind zu klein für die ausgewählte HTML-Breite und -Höhe |
Die Attribute für Breite und Höhe im HTML-Code sind größer als die Abmessungen für Breite und Höhe der ursprünglichen Photoshop-Datei. Das Webbild wird möglicherweise verpixelt dargestellt. |
Erstellen Sie keine Webbilder, deren Abmessungen größer sind als die Abmessungen der ursprünglichen Photoshop-Datei. |
|
Originalelement wurde nicht gefunden |
Die im Textfeld „Original“ des Eigenschafteninspektors angegebene ursprüngliche Photoshop-Datei kann in Dreamweaver nicht gefunden werden. |
Korrigieren Sie den Dateipfad im Textfeld „Original“ des Eigenschafteninspektors oder verschieben Sie die Photoshop-Datei in den derzeit angegebenen Speicherort. |
Auswahl aus Photoshop kopieren und einfügen
Du kannst ein ganzes Photoshop-Bild oder Teile davon kopieren und die Auswahl als webfähiges Bild in deine Dreamweaver-Seite einfügen. Du kannst eine einzelne Ebene oder mehrere Ebenen für einen ausgewählten Bereich des Bildes kopieren oder du kannst ein Slice des Bildes kopieren. Wenn du das tust, erstellt Dreamweaver jedoch kein Smart Object.
Anmerkung
Obwohl die Funktion „Von Original aktualisieren“ für eingefügte Bilder nicht verfügbar ist, können Sie die ursprüngliche Photoshop-Datei öffnen und bearbeiten, indem Sie das eingefügte Bild auswählen und im Eigenschafteninspektor auf die Schaltfläche Bearbeiten klicken.
Führen Sie in Photoshop einen der folgenden Schritte aus:
- Kopieren Sie eine einzelne Ebene ganz oder teilweise, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu kopierenden Bereich auswählen und dann Bearbeiten > Kopieren wählen. Auf diese Weise wird nur die aktive Ebene des ausgewählten Bereichs in die Zwischenablage kopiert. Falls in dem Bild ebenenbasierte Effekte enthalten sind, werden diese nicht kopiert.
- Kopieren und reduzieren Sie mehrere Ebenen, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu kopierenden Bereich auswählen und dann Bearbeiten > Auf eine Ebene reduziert kopieren wählen. Dadurch werden alle aktiven und niedrigeren Ebenen des ausgewählten Bereichs auf eine Ebene reduziert und in die Zwischenablage kopiert. Falls mit manchen dieser Ebenen ebenenbasierte Effekte verknüpft sind, werden diese ebenfalls kopiert.
- Kopieren Sie ein Bildsegment, indem Sie mithilfe des Segmentauswahlwerkzeugs das entsprechende Segment auswählen und dann Bearbeiten > Kopieren wählen. Dadurch werden alle aktiven und darunter liegenden Ebenen des Bildsegments auf eine Ebene reduziert und in die Zwischenablage kopiert.
Anmerkung
Über Auswählen > Alles auswählen können Sie schnell ein ganzes Bild zum Kopieren auswählen.
Platziere in Dreamweaver (Design- oder Code-Ansicht) den Einfügepunkt
an der Stelle auf deiner Seite, an der das Bild eingefügt werden soll.
Wählen Sie Bearbeiten > Einfügen.
Nehmen Sie im Dialogfeld Bildoptimierung die gewünschten Änderungen an den Optimierungseinstellungen vor und klicken Sie auf „OK“.
Speichere die webfähige Grafikdatei an einem Ort innerhalb des
Stammordners deiner Website.
Dreamweaver definiert das Bild gemäß Ihren Optimierungseinstellungen und platziert eine webfähige Version des Bildes auf Ihrer Seite. Informationen zu dem Bild wie z. B. der Speicherort der ursprünglichen PSD-Quelldatei werden in einer Design Note gespeichert, unabhängig davon, ob Sie Design Notes für Ihre Site aktiviert haben. Die Design Note ermöglicht es Ihnen, aus Dreamweaver zu Ihrer ursprünglichen Photoshop-Datei zurückzukehren, um diese zu bearbeiten.
Eingefügte Bilder bearbeiten
Nachdem du Photoshop-Bilder in deine Dreamweaver-Seiten eingefügt hast, kannst du die Original-PSD-Datei in Photoshop bearbeiten. Bei Verwendung des Kopieren/Einfügen-Workflows empfiehlt Adobe, dass du deine Bearbeitungen immer an der Original-PSD-Datei vornimmst (anstatt am webfähigen Bild selbst) und dann erneut einfügst, um Single-Sourcing aufrechtzuerhalten.
Anmerkung
Stelle sicher, dass du Photoshop als primären externen Editor für den Dateityp eingestellt hast, den du bearbeiten möchtest.
Wähle in Dreamweaver
ein webfähiges Bild aus, das ursprünglich in Photoshop erstellt wurde, und führe
einen der folgenden Schritte aus:
- Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche Bearbeiten.
- Drücke Strg (Windows) oder Befehl (macOS), während du auf die Datei doppelklickst.
- Klicke mit der rechten Maustaste (Windows) oder bei gedrückter Strg-Taste (macOS) auf ein Bild, wähle Original bearbeiten mit aus dem Kontextmenü und wähle dann Photoshop.
Anmerkung
Dies setzt voraus, dass Photoshop als primärer externer Editor für PSD-Grafikdateien eingestellt ist. Du möchtest möglicherweise auch Photoshop als Standard-Editor für JPEG-, GIF- und PNG-Dateitypen festlegen.
Bearbeiten Sie die Datei in Photoshop.
Kehre zu Dreamweaver zurück und füge das aktualisierte Bild oder die
Auswahl in deine Seite ein.
Wenn Sie das Bild zu einem anderen Zeitpunkt erneut optimieren möchten, wählen Sie das Bild aus und klicken Sie im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten.
Optionen des Dialogfelds „Bildoptimierung“ einstellen
Beim Erstellen eines Smartobjekts oder Einfügen einer Auswahl aus Photoshop wird in Dreamweaver das Dialogfeld Bildoptimierung angezeigt. (Dieses Dialogfeld wird auch bei anderen Bildern angezeigt, wenn Sie ein bestimmtes Bild auswählen und im Eigenschafteninspektor auf die Schaltfläche Bildeinstellungen bearbeiten klicken.) In diesem Dialogfeld können Sie Einstellungen für webfähige Bilder mit einer geeigneten Kombination aus Farbe, Komprimierung und Bildqualität definieren und als Vorschau anzeigen.
Ein webfähiges Bild kann von allen aktuellen Webbrowsern angezeigt werden und sieht immer gleich aus, unabhängig davon, welches System oder welchen Browser der Betrachter verwendet. Im Allgemeinen wirken sich die Einstellungen entweder auf die Qualität oder auf die Dateigröße nachteilig aus.
Anmerkung
Die ausgewählten Einstellungen wirken sich nur auf die importierte Version der Bilddatei aus. Die ursprüngliche Photoshop-Datei im PSD-Format oder Fireworks-Datei im PNG-Format wird hingegen nie geändert.
Vorgabe
Wählen Sie eine Vorgabe aus, die Ihren Anforderungen am meisten entspricht. Die Dateigröße des Bildes wird basierend auf der gewählten Vorgabe geändert. Eine sofortige Vorschau des Bildes mit der angewendeten Einstellung wird im Hintergrund angezeigt.
Für Bilder, die mit einem hohen Maß an Klarheit angezeigt werden sollen, wählen Sie PNG24 für Fotos (Detailtreue) aus. Wähle GIF für Hintergrundbilder (Muster), wenn du ein Muster einfügst, das als Hintergrund der Seite fungieren soll.
Wenn Sie eine Vorgabe auswählen, werden die konfigurierbaren Optionen für die Vorgabe angezeigt. Wenn du die Optimierungseinstellungen weiter anpassen möchtest, ändere die Werte für diese Optionen.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
