Galileo Computing < openbook > Galileo Design - Know-how für Kreative
Know-how für Kreative

Inhaltsverzeichnis
Vorwort
1 Was gibt es Neues in Photoshop CS4?
2 Camera Raw, DNG und HDR
3 Probleme bei Digitalfotos beheben
4 Retusche
5 Schwarzweiß, Duplex und Schmuckfarben
6 Farb- und Tonwertkorrekturen
7 Farbmanagement
8 Fotomontage und Composing
9 Effekte für Text und Bild
10 Filter
11 Photoshop und Web
12 Photoshop und Druck
13 Automatisierung in Photoshop
14 Datenhandling und Teamwork
15 Tipps und Tricks
16 Photoshop und 3D
17 Photoshop und Video
18 Die DVD zum Buch
Stichwort
Ihre Meinung?

Spacer
<< zurück
Adobe Photoshop CS4 - Fortgeschrittene Techniken von Thomas Bredenfeld
Kreative Lösungen für den professionellen Arbeitsalltag
Buch: Adobe Photoshop CS4 - Fortgeschrittene Techniken

Adobe Photoshop CS4 - Fortgeschrittene Techniken
geb., komplett in Farbe, mit DVD
843 S., 59,90 Euro
Rheinwerk Design
ISBN 978-3-8362-1237-3
Pfeil 11 Photoshop und Web
Pfeil 11.1 Grundlagen des Webdesigns mit Photoshop
Pfeil 11.1.1 Photoshops Aufgaben im Web
Pfeil 11.1.2 Produktpflege innerhalb der Creative Suite
Pfeil 11.2 Verfahren und Montagetechniken
Pfeil 11.2.1 Arbeitsvorbereitung: Die Bildgröße festlegen
Pfeil 11.2.2 Mit einem Screenshot arbeiten
Pfeil 11.2.3 Die Montage-Werkzeuge in Photoshop
Pfeil 11.2.4 Bilder und HTML
Pfeil 11.2.5 Schriften für das Web
Pfeil 11.2.6 Farben für das Web
Pfeil 11.3 Bildformate im Web
Pfeil 11.3.1 GIF
Pfeil 11.3.2 PNG
Pfeil 11.3.3 JPEG
Pfeil 11.4 Zoomify
Pfeil 11.4.1 Zoomify-Export aus Photoshop
Pfeil 11.4.2 Ausgabe
Pfeil 11.4.3 Ansicht im Browser
Pfeil 11.4.4 Zoomifyer for Flash
Pfeil 11.4.5 Einsatz
Pfeil 11.5 Für Web und Geräte speichern
Pfeil 11.5.1 JPEG-Einstellungen
Pfeil 11.5.2 GIF-Einstellungen
Pfeil 11.5.3 Droplets
Pfeil 11.6 Device Central für Mobilgeräte
Pfeil 11.7 Webausgabe direkt aus Photoshop
Pfeil 11.7.1 Slicing
Pfeil 11.7.2 CSS
Pfeil 11.8 Photoshop und Fireworks
Pfeil 11.8.1 Photoshop-Dateien in Fireworks bearbeiten
Pfeil 11.8.2 Alternativen zum direkten Import aus Photoshop
Pfeil 11.8.3 Entwürfe aus Fireworks in Photoshop weiterbearbeiten
Pfeil 11.8.4 Slicing und HTML-Ausgabe aus Fireworks
Pfeil 11.8.5 HTML-Sprengstoff im Design
Pfeil 11.8.6 Mutationen und Seiten
Pfeil 11.9 Photoshop und Dreamweaver
Pfeil 11.9.1 Export aus Photoshop
Pfeil 11.9.2 Arbeiten in Dreamweaver
Pfeil 11.9.3 Fazit
Pfeil 11.10 Gestaltungselemente für das Webdesign
Pfeil 11.10.1 Grunge-Look mit Pinselspitzen
Pfeil 11.10.2 Stretched Pixels
Pfeil 11.10.3 Fake Barcode
Pfeil 11.10.4 Stilmix: Fotografische und zeichnerische Elemente
Pfeil 11.10.5 Farbverfremdungen
Pfeil 11.11 Nützliche Helfer
Pfeil 11.11.1 Art Directors Toolkit
Pfeil 11.11.2 xScope
Pfeil 11.11.3 Caliper
Pfeil 11.11.4 GridMaker
Pfeil 11.11.5 Layout Grid Generator
Pfeil 11.11.6 Firefox: Web Developer und Firebug
Pfeil 11.11.7 Microsoft Internet Explorer: Developer Toolbar und Entwicklertools


Galileo Computing - Zum Seitenanfang

11.9 Photoshop und Dreamweaver Zur nächsten ÜberschriftZur vorigen Überschrift

Wer nicht über Adobe Fireworks verfügt oder es nicht benutzen will, kann den direkten Weg von Photoshop zu Dreamweaver gehen, der bereits bei der Beschreibung des Exports über Für Web und Geräte speichern erwähnt wurde (Abschnitt 11.5). Hier wurde nach dem Slicing in Photoshop direkt eine HTML-Seite ausgegeben.

Dieser Weg hat einige Vorteile:

  • Man kann konform mit aktuellen Standards auf der Basis von <div>-Boxen und mit CSS ausgeben, was heute oft auch vom Kunden gefordert wird. Dieses Moment ist auch wichtig, wenn man Dateien erzeugen muss, die in gängige Content-Management-Systeme integriert werden sollen, oder Vorlagen (Templates) für solche Systeme erstellen oder modifizieren soll. Hier wird fast ausschließlich auf der Basis von CSS gearbeitet.
  • Man hat keine Zwischenstufe wie bei Fireworks und arbeitet näher an der Ursprungsdatei. Inkonsistenzen in der Darstellung und Interpretation z. B. von Ebeneneffekten können so gar nicht auftauchen.
  • Im Teamwork ist ohnehin jede Schnittstelle weniger ein Gewinn.
  • Zu diesen allgemeinen Vorteilen ist mit der Integration des Webentwicklungswerkzeugs Dreamweaver in die Creative Suite eine Lösung hinzugekommen, die sehr kurze Wege zwischen dem Design in Photoshop und dem Coding in Dreamweaver erlaubt.
  • Man hat auf der Codeseite keine Blackbox wie Fireworks vor sich. Der Code, der für Funktionen wie Rollovers benötigt wird, steht in Dreamweaver zwar auch in Form von vorgefertigten Verhalten zur Verfügung, kann hier aber gezielt modifiziert werden oder durch eigene Skripten ersetzt werden.

Galileo Computing - Zum Seitenanfang

11.9.1 Export aus Photoshop Zur nächsten ÜberschriftZur vorigen Überschrift

Für den Export einer HTML-Datei nebst Bildern, die als Grundlage einer direkten Zusammenarbeit von Photoshop und Dreamweaver dienen kann, gilt im Prinzip alles, was in Abschnitt 11.7, »Webausgabe direkt aus Photoshop«, gesagt wurde.

Abbildung 11.63 Lücke zwischen zwei Slices mit automatischer Beschriftung

Beim Aufziehen der Slices sollte sehr sorgfältig vorgegangen werden. Bei 200 % Vergrößerung sollte man überprüfen, dass sich keine Lücken bilden. Diese werden von Photoshop automatisch benannt und produzieren später unnötigen und vor allem unübersichtlichen Code. Solche Slices sind grau markiert.


HINWEIS

In Photoshop CS4 kann man leider im Dialog Für Web und Geräte speichern nicht mehr einfach mit Taste Strg + Taste A alle Slices auswählen. Man muss mit gedrückter (ª)-Taste die Slices der Reihe nach oder besser noch mit einem Rahmen, den man mit dem Slice-Auswahlwerkzeug aufzieht, auswählen.


Im Dialog von Für Web und Geräte speichern müssen nun die einzelnen Slices mit den entsprechenden Kompressionseinstellungen versehen werden. Diese sollten sich danach richten, ob es sich eher um fotografischen oder eher zeichnerischen Inhalt handelt und ob man am besten JPEG oder GIF als Dateiformat auswählt. Sollen alle gleich behandelt werden, kann man mit dem Slice-Auswahlwerkzeug einen Rahmen über alle Slices aufziehen und ihnen im rechten Teil des Dialogs eine gemeinsame Kompressionseinstellung verpassen.

Abbildung 11.64 Gemeinsame Einstellungen für alle Slices

Nach dem Klicken auf Speichern muss man im nachfolgenden Dateidialog noch sicherstellen, dass unter Format HTML und Bilder eingestellt und unten Alle Slices ausgewählt ist.

Abbildung 11.65 Dateidialog

Ausgabeeinstellungen für HTML | In Abbildung 11.65 wird unter Einstellungen mit XHTML_CSS ein selbst erstelltes Preset angewendet. In diesem Pulldown-Menü kommt man unter Andere an die Ausgabeeinstellungen für HTML heran. Bei Slices muss man unter Slice-Ausgabe den Radio-Button CSS erstellen aktivieren. Der Punkt Mit Verweis ist nicht heikel und eher Geschmackssache, abhängig davon, ob man CSS lieber auf der Basis von IDs für die <div>-Boxen verwendet oder dort eher mit Klassen arbeitet.

Bei der Abteilung Dateien speichern geht es um die Benennung, die schon besprochen wurde und die ähnlich wie auch bei Fireworks funktioniert. Hier ist darauf zu achten, dass bei Dateinamenkompatibilität mit der Deaktivierung des Punktes Mac OS 9 die Beschränkung auf 31 Zeichen verhindert wird, die bei der Zusammenstellung der Slice-Namen schnell erreicht ist. Eventuell vorhandene automatische Abkürzungen sorgen hier binnen Kurzem für Unübersichtlichkeit im Code oder gar für Ärger durch entstandene Fehler.

Abbildung 11.66 Wichtige Einstellungen für die HTML-Ausgabe

Abbildung 11.67 Ausschnitt aus der von Photoshop erzeugten HTML-Datei in der Codeansicht von Dreamweaver

Codeerstellung | Photoshop produziert nun den Code und den Bilderordner. Der Code besteht aus den Definitionen der <div>-Boxen im Kopf der Seite und der eigentlichen Seite darunter. In den HTML-Kommentaren erscheint der Name der ursprünglichen Photoshop-Datei, wird aber leider von Dreamweaver nicht interpretiert, sodass die HTML-Datei keinerlei Verknüpfung zu ihrer Quelle mehr hat. Das ist schade für die Bearbeitbarkeit, lässt sich aber zumindest teilweise beheben, wie wir noch sehen werden.

Das Screendesign ist nun so aufgeteilt worden, dass jedes Slice zu einer exakt positionierten und dimensionierten <div>-Box mit einem gleich großen Bild darin geworden ist. Das stellt ein präzises Gerüst für die weitere Arbeit dar.

Abbildung 11.68 Photoshop-Slice in Dreamweaver als <div>-Bomit darin enthaltenem Bild: oben die Eigenschaften der Bound unten die des Bildes


Galileo Computing - Zum Seitenanfang

11.9.2 Arbeiten in Dreamweaver Zur nächsten ÜberschriftZur vorigen Überschrift

Im Fenster mit den Eigenschaften des Bildes erkennt man ein Photoshop-Button beim Punkt Bearbeiten. Welches Programm dort für die Bearbeitung der Bilder zuständig ist, kann man in den Voreinstellungen von Dreamweaver unter Dateitypen/Editoren auswählen. Nach einer Standardinstallation der Creative Suite 4 sollte dort je nach Typ der Suite Photoshop und/oder Fireworks stehen, von denen ein Editor als Primär gekennzeichnet ist, der dann das markierte Bild bei einem Klick auf eben diesen Button mit dem Editor öffnet. Das geht auch mit einem Taste Alt + Klick auf das Bild. Dabei wird das in der HTML-Seite eingebaute Bild, also in der Regel ein GIF oder JPEG, in Photoshop geöffnet, was natürlich nur begrenzt sinnvoll ist, handelt es sich doch bereits um eine komprimierte Datei, die keine Qualitätsreserven für Bearbeitungen mehr hat. Also müssen die Originaldaten her.


Verknüpfung mit Photoshop

Das funktioniert auch, indem man in Bridge eine Photoshop-Datei markiert und dann DateiPlatzierenIn Dreamweaver wählt. Nach der Kompressionseinstellung kann man die Datei beschneiden (unter Datei die Checkbox Exportbereich aktivieren). Man muss dabei aber leider ohne Hilfslinien auskommen. Das Ganze geht auch nur mit dem zuletzt gespeicherten Zustand der Datei. Nach dem Speichern des Webbilds existiert eine Verknüpfung mit der Photoshop-Datei.


Es gibt in Dreamweaver (noch) keine Möglichkeit, die Zuordnung zwischen Webbild und Original-Photoshop-Datei herzustellen. Hier hilft aber ein Trick: Man markiert in Photoshop mit dem Slice-Auswahlwerkzeug das entsprechende Slice, in dem sich das in Dreamweaver zu ändernde Bild befindet, in diesem Beispiel den linken Button der Navigationsleiste. Ist das Slice-Auswahlwerkzeug aktiv, kopiert Photoshop angenehmerweise automatisch auf eine Ebene reduziert, man braucht also nur Taste Strg + Taste C und nicht Taste Strg + Taste Shift + Taste C , um alles Sichtbare in die Zwischenablage zu bekommen.

Abbildung 11.69 Markiertes Slice in Photoshop für eine Kopie der geänderten Bildstelle

Nun geht man nach der Bearbeitung dieses Bildausschnitts in Photoshop zurück zu Dreamweaver. Dort wird das auszutauschende Bild markiert und mit BearbeitenEinfügen oder Taste Strg + Taste V ersetzt. Bevor das passiert, öffnet sich der aus Fireworks bekannte Bildoptimierungsdialog (Bildvorschau), der als Modul auch in Dreamweaver eingebaut ist (Fireworks muss dafür nicht installiert sein!). Nun stellt man für den Inhalt der Zwischenablage die Kompression ein. Das Bild könnte hier auch noch beschnitten werden, was wir aber in diesem Fall nicht wollen, denn es passt ja exakt, weil es sich um das gleiche Slice handelt.

Abbildung 11.70 Optimierungsdialog vor dem Einfügen in Dreamweaver

Nach dem Klick auf OK wird man nur noch gefragt, wo und unter welchem Namen die Datei gespeichert werden soll.

Abbildung 11.71 Einzufügende neue Datei abspeichern

Danach ist das neue Bild im Layout der Webseite in Dreamweaver zu sehen. Im Fenster Eigenschaften findet sich jetzt unten ein Eintrag unter Original. Hier kann in Zukunft das Webbild in der originalen Photoshop-Datei bearbeitet werden. Das geht dann auch mit einem Taste Strg +Klick auf das Bild im Layoutmodus von Dream-weaver. Wiederholt man diesen Arbeitsschritt später ein weiteres Mal für dasselbe Webbild, wird man beim Einfügen nicht mehr nach den Kompressionseinstellungen und auch nicht nach dem Speicherort gefragt. Ein Klick auf das Photoshop-Icon bei Bearbeiten öffnet nun auch nicht mehr das in die HTML-Seite eingebettete JPEG, PNG oder GIF, sondern die original Photoshop-Datei. Wo diese zu finden ist, »weiß« Dreamweaver nun ja! Die vorigen Einstellungen werden einfach übernommen, und das Bild wird überschrieben. Erst durch das Einfügen eines anderen Bildes an dieser Stelle wird diese Verknüpfung wieder aufgelöst.

Abbildung 11.72 Der Eintrag unter Original weist auf -Photoshop als Ursprung des neuen Bildes hin.

Als typisches Beispiel wurde diese Methode für die zentrale Textbox auf der Webseite angewendet. Zunächst wurde das in der ursprünglichen Textbox platzierte Bild (Foto und Text) in Photoshop ausgeblendet, kopiert und dann in Dreamweaver ausgetauscht, sodass nur noch der Verlauf übrig bleibt. Dieses neue Bild wird dann in Dreamweaver als Bild aus dem Inhalt dieser Box gelöscht und stattdessen per CSS als Hintergrundbild der Box definiert, sodass man in der Box HTML-Inhalte einfügen kann.

Abbildung 11.73 Aus Photoshop kopiertes Bild als Hintergrund der CSS-Box

Der neue Inhalt besteht aus zwei Boxen, die über dem Hintergrund liegen: Das Foto wurde mit Kopieren/Einfügen der entsprechenden Photoshop-Auswahl in eine neue Box eingefügt. Die Box darunter enthält nun HTML-Text. Dieses Prozedere ist typisch für den Umgang mit in Photoshop erstelltem Layout-blindtext für später veränderliche Inhaltsbereiche.

Abbildung 11.74 Neuer Inhalt in der CSS-Bomit dem Verlaufshintergrundbild


Galileo Computing - Zum Seitenanfang

11.9.3 Fazit topZur vorigen Überschrift

Dieser direkte Weg von Photoshop zu Dreamweaver lässt sowohl dem Grafiker als auch dem Webprogrammierer genug Freiheiten, wirklich alle Feinheiten einer Website zu bearbeiten. Der Preis der umfassenden Kontrolle ist natürlich, wie so oft, ein Verlust an Bequemlichkeit. Da hier aber der Zwischenschritt über Fireworks wegfällt, wird das teilweise wieder wettgemacht. Da außerdem bei Dreamweaver direkt mit einem der besten verfügbaren Webentwicklerwerkzeuge weitergearbeitet werden kann, spielt man hier bezogen auf den möglichen Schwierigkeitsgrad der Aufgaben in einer ganz anderen Liga als beim Workflow mit Fireworks.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
<< zurück
  Zum Katalog
Zum Katalog: Adobe Photoshop CS4 - Fortgeschrittene Techniken






Adobe Photoshop CS4
Fortgeschrittene Techniken

bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Adobe Photoshop CS6 und CC






 Adobe Photoshop
 CS6 und CC


Zum Katalog: Photoshop Lightroom 5






 Photoshop
 Lightroom 5


Zum Katalog: Photoshop Artworks






 Photoshop Artworks


Zum Katalog: Adobe Photoshop für Fortgeschrittene






 Adobe Photoshop für
 Fortgeschrittene


Zum Katalog: Die Schöne und das Biest






 Die Schöne und
 das Biest


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo





Copyright © Rheinwerk Verlag GmbH 2010
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de