Anzeige
Tutorialbeschreibung

Integration mit Photoshop CS3 in Dreamweaver CS3 (3)

Integration mit Photoshop CS3 in Dreamweaver CS3 (3)

Wir haben in den ersten zwei Tutorials gesehen, wie man die Grundfunktionen des Spry Frameworks einsetzt.
Von vielen Dreamweaver-Benutzern wurde auch eine verbesserte Integration mit Photoshop gefordert, was nun endlich in CS3 realisiert wurde.
Wir werden in diesem Tutorial lernen, wie wir unseren Workflow mit den Funktionen von Dreamweaver und dem vereinfachtem und verbessertem PSD-Import verbessern können.
Wichtig: Voraussetzung ist Adobe Dreamweaver CS3 und Adobe Photoshop CS3 (Extended).


Schritt 1 - Eine neue Seite erstellen und eine Grafik auswählen

Wir benötigen eine neue Seite und eine PSD-Datei.
Für ersteres starten wir Dreamweaver, gehen auf "Datei --> Neu..." und geben dort folgendes an:

Übersicht 1:

Leere Seite
Seitentyp: HTML
Layout: 2 Spalten elastisch, linke Randleiste
DocType: XHTML 1.0 transitional
Layout-CSS: leer lassen
CSS-Datei anfügen: leer lassen

Abbildung 1:
Bilder


Wir verwenden hierbei eine Vorgabe eines Layouts, welche in Dreamweaver integriert ist. Diesen Vorgaben werden wir uns in einem speziellen Tutorial widmen, hierbei sind sie irrelevant.
Wir speichern dieses Dokument nun unter dem Namen "index.html" ab.

Nun benötigen wir eine PSD-Datei. Dazu öffnen wir Photoshop und gehen dort auf "Datei --> Neu...".
Im folgenden Fenster geben wir nun folgendes an:

Übersicht 2:

Name: integration
Vorgabe: Benutzerdefiniert (automatisch)
Größe: leer lassen
Breite: 500 Pixel
Höhe: 350 Pixel
Auflösung: 72 Pixel/Zoll
Farbmodus: RGB-Farbe 8-Bit
Hintergrundinhalt: transparent
Farbprofil: sRGB IEC61966-2.1
Pixel-Seitenverhältnix: Quadratische Pixel

Abbildung 2:
Bilder


Wenn wir die Datei erstellt haben, laden wir dieses Bild herunter, klicken auf das Bridge-Symbol in Photoshop, gehen in Bridge, wählen das Bild aus und gehen auf "Datei --> Platzieren --> In Photoshop".

Hilfestellung 1:
Bilder


Abbildung 3:
Bilder


Hilfestellung 2:
Bilder


Wir lassen die Größe des Bildes bei Standard, wechseln auf das "Verschieben-Werkzeug" und bestätigen das folgende Dialogfenster mit "Platzieren".
Wir haben nun ein Smart Objekt. Wendet man auf dieses Smart Objekt einen Filter an, wird dieser wie ein Ebeneneffekt gespeichert, d.h. wir können den Filter ein- und ausblenden, ohne einen Schritt rückgängig zu machen (non-destruktive Filter).

Hilfestellung 3:
Bilder


Danach wenden wir den Filter "Gaußscher Weichzeichner" an. Dazu gehen wir auf "Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner".

Hilfestellung 4:
Bilder


Dort nehmen wir folgende Einstellungen vor:

Übersicht 3:

Radius: 7 Pixel

Abbildung 4:
Bilder


Wir klicken danach auf "Datei --> Speichern unter" und speichern unsere Datei unter dem Namen "integration.psd".
Nun wollen wir das Bild in Dreamweaver als PSD-Datei platzieren.

Dies geht über zwei Methoden:
- Methode 1: Über "Datei --> Platzieren -> In Dreamweaver" mit Bridge
- Methode 2: Per Drag & Drop mit Bridge

Wir werden uns in nächsten Schritt mit beiden Methoden beschäftigen.

Schritt 2 - Die PSD-Datei in Dreamweaver platzieren

Wir wechseln zu Dreamweaver und haben unsere kleine aber feine Website.
Nun wollen wir im rechten Bereich unsere Grafik platzieren.

2.1 Methode 1 - Über "Datei --> Platzieren --> In Dreamweaver" mit Bridge

Wir öffnen Bridge, gehen dort auf "Datei --> Platzieren --> In Dreamweaver".
Dreamweaver sagt jetzt, nein du platzierst mir keine PSD-Datei in einer Website und es öffnet sich ein Fenster, in dem wir die Datei als GIF, JPG oder PNG speichern müssen.
Dieses Fenster kommt aus Fireworks und bietet uns Optimierungsfunktionen für die PSD-Datei.
Wir können das gewünschte Dateiformat, die Qualität, die Glättung, einige weitere Optionen, die Hintergrundfarbe und eine vorgegebene Einstellung wählen. Uns werden wichtige Informationen, wie die Ladezeit bei 56K, die Dateigröße und ein Vergleich angezeigt. In der Registerkarte "Datei" können wir die Bildgröße proportional und bikubisch neu auflösen.

Wir nehmen dort folgende Einstellungen vor:

Übersicht 4:

Format: PNG 32
Hintergrund: transparent

Abbildung 5:
Bilder


Nun fragt uns Dreamweaver noch, wo wir diese Datei speichern wollen und wir speichern sie unter dem Namen "integration.png".
Unsere Website sollte nun so aussehen:

Abbildung 6:
Bilder


Wenn alles so aussieht, habt ihr die Grundtechnik realisiert.

2.2 Methode 2 - Drag & Drop

Wir öffnen Bridge, minimieren es und ziehen die Grafik aus Bridge in Dreamweaver.
Nun kommt das Optimierungsfenster und wir geben dort folgendes ein:

Übersicht 4:

Format: PNG 32
Hintergrund: transparent

Im Grunde genommen nichts anderes als wie bei Methode 1.

Schritt 3 - Die Datei aktualisieren

Wir haben unsere PSD-Datei in Dreamweaver, alles schön und gut, nur wollen wir jetzt auf die schnelle etwas an der PSD-Datei ändern.
Dies geht über eine Methode:
- Methode 1: Die Datei in Photoshop speichern und gruppiert kopieren

3.1 Methode 1 - Die Datei in Photoshop speichern und gruppiert kopieren

Wir öffnen die Datei "integration.psd" in Photoshop, löschen den Smartfilter und wenden den Filter "Ozeanwellen" auf die Ebene an.
Der Filter kann unter "Filter --> Verzerrungsfilter --> Ozeanwellen" gefunden werden.

Hilfestellung 5:
Bilder


Das ganze sollte dann etwa so aussehen:

Abbildung 7:

Bilder


Nun erstellen wir eine Auswahl, wählen alle Ebenen aus und gehen auf "Bearbeiten --> Auf eine Ebene reduziert kopieren". Wir fügen dies dann in Dreamweaver ein, während das erste Bild in dort selektiert ist.

Hilfestellung 6:

Bilder


Fertig. Das Fazit?

Adobe hat Dreamweaver und Photoshop wirklich gut miteinander integriert. Die neuen Optimierungsfunktionen und die schnelle Integration und die einfache Aktualisierung verbessern den Workflow sehr.
Ich hoffe ihr habt alles verstanden und freut euch auf das nächste Tutorial.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von mityauskoeln
  • 05.04.2012 - 19:52

äußerst hilfreich und einfach gestaltet!

Portrait von esc0rpi0n
  • 22.08.2011 - 22:16

hat mir bei meinem problem leider nicht ganz geholfen, aber trotzdem gute arbeit !!

Portrait von mediocritas
  • 11.04.2011 - 20:20

vielen dank, hat mir echt geholfen

Portrait von Kloppy
  • 08.04.2011 - 22:44

Danke für dieses Tutorial!

Portrait von macschell
  • 06.03.2011 - 17:10

Wär ja toll wenn das Bild auch herunterzuladen wäre, leider erscheint nur:



Hier entstehen die Internet-Seiten des Parallels Confixx Benutzers
Die Domain "expression-arts.ap2k.de" ist nicht verfügbar.

Portrait von ckl85
  • 05.03.2011 - 13:37

nice one - leider nicht exakt was ich erwartet hatte, trotzdem sehr hilfreich_

Portrait von misto62
  • 15.12.2010 - 07:46

Man freut sich immer wieder, wenn auch manchmal ganz einfache Dinge hier hineingestellt werden. Einfach und verstädnlich geschrieben. THX!!! :-)

Portrait von georgezamfir
  • 17.06.2010 - 13:48

Mit ist nicht ganz klar, wo der Vorteil gegenüber der herkömmlichen Methode ist, ein Bild in PS zu erstellen und dann in DW einzufügen.

Portrait von armando
  • 14.06.2010 - 21:12

Danke für dieses Tutorial!

Portrait von armando
  • 14.06.2010 - 21:12

interessantes Tutorial

Portrait von armando
  • 14.06.2010 - 21:12

Toll
Super Sachen!!!!!!

Portrait von Marcel_PS
  • 09.02.2010 - 16:39

ja war gut, einfach und verständlich

Portrait von Hannes125
  • 08.02.2010 - 15:03

Super Sachen das werde ich gleich mal ausprobieren, vielen Dank

Portrait von barnet
  • 11.11.2009 - 22:17

Für "anlernende" sehr gut. Ich habe noch kein informativeren, einführenden und einfühlenden Workshop gesehen
G. Barnet

Portrait von knaeges
  • 08.10.2009 - 13:54

gutes tutorial, bietet einen guten einstieg in die thematik der integration

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.08.2009 - 17:51

Danke für dieses Tutorial!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 17.12.2008 - 09:31

Danke, super beschrieben und sehr gut zu verstehen, freue mich schon auf ein neues Tutorial, mehr davon

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 13.10.2008 - 21:04

gut verständlich vielen dank...

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.10.2008 - 10:48

interessantes Tutorial

Portrait von meissner
  • 13.01.2008 - 20:31

besser hätt ich´s nicht schreiben können

x
×
×