Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von mityauskoeln

    mityauskoeln

    05.04.2012 - 19:52

    äußerst hilfreich und einfach gestaltet!

  • Alternative Portrait von esc0rpi0n

    esc0rpi0n

    22.08.2011 - 22:16

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

  • Alternative Portrait von mediocritas

    mediocritas

    11.04.2011 - 20:20

    vielen dank, hat mir echt geholfen

  • Alternative Portrait von Kloppy

    Kloppy

    08.04.2011 - 22:44

    Danke für dieses Tutorial!

  • Alternative Portrait von macschell

    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.

  • Alternative Portrait von ckl85

    ckl85

    05.03.2011 - 13:37

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

  • Portrait von misto62

    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!!! :-)

  • Alternative Portrait von georgezamfir

    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.

  • Alternative Portrait von armando

    armando

    14.06.2010 - 21:12

    Danke für dieses Tutorial!

  • Alternative Portrait von armando

    armando

    14.06.2010 - 21:12

    interessantes Tutorial

  • Alternative Portrait von armando

    armando

    14.06.2010 - 21:12

    Toll
    Super Sachen!!!!!!

  • Alternative Portrait von Marcel_PS

    Marcel_PS

    09.02.2010 - 16:39

    ja war gut, einfach und verständlich

  • Alternative Portrait von Hannes125

    Hannes125

    08.02.2010 - 15:03

    Super Sachen das werde ich gleich mal ausprobieren, vielen Dank

  • Alternative Portrait von barnet

    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

  • Alternative Portrait von knaeges

    knaeges

    08.10.2009 - 13:54

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

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    08.08.2009 - 17:51

    Danke für dieses Tutorial!

  • Alternative Portrait

    User hat PSD-Tutorials.de 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

    User hat PSD-Tutorials.de verlassen

    13.10.2008 - 21:04

    gut verständlich vielen dank...

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    10.10.2008 - 10:48

    interessantes Tutorial

  • Alternative Portrait von meissner

    meissner

    13.01.2008 - 20:31

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

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.
vBulletin 0.042 • ZF-App 0.529 • Total 0.571