11.8 Photoshop und Fireworks

Die Bereinigung der Produkt-Palette und die Integration der ehemaligen Macromedia-Programme in den Versionen CS3 und CS4 haben im Bereich »Photoshop und Web« einige Änderungen oder gar Unzulänglichkeiten hervorgebracht, die fallweise dazu führen, dass Webdesigner und Photoshop-Nutzer, die diesen zuarbeiten, ihre Gewohnheiten ändern und sich neue Wege suchen müssen. Die vollmundige Werbung, die Adobe da für die beiden letzten Versionen in dieser Hinsicht gemacht hat, lässt einiges unerwähnt. Im Zusammenspiel der Programme gibt es die eine oder andere Einbahnstraße, und manche Dinge müssen zu Fuß erledigt werden oder verlangen gar Workarounds.

Damit Sie in diesem Bereich beim Finden neuer Workflow-Lösungen und beim Verbessern Ihrer gewohnten Abläufe nicht allzu viele unnötige Erfahrungen selbst machen müssen, liste ich im Folgenden die wichtigsten Schnittstellen zwischen den drei am meisten beteiligten Programmen von Adobe (Photoshop, Fireworks und Dreamweaver) mit einer Reihe von Hinweisen auf, was man bei ihnen im Einzelnen beachten sollte.

11.8.1 Photoshop-Dateien in Fireworks bearbeiten

PNG PNG

Fireworks verwendet das offene und freie Dateiformat PNG, das sich allmählich im Web als Alternative zu GIF verbreitet. Dieses »Web«-PNG (siehe Abschnitt 11.3.2) wird von Adobe auch als »flaches PNG« bezeichnet, während Fireworks neben dem Bild-inhalt auch noch Ebenen, Vektoren, Effekte, Slices und Hilfslinien usw. unterstützt. Trotzdem ist das »Fireworks«-PNG voll zulässig und gültig. Es werden alle über das Bildmaterial hinausgehenden Informationen in den erlaubten Metadaten von PNG untergebracht.

Ein Workflow, der von Adobe propagiert wird und der auch schon früher durch die von Macromedia eingeführte Kompatibilität mit PSD-Dateien verbreitet war, führt vom Screendesign in Photoshop über die Aufbereitung in Fireworks zu ersten HTML-Seiten mit eingebundener Grafik, die im Browser funktionieren.

Photoshop-Datei öffnen | Öffnen wir unsere Screendesign-Datei in Fireworks, macht sich Ernüchterung breit: Gegenüber dem Photoshop-Original ist offenbar beim Importieren in Fireworks einiges durcheinandergeraten.

Abbildung 11.38 Photoshop-Original (oben) nach dem Öffnen in Fireworks (unten): links der Modus Bearbeitbarkeit von Photoshop-Ebenen erhalten und rechts der Modus Erscheinungsbild von Photoshop-Ebenen erhalten

Auch nachdem wir noch andere Darstellungen des Screendesigns in einer Mutation mit anderen eingeblendeten Ebenen probiert haben, verhält sich das Ganze nicht wie erwartet. Ein Blick in die Hilfe-Datei von Fireworks zeigt eine Reihe von Photoshop-Features, die in Fireworks entweder konvertiert oder ignoriert werden. Dort werden allerdings nur die wichtigsten Inkompatibilitäten erwähnt. Die Liste ist in Wahrheit wesentlich länger. Einige wichtige Stolpersteine werden hier kurz illustriert.

Inkompatibilitäten zwischen Photoshop und Fireworks | In Tabelle 11.2 sind die wichtigsten Unterschiede zwischen Photoshop und Fireworks und ihre Konsequenzen zusammengefasst. Die Liste erhebt (leider) keinen Anspruch auf Vollständigkeit. Auch gibt es Unterschiede zwischen Mac und Windows.

Tabelle 11.2 Feature-Verluste beim Import von Photoshop-Dateien in Fireworks

Feature in Photoshop	Importergebnis in Fireworks	Workaround/Lösung
Ebenenmaske bei normaler Ebene	Objektmaske bei normaler Ebene
Vektormaske bei normaler Ebene	Gerastert zu normaler Ebene mit Objektmaske
Ebenen- und Vektormaske bei normaler Ebene	An sich gerastert zu Objektmaske, aber oft unvorherseh-bares Ergebnis	In Photoshop sukzessive rastern
Gruppe mit Füll-methoden	Wird ignoriert	In Photoshop: Ebene • Gruppe zusammenfügen
Regler Fläche in der Ebenen-Palette	Wird ignoriert	Vorher rastern
Ebenenstile	Photoshop-Live-Filter (nicht alle)	Eventuell zuvor in Photoshop rastern
Einstellungsebene	Wird ignoriert	In Photoshop: Ebene • Auf eine Ebene reduzieren
Einstellungsebene als Schnittmaske	Wird ignoriert	In Photoshop: Ebene • Auf eine Ebene reduzieren
Vektormaske bei Ebenengruppe	Wird ignoriert	Vektormaske in Photoshop jeder einzelnen Ebene der Gruppe zuweisen
Smart-Objekt	Wird gerastert
Smart-Objekt mit Ebenenmaske	Wird mit Transparenz gerastert
Smartfilter	Wird gerastert oder verschwindet
Filtermaske	Wird gerastert
Füllebene (Vollton, Verlauf, Muster)	Wird gerastert oder verschwindet
Ebenenmaske auf Füllebene	Wird zu Transparenz gerastert
Vektormaske auf Füllebene	Wird zu Transparenz gerastert
Hilfslinien	Werden übernommen
Slices	Werden übernommen
Farbige Ebenenmarkierungen	Verschwinden

[Ebenenmaske/Objektmaske] Einer (pixelbasierten) Ebenenmaske in Photoshop entspricht in Fireworks eine Objektmaske.

Inkompatibilitäten bei Vektormasken | Obwohl Fireworks Vektor- und Pixelgrafik beherrscht, was eine seiner unbestrittenen Stärken ist, werden Vektormasken teilweise ignoriert, wenn sie Einstellungsebenen oder Ordner betreffen. Sind Vektormasken einer normalen Ebene zugeordnet, werden sie von Fireworks als Transparenz destruktiv in die Bildebenen eingerechnet.

Bei Ebenenordnern lässt sich das nur beheben, wenn man allen im Ordner befindlichen Ebenen die Vektormaske jeweils einzeln zuweist. Fireworks konvertiert sie dann zu Objektmasken.

Für das Problem der Vektormasken schlägt Adobe in der Hilfe-Datei von Fireworks einen etwas holprigen Workaround vor: Man sollte bei markierter Vektormaske in Photoshop mit Datei • Exportieren • Pfade -> Illustrator eine Illustrator-Datei erzeugen und abspeichern und diese danach in Fireworks importieren. Allein mit den Vektormasken, die in unserer Beispieldatei vorkommen, ist man da allerdings eine ganze Weile beschäftigt.

Inkompatibilitäten bei der Kombination von Ebenen- und Vektormasken | Werden Ebenen- und Vektormasken in Photoshop kombiniert, was speziell in komplexeren Screendesigns immer wieder gebraucht wird, kommt Fireworks ganz aus dem Tritt. In diesem Beispiel führt es zum Verschwinden der Pixelmaske in Fireworks.

Abbildung 11.39 Kombinationen von Vektor- mit Ebenenmasken aus Photoshop (Bild oben und Ebenen links) werden in Fireworks fehlerhaft interpretiert (Bild Mitte und Ebenen rechts).

Dies lässt sich besser vorab in Photoshop regeln: Am besten ist es, man dupliziert die Ebene und wendet in unserem Fall (es handelt sich beim Bild ja um ein Smart-Objekt) nacheinander Ebene • Rastern • Vektormaske, dann Ebene • Smart-Objekt • Rastern und schließlich Ebene • Ebenenmaske • Anwenden an.

Fazit | Wie man sieht, geht ein großer Teil der technischen und gestalterischen Möglichkeiten, die man in Photoshop beim Screendesign hat, durch den Import in Fireworks verloren. Eine Verknüpfung zur ursprünglichen Photoshop-Datei, die die Bearbeitbarkeit erhält (wie das z. B. beim Verhältnis einer Photoshop-Datei zu einer eingebetteten Bild- oder Vektordatei als Smart-Objekt der Fall ist), existiert hier nicht. Das Ganze ist also zudem noch eine Einbahnstraße.

Hat man erst einmal in Fireworks mit den Slices und dem Einbau von interaktiven Funktionen wie Links oder Rollover-Funktionen für Buttons in Richtung Roh-Website weitergearbeitet, ist es schwer, nachträglich Änderungen auf der Designebene vorzunehmen. Letztlich kann man nur noch einzelne Ausschnitte aus der Photoshop-Datei in die daraus entstandene Fireworks-Datei einkopieren, was ein ziemliches Flickwerk werden kann. Dieser Umstand ist deswegen auch problematisch, weil die in der Photoshop-Datei vorhandene und meist sehr systematisch angelegte Ebenenstruktur in Fireworks nur teilweise übernommen worden ist.

Die in Tabelle 11.2 gezeigte Liste kann also durchaus auch weiterhin als Wunschzettel für die nächste Version von Fireworks verstanden werden. Derzeit ist die Kompatibilität zwischen Fireworks und Photoshop nicht besser als zu den Zeiten, als Fireworks noch ein Macromedia-Produkt war und die entsprechenden Versionssprünge bei den unterstützten Photoshop-Features hatte. Ganz offenbar ist die große Familienzusammenführung noch immer nicht bei allen Ex-Macromedia-Produkten abgeschlossen.

11.8.2 Alternativen zum direkten Import aus Photoshop

Da der Umfang der in Fireworks unterstützten Photoshop-Features also eher bescheiden ist, liegt es nahe, einen Schritt zwischen dem Photoshop-Screendesign und dem Import in Fireworks einzufügen, der diesem Handicap Rechnung trägt. Hierbei kann und sollte man auch die Ebenenstruktur, die ja in Photoshop meist an gestalterischen Gesichtspunkten orientiert ist (Zusammenfassung von Bildbereichen wie z. B. Menü oder Kopfleiste), in eine Struktur überführen, die das vereinfacht und die sich eher daran orientiert, was auf bestimmten Webseiten später einmal zu sehen sein soll.

Ebenenkompositionen verwenden | Mit Hilfe von Ebenenkompositionen kann im Hinblick auf die später beabsichtigten Ableitungen des Designs für verschiedene Webseiten und Button-Zustände der jeweilige Zustand gespeichert und übersichtlich benannt werden, ohne dass man sich später dafür jedes Mal von Neuem durch endlose Ebenenstapel und Ordner klicken und dort Ebenen an- und abschalten muss. Das ist ein Haupteinsatzzweck in Ebenenkompositionen.

Unten sind z. B. bei der »Sommer«-Seite der Normalzustand und bei der »Leisure«-Seite der Zustand mit den Buttons rechts oben im Rollover-Zustand (»hilite«) als solche Ebenenkomposi-tionen gespeichert.

Abbildung 11.40 Zwei Ebenenkompositionen mit verschiedenen Zuständen der Screendesign-Datei

Diese Ebenenkompositionen können mit einem einzigen Befehl als einzelne Dateien exportiert werden, indem man mit Datei • Skripten • Ebenenkomp. in Dateien alle vorhandenen Ebenenkompositionen als selbstständige Photoshop-Dateien abspeichern lässt. Das Ganze hat nur einen kleinen Schönheitsfehler: Die hier benutzte Beispieldatei hat rund 180 MB, und diese Größe hat dann jede der exportierten Dateien auch, wenn man im Photoshop-Format exportiert, weil die Datei an sich ja nicht verändert wird. Dieses Vorgehen wird also sehr schnell sehr viel Platz auf der Festplatte brauchen.

Man könnte nun alle diese Dateien einzeln öffnen, jeweils auf die Hintergrundebene reduzieren und schließlich alle mit Datei • Skripten • Dateien in Stapel laden zu einer Photoshop-Datei zusammenfügen, die Fireworks problemlos versteht und die sich von ihrer Ebenenstruktur für die Weiterverarbeitung in Richtung Website schon gut eignet. Das Ganze ließe sich durch das Einführen einer Aktion (siehe Abschnitt 13.2) für das Reduzieren der einzelnen Dateien auf die Hintergrundebene noch etwas vereinfachen und beschleunigen.

Eine andere Möglichkeit ist die Modifikation des Skripts für den Export der Ebenenkompositionen, das auf JavaScript beruht, offen und damit bearbeitbar ist. Hier könnte man für das Photoshop-Format ein Reduzieren auf die Hintergrundebene einbauen. Das erfordert allerdings einige JavaScript-Kenntnisse (siehe auch Abschnitt 13.4). Automatisch auf die Hintergrundebene reduziert wird bei den Formaten JPEG, BMP und Targa, wobei JPEG auch bei sehr hoher Qualität winzige Verluste mit sich bringt und anfällig für Farbverschiebungen ist. Beides ist bei den Präzisionsanforderungen, die man beim Screendesign haben sollte, nicht zu tolerieren.

Selektives Kopieren mit Aktionen | Die folgende Strategie verbindet die Vorteile des Umgangs mit Ebenenkompositionen, vermeidet aber das pauschale Reduzieren aller Designzustände auf die Hintergrundebene und bietet damit später in Fireworks bessere Bearbeitungsmöglichkeiten. Sie geht davon aus, die für Fireworks gedachte Datei schichtweise aufzubauen, funktioniert nicht vollautomatisch, arbeitet aber mit Aktionen.

Abbildung 11.41 Die beiden Aktionen für dieses Verfahren

Da Fireworks in Photoshop angelegte Slices ignoriert, Hilfslinien dagegen übernimmt, wäre es sinnvoll, diese in eine solche neue Photoshop-Datei übernehmen zu können.

Hier die Abfolge der Arbeitsschritte, die Sie in Abbildung 11.41 gleich als aufgezeichnete Aktion in der entsprechenden Palette sehen. (Details zu Aktionen finden Sie in Abschnitt 13.2.) Die erste Aktion (»Create_FW_FlatPack«) erzeugt eine neue Datei, in die dann mit der zweiten Aktion hineinkopiert wird:

• Warnmeldung, damit alle anderen Dateien geschlossen werden, damit die zweite Aktion fehlerfrei zwischen den beiden Dateien hin- und herschalten kann

• Bild duplizieren

• Dieses Bild auf Hintergrundebene reduzieren

• Alles auswählen und löschen

• Auswahl aufheben

• Zur Originaldatei zurückwechseln

Diese Aktion wendet man nur einmal an und speichert danach diese neue Datei zunächst unter einem sinnvollen Namen ab. Die neue Datei enthält nun vor allem die Hilfslinien.

Jetzt folgt die Aktion (»CopyMerged_to_FW_FlatPack«), die beliebig viele Zustände der Originaldatei als »flache« Kopie jeweils einzeln in die neue Datei einfügt:

• Alles auswählen

• Auf eine Ebene reduziert kopieren

• Zur neuen Datei wechseln

• Einfügen

• Nun ist die Aktion für eine Dialogbox unterbrochen, um die neue Ebene gleich zu benennen. (Später müsste man alles wieder durchschauen, was mühsam und auch fehlerträchtig wäre.)

• Zur Originaldatei zurückwechseln

Aktionen auf der DVD

Alle diese Aktionen finden Sie als -Aktionen-Set unter dem Namen »Export_PS_Screendesign_to_FW_CS4.atn« im Ordner Beispieldateien/11_Web. Zum Laden von Aktionen siehe Abschnitt 13.2.

Ob man für das Ein- und Ausschalten der Ebenen oder sonstige Modifikationen des Zustands der Originaldatei zuvor erstellte Ebenenkombinationen verwendet oder das manuell in betreffenden Ebenen erledigt, ist dabei egal, man hat hier alle Freiheiten.

Ein Nachteil, den dieses Verfahren hat, ist die Tatsache, dass kopierte Inhalte von Photoshop immer zentriert in eine neue Datei eingefügt werden, was nur bei vollformatigen Kopien standrichtig ist. Das Positionieren des Eingefügten von Hand ist oft (trotz Hilfslinien) mühsam, oft gar unmöglich. Deshalb ist es wichtig, eine Blindebene mitzukopieren, die immer das komplette Dokumentformat aufspannt. Diese Aufgabe kann bei einem Screendesign ein Browser-Screenshot übernehmen, der als Designgrundlage verwendet wird. Gibt es diesen nicht oder will man das nicht, kann man einen Rahmen über das ganze Format erstellen, indem man alles auswählt und mit Bearbeiten • Kontur füllen eine 1 Pixel breite Kontur auf die Innenseite der Auswahl setzt.

Abbildung 11.42 Aktion zur Erzeugung einer -Dummy-Ebene

Eine Variante dieses Blindrahmens arbeitet als feinerer Trick mit den Schritten der in Abbildung 11.42 gezeigten Aktion:

• In der Datei, aus der kopiert werden soll, ganz nach oben im Ebenenstapel gehen

• Neue Ebene erstellen

• Alles auswählen

• Auswahlkontur innen 1 Pixel breit füllen (Farbe ist egal)

• Auswahl um 1 Pixel verkleinern

• Auswahl (ohne Inhalt) viermal um je 1 Pixel zum Rand (rechts, links, oben und unten) hin verschieben, um jeweils die vier Geraden der Kontur wegzulöschen. Es bleiben vier einzelne Pixel in den Ecken übrig.

• Umbenennen der Ebene

• Deckkraft auf 1 % reduzieren

• Ebene fixieren

Der Inhalt der Ebene ist de facto unsichtbar, wird aber bei Alles auswählen so einbezogen, dass immer das gesamte Bildformat kopiert wird, selbst wenn irgendwo im Bild nur ein kleiner Ausschnitt eingeblendet ist. Das Einfügen in die neue Datei erfolgt immer standrichtig. Die absolute Größe der Datei ist bei diesem Verfahren egal, es funktioniert immer.

Abbildung 11.43 Aufgeräumte Photoshop-Datei für die Weiterbearbeitung in Fireworks

Diese dritte Aktion finden Sie ebenfalls auf der Buch-DVD im Set mit den beiden zuvor besprochenen Aktionen.

Fazit | Auf diese Art und Weise lassen sich aus hochkomplexen Screendesigns, die alle Features von Photoshop ausreizen, Auszüge erstellen, die an Fireworks keine besonderen Ansprüche stellen, dort auf jeden Fall funktionieren und vor allem das Erscheinungsbild ohne jede Beeinträchtigung übergeben. In unserem Beispiel hat dieser Auszug mit allem, was visuell weiterverarbeitet werden soll, 37 Ebenen in fünf Ordnern bei einer Dateigröße von etwa 6 MB. Das Original hingegen hat knapp 100 Ebenen in 24 Ordnern bei 180 MB. Das beschleunigt die Arbeit sehr. Im Teamwork hat dieses Verfahren den Vorteil, dass der- oder diejenige, der bzw. die ein solches Screendesign weiterbearbeiten soll, wesentlich mehr Übersicht in der Datei hat und nur das bekommt, was er oder sie braucht.

Abbildung 11.44 Alles wurde standrichtig in die neue Photoshop-Datei einkopiert (links) und auch so in Fireworks übernommen (rechts). Die Farb-unterschiede resultieren aus der Nichtberücksichtigung von Farbprofilen in Fireworks.

Will man Ebenenstile wie z. B. Schlagschatten in Fireworks als Photoshop-Live-Filter weiterbearbeiten, um erst dort z. B. mit wechselnden Effekten für Rollover-Funktionen zu arbeiten, kopiert man nach dem zuvor beschriebenen Verfahren die Ebene mit abgeschalteten Effekten und zieht danach die Effekte aus der Ebenen-Palette des Originals per Drag & Drop einfach in die neue Datei, wenn dort die eingefügte Ebene aktiv ist. Spätere Änderungen aller Art lassen sich dann als Kopien (auf eine Ebene reduziert) aus Photoshop in die bereits weiterbearbeitete Fireworks-Datei einfügen.

Dieses Verfahren hat sich bereits früher bewährt, denn die unterschiedliche Ausstattung von Photoshop und Fireworks hat ja schon eine längere Geschichte. Es bietet eine große Flexibilität und erhält auf jeden Fall das komplexe Original.

11.8.3 Entwürfe aus Fireworks in Photoshop weiterbearbeiten

Adobe positioniert Fireworks innerhalb der Creative Suite ausdrücklich als »Rapid Prototyping Tool« für Webdesigner. Weil Fireworks sowohl Pixel- als auch Vektorgrafik beherrscht, kann man damit schnell komplette Designs erstellen, ohne die mächtigen Geschwister Photoshop und Illustrator bemühen zu müssen.

Weil das gestalterische Arsenal von Fireworks begrenzt und das Programm auch vom Schwierigkeitsgrad her nicht mit -Photoshop oder Illustrator zu vergleichen ist, können im Team auch Personen an der Entwicklung teilnehmen, die nicht so häufig mit Photoshop umgehen oder dort nicht ausreichend kompetent sind. Für die Entwicklung einer Website ist es z. B. nicht untypisch, dass zunächst ein Allrounder, der sowohl in der Grafik bewandert ist als auch auf der technischen Seite mit Code umgehen kann, im Dialog mit dem Kunden eine Version als Ausgangspunkt erarbeitet, bevor die (teuren) Spezialisten für Grafik und Code die Site finalisieren. Für diesen Zweck ist Fireworks ideal, und oft kommt man in dieser Phase mit diesem Programm allein aus.

Spezielle Features

Eine ganze Reihe von Features ist auf diesen Zweck hin ausgerichtet. So gibt es eine Bibliothek mit einbaufertigen sogenannten »Symbolen«, die teilweise bereits mit Funktionen auf der Basis von JavaScript ausgestattet sind oder als visuelle Platzhalter dienen können, wie z. B. Formularelemente. Auch das Erstellen von bereits funktionsfähigen »Mockups«, also Dummy-Websites, die man dem Kunden in der Planungsphase vorführen kann, geht mit Fireworks relativ leicht und schnell von der Hand und vor allem bevor die Webentwickler mit ihren Codewerkzeugen überhaupt Hand angelegt haben.

Danach spielt nun der umgekehrte Weg eine große Rolle: Ein Design-Prototyp aus Fireworks soll in Photoshop weiterbearbeitet und dort finalisiert werden. Der Unterschied im Umfang der Features kommt in dieser Richtung bei Weitem nicht so gravierend zum Tragen wie beim Export von Photoshop nach Fireworks.

Im folgenden Beispiel ist in Fireworks ein kleines Popup-Fenster entworfen worden, das der zuvor bereits gezeigten Website als Kontaktmodul dienen soll. Hierbei wurde auf die vorgefertigten Elemente aus der Allgemeinen Bibliothek zurückgegriffen, um eine Vorstellung vom Aussehen des späteren Formulars zu bekommen. Sehr praktisch ist, dass Fireworks zu diesem Zweck die wichtigsten Dinge (Checkboxen, Textfelder, Buttons usw.) jeweils in einer Mac- und in einer Windows-Version verfügbar hat. Hier musste man sich früher immer damit behelfen, solche Formulare provisorisch zusammenzubauen und dann im Screendesign mit Screenshots davon zu arbeiten. In Fireworks können diese Elemente sogar als Symbole beschriftet und verzerrungsfrei skaliert werden. Das Design von ansprechenden Formularen ist ja bekanntlich mühsam, und dieses Feature hilft hier sehr viel.

In unserem Beispiel wurde das Design mit Ordnern strukturiert, es wurden einige Schlagschatten als Photoshop-Live-Filter eingebaut, und für den Telefonhörer links wurde eine Vektormaske verwendet, die es in Fireworks sehr wohl gibt, wenn auch diejenigen aus Photoshop (noch) nicht übernommen werden. Sie sind in Fireworks am kleinen Zeichenfeder-Icon im Miniaturbild in der Ebenen-Palette zu erkennen.

Abbildung 11.45 Der Ebenenaufbau in Fireworks

Abbildung 11.46 Einfaches Screendesign in -Fireworks

Fireworks-Exportoptionen | Man kann beim Export (Datei • Speichern unter) im Format Photoshop unter mehreren Op-tionen auswählen.

Abbildung 11.47 Fireworks-Exportoptionen für Photoshop-Dateien

Abbildung 11.48 Export unter Wahrung der Bearbeitbarkeit

Editierbarkeit statt Erscheinungsbild beibehalten versucht alle nicht destruktiven Features in Fireworks in ihre Pendants in Photoshop zu übersetzen. Aus den Fireworks-Live-Filtern werden nach Möglichkeit Ebenenstile. Diese haben in Photoshop dann in der Regel leichte Abweichungen gegenüber dem Fireworks-Original (hier z. B. beim dunklen Saum um die Schrift »contact box«). Bei Schriften muss man fallweise Inkonsistenzen bei Größe, Kerning und Spacing hinnehmen. Die Ordnerstruktur wird normalerweise fehlerlos übernommen. Die in Fireworks erstellte Vektormaske wird zu einer normalen Ebenenmaske in Photoshop, also nicht zu einer Vektormaske, wie man erwarten könnte. Wählt man die Option Fireworks-Erscheinungsbild beibehalten, bekommt man das erwartete Ergebnis: Es gibt keine Ebenenstile, alle Fireworks-Effekte werden gerendert. Die Ordnerstruktur bleibt 1:1 erhalten. Die Übernahme der Vektormaske aus Fireworks als Ebenenmaske in Photoshop findet auch hier statt..

Abbildung 11.49 Export mit identischem Erscheinungsbild

Fazit | In der Richtung von Fireworks nach Photoshop wird Fireworks seiner beworbenen Rolle als Rapid Prototyping Tool für das Webdesign durchaus gerecht. Ansonsten ist Fireworks sicher das am wenigsten gut integrierte Ex-Macromedia-Programm der Suite. Ein mutmaßlicher Grund für die Inkompatibilität zwischen Photoshop und Fireworks im Bereich der Vektorgrafik dürfte darin bestehen, dass die Vektorzeichnung in Photoshop auf der Illustrator-Engine beruht, während Fireworks auf Macromedias FreeHand aufbaut. Zusammen mit den ebenfalls verschiedenen Pixelgrafik-Engines von Photoshop und Fireworks sind das ja sogar zwei Schnittstellen, die für eine nahtlose Integration umzubauen wären. Das wird mutmaßlich kein leichtes Unterfangen sein und von den Benutzern wohl noch weiterhin Geduld erfordern.

11.8.4 Slicing und HTML-Ausgabe aus Fireworks

Lässt man die zuvor beschriebenen Schwierigkeiten beim Zusammenspiel von Photoshop mit Fireworks einmal außen vor, liegt die Stärke von Fireworks vor allem in der Überführung von Screendesigns in bereits halbwegs funktionierende Websites oder zumindest in Teile davon. Hier gehen die Möglichkeiten weit über diejenigen von Photoshop hinaus, und vor allem die Funktionen von Fireworks, die bereits Code produzieren (wie z. B. JavaScript für Rollover-Effekte), machen es zu einer idealen Zwischenstation auf dem Weg von der Gestaltung in Photoshop zum Finalisieren des Codes in einer Webentwicklungsumgebung wie beispielsweise Dreamweaver.

Die Fähigkeiten von Fireworks decken sich zum Teil mit den Features von ImageReady, z. B. beim Erstellen von JavaScript-Roll-overs.

Slices = Segmente

Auch wenn Fireworks für die Slices den Ausdruck Segmente verwendet, bleibe ich im Folgenden bei der Bezeichnung Slices.

Slicing | Das Slicing funktioniert in Fireworks sehr ähnlich wie in Photoshop oder im alten ImageReady. Lediglich das Handling ist bei Fireworks immer ein wenig besser gewesen, vor allem ist die Genauigkeit größer und das Einrasten an Hilfslinien in Fireworks zuverlässiger. Das kann man beim Vergleich der aktuellen Versionen Photoshop CS4 und Fireworks CS4 auch weiterhin sagen.

Abbildung 11.50 Slicing in Fireworks: Anzeige in der Webebene

Anders als in Photoshop, wo die Slices nur im Bild zu sehen sind, gibt es bei Fireworks zusätzlich dazu in der Ebenen-Palette eine eigene Abteilung, die Webebene, die nicht verschoben, gelöscht oder umbenannt werden kann und die immer zuoberst in der Ebenen-Palette zu finden ist. Hier werden alle Slices aufgeführt, und diese können in Ordnern gruppiert, gesperrt und umbenannt werden. Zusätzlich zu den auch in Photoshop für ein Slice verfügbaren Features wie Kompressionseinstellung, Name und Link-Adresse können in Fireworks halbtransparente Markierungsfarben vergeben werden, was sehr zur Übersicht in komplexen Projekten beiträgt. Diese Farben werden auch in den Miniaturbildern in der Ebenen-Palette angezeigt.

Abbildung 11.51 Slicing in Fireworks: eingefärbte Slices im Bild

Abbildung 11.52 Slicing in Fireworks: eingefärbte Slices im Fenster Eigenschaften

Rollover-Effekte | Für ein Slice können in Fireworks bereits JavaScript-basierte Funktionen zugewiesen werden, wie hier ein simpler Rollover-Effekt, der auf einem Bildaustausch beruht. Anders als im alten ImageReady erledigt das Fireworks auf der Grundlage der Animationsfunktion, die sonst hauptsächlich für animierte GIFs gebraucht wird. Soll ein Bild ausgetauscht werden, wenn man ein Slice mit der Maus berührt, verlangt Fireworks dazu einen veränderten Bildzustand an dieser Stelle, der in einem zweiten Frame mit Hilfe der Ebenensichtbarkeit oder anderer Features eingestellt wird. Hierzu dupliziert man zuerst den standardmäßig vorhandenen Status 1 in der Palette Status, indem man ihn auf das Icon Neu/Status duplizieren am Fuß der Palette zieht. In jedem der beiden Frames wird nun mit der Sichtbarkeit der Ebenen der gewünschte visuelle Zustand hergestellt. Sinnvolle Benennung und Organisation der Ebenen bereits in Photoshop helfen hier sehr.

Abbildung 11.53 Zustandsänderung in zwei Frames mit aus- und eingeblendeten Ebenen als Grundlage für einen Roll-over-Effekt

Nun braucht man für ein Slice (oder auch gleich für mehrere) in der Palette Verhalten nur auf das Plus-Zeichen zu klicken und dort Einfaches Rollover auszuwählen. Fireworks erzeugt beim späteren Export als HTML-Seite für ein Slice ein zweites Bild und automatisch den entsprechenden Code, der sowohl das Bild, das ja beim Aufruf der Seite zuerst nicht zu sehen ist, in den Zwischenspeicher (Cache) des Browsers lädt als auch das Bild bei Mauskontakt austauscht und beim Verlassen auch wieder zurücktauscht.

Abbildung 11.54 Einfaches Rollover für ein Slice

Auf die weiteren Verhalten (Pulldown-Menü, Navigationsleiste usw.), die Fireworks für ein Slice zur Verfügung stellt, soll hier nicht weiter eingegangen werden, weil diese nur mit einer sehr sorgfältigen Vorbereitungsprozedur funktionieren, die man bereits in Photoshop berücksichtigen muss, und weil es vor allem später beim Coding in Webentwicklungsumgebungen wie Dream-weaver bessere und vor allem flexiblere Lösungen gibt.

HTML-Ausgabe | Beim Export der Datei aus Fireworks (Datei • Exportieren) gibt es neben einer ganzen Reihe von Formaten für andere Screendesign-Zwecke (z. B. Director oder Flex) die Ausgabe als fertige HTML-Datei nebst Bildern und die Ausgabe als CSS-Ebenen. Die erste Methode (HTML und Bilder) baut die Bilder in eine HTML-Tabelle ein, was aber immer mehr aus der Mode kommt und eigentlich nicht mehr aktuellen Webstandards entspricht.

Abbildung 11.55 Export der Fireworks-Datei als HTML-Datei mit einem Bildordner

CSS | Die Alternative, CSS und Bilder, ist zwar weitgehend standardkonform, unterstützt aber nur einen Status in der Ausgabe, sodass hier bereits Rollover-Effekte nicht mehr ausgegeben werden können. Das ist kein befriedigender Zustand. In diesem Fall muss man den Einbau von Rollover-Effekten dann später beim Coding z. B. in Dreamweaver nachholen.

Optionen für den HTML-Export | Mit dem Button Optionen kann man den exportierten HTML-Code noch feiner einstellen.

In der ersten der drei Abteilungen, Allgemein, kann man unter HTML-Stil den Standard wählen, dem das ausgegebene HTML entsprechen soll. Hier ist Dreamweaver XHTML oder Generic XHTML zu empfehlen. HTML-Kommentare einschliessen erleichtert später beim Weiterbearbeiten des Codes die Übersicht bei größeren Dateien.

Abbildung 11.56 Optionen für die Codeerzeugung unter HTML-Einrichtung

In der Abteilung Tabelle kann man Details zum Feinaufbau der erzeugten Tabellen verändern. Die hier voreingestellten Angaben sind durchaus brauchbar.

Unter Dokumentspezifisch schließlich sind die Benennungsregeln für die vielen erzeugten Bilddateien festzulegen. Da unter den Pulldown-Menüs für die Namensteile immer ein Beispiel der aktuellen Einstellung gezeigt wird, ist das Ganze relativ selbsterklärend. Die Regeln gelten nur für automatisch erzeugte Slices, die man nicht von Hand benannt hat. Auch hier sind die Standard-einstellungen in der Regel okay.

Der von Fireworks produzierte Code ist bei diesen Einstellungen im Allgemeinen sehr sauber und besteht Validierungstests problemlos.

11.8.5 HTML-Sprengstoff im Design

In den gleichen Themenkreis gehört die Rücksichtnahme auf HTML-Bereiche innerhalb von Webdesigns.

Bild | Bildelemente auf einer Webseite sind im Vergleich zu HTML-Elementen relativ starr und berechenbar. Da HTML, wie bereits erwähnt, kaum typografische und layoutmäßige Stabilität besitzt, drohen hier Überraschungen. HTML dehnt eine Tabellenzelle immer so weit aus, dass der komplette Text darin Platz hat. Es gibt, anders als bei CSS-Boxen, keinerlei Parameter für den Überlauf oder das Beschneiden von Text. Abhängig von der verschiedenen Darstellungsgröße für Schrift bei den diversen Browsern können diese Unterschiede sehr groß sein. Ein Design kann in einem Browser korrekt ausschauen, und in einem anderen haben Tabellenzellen mit HTML-Text das Design komplett »gesprengt«.

Text | Text selbst lässt sich dabei relativ gut in den Griff bekommen, indem man nicht die (nur relativen) HTML-Schriftgrößen von 1 bis 7 verwendet und auch nicht die Headings von 1 bis 6, sondern die Schrift per CSS formatiert und dort nur auf der Basis von Pixelgrößen.

CMS | Das gilt auch für den häufigen Fall, dass in einem solchen HTML-Bereich Text aus einer Datenbank einfließt, beim Einsatz von Content-Management-Systemen (CMS) also. Solche Texte sind oft im Umfang nicht recht abschätzbar. Hier ist neben einer Formatierung per CSS, wie sie zuvor beschrieben wurde, eine gute Kommunikation von Designer und Programmierer verpflichtend, damit durch entsprechende Programmiermaßnahmen gesichert ist, dass Text eine gewisse Länge nicht überschreitet und vom System entsprechend abgekürzt wird.

Formulare | Eine weitere Ursache von Webdesigner-Albträumen sind Formulare mit ihren diversen Elementen, vor allem aber Buttons und ein- oder mehrzeilige Texteingabefelder. Ohne weitere Maßnahmen sind hier die Schwierigkeiten vorprogrammiert, wenn man solche Elemente mit einem Screendesign unter einen Hut bringen muss. Besonders in diesen Fällen sind die Größenunterschiede streckenweise erheblich, speziell zwischen der Mac- und der Windows-Plattform, weil Formularelemente teilweise auf Teile der Benutzeroberfläche zurückgreifen, die vom Betriebssystem zur Verfügung gestellt werden und nicht vom Browser. Auch hier trägt die Lösung den Namen CSS. Mittlerweile wird die präzise Formatierung von Formularelementen per CSS von praktisch allen gängigen Browsern unterstützt.

Wollte man das früher ganz genau machen, gab es die Methode, das Formular vorher auf der Basis von CSS und HTML zu bauen, auf möglichst allen Browsern und Plattformen zu testen und von der Version, die die größte Ausdehnung hatte, einen Screen-shot zu machen, der in Photoshop als Ebene platziert wurde. So konnte man sicher sein, dass dem Formular im künftigen Design der nötige Platz reserviert wurde. Jetzt kann man sich das zumindest teilweise vereinfachen, indem man in Fireworks die entsprechenden Symbole aus der Allgemeinen Bibliothek dafür nimmt. Hier findet man Symbole aller gängigen Formularelemente, um sich einen Formular-Dummy zusammenzuklicken.

11.8.6 Mutationen und Seiten

Das Seitenkonzept in Fireworks ist für diejenigen Photoshop-User sehr interessant, die viel im Webdesign-Bereich arbeiten. In Fireworks sind im Gegensatz zu Photoshop mehrseitige Dokumente möglich. Damit lassen sich aus einem Screendesign mit eher wenig Aufwand einzelne HTML-Seiten ableiten, die im einfachsten Fall bereits ohne Weiteres verwendbar sind, auf jeden Fall aber als solide Grundlage für die nachfolgende Arbeit des Webentwicklers dienen.

Abbildung 11.57 Die Palette Seiten in Fireworks

Diese Ableitung von Mutationen aus einem Screendesign für verschiedene Einzelseiten geschieht in Fireworks mit Hilfe der Palette Seiten. Dort kann man den aktuellen Zustand der Fireworks-Datei mit ihren an- und abgeschalteten Ebenen in Form einer Seite festhalten. Das entspricht vom Prinzip her den Ebenenkompositionen, wie man sie aus Photoshop kennt. Man kann mit einem Klick auf das Icon Seite hinzufügen/duplizieren am Fuß der Palette entweder eine neue, leere Seite erzeugen oder eine bestehende kopieren, indem man ihr Miniaturbild daraufzieht. Bei unserem Beispieldesign reduziert sich der Aufwand darauf, einige wenige Ebenen bzw. Ebenenordner umzuschalten. Wenn man hier eine gute Struktur mit einer sinnvollen Benennung aufgesetzt hat, geht das alles in allem sehr schnell.

Abbildung 11.58 Verschiedene Layouts für die -Slices auf verschiedenen Seiten

Eine Seite kann dabei auch Ebenen enthalten, die auf anderen Seiten nicht vorhanden sind oder die man dort gelöscht hat.

Ebenso kann man bei einer einzelnen Seite neue Ebenen hinzufügen, die auf den anderen Seiten nicht auftauchen. Das gilt auch für die Slices in der Webebene. Dieser Umstand erlaubt es, nicht nur visuell unterschiedliche Ableitungen aus einem Design zu bekommen, sondern auch funktionelle Varianten. Da unser Beispiel für die Startseite und die ersten drei Unterseiten (»Summer«, Winter« und »Leisure«) verschiedene Layouts für Navigationsbuttons benutzt, werden hier auch jeweils andere Slices mit anderen Parametern gebraucht. Hier kann man auf den einzelnen Seiten mit Kopieren und/oder Löschen unterschiedliche Navigationsleisten einbauen.

Beim Benennen der Slices auf verschiedenen Seiten wird man feststellen, dass Fireworks nach einigen Arbeitsschritten beginnt, bereits vergebene Namen zu löschen und in der Webebene einfach nur »Segment« zu schreiben und zugleich die Namen in den Eigenschaften eines Slices wieder auf die automatische Benennung zurückzusetzen. Das schaut zwar zuerst nach einem Fehler oder einer Eigenmächtigkeit des Programms aus, erklärt sich aber schnell, wenn man bedenkt, dass später beim Export des gleichen Slices auf verschiedenen Seiten Bilddateien, die ja alle im gleichen Ordner landen, mit gleichnamigen Dateien überschrieben werden könnten.

Will man mehrseitige Layouts erzeugen, ist es deshalb okay, wenn man die Slices gar nicht benennt, sondern diese Aufgabe Fireworks überlässt. Das ist zwar ein wenig unübersichtlich, erspart aber Ärger, denn ändert man hier zu viel manuell oder zum falschen Zeitpunkt, wird das ganze Design erfahrungsgemäß ziemlich schnell instabil. Eine Überprüfung der einzelnen Seiten im Dokumentfenster unter Vorschau macht sich hier bezahlt.

Abbildung 11.59 Seitennamen als vorgeschlagene URL

Arbeitet man mit mehreren Seiten, stellt Fireworks in seinem Fenster für die Eigenschaften eines Slice unter Hyperlink in einem kleinen Pulldown-Menü die Namen aller existierenden Seiten auf der Seiten-Palette als URL-Vorschlag zur Verfügung.

Die verschiedenen Seiten müssen weder vom gleichen Design abstammen noch gleich groß sein. So ist es z. B. möglich, eine verkleinerte Version eines Designs oder Teile davon für ein kleineres Popup-Fenster zu benutzen.

Masterseiten | Interessant ist auch das Feature der Masterseiten. Diese Seiten enthalten einen gewissen Umfang an Bild-elementen, die in allen davon abhängigen Seiten dann ebenfalls enthalten und dort auch vor Bearbeitung geschützt sind. Das funktioniert ganz ähnlich wie das Musterseitenkonzept bei Layoutprogrammen wie InDesign oder QuarkXPress. Dieses Feature ist vor allem dort sinnvoll, wo Designs nur für Teilbereiche in Photoshop oder Fireworks entworfen werden und der Rest z. B. für Ausgabebereiche etwa von Content-Management-Systemen vorbereitet werden muss.

Abbildung 11.61 Ausgegebene Dateien

Abbildung 11.60 Export von mehreren Seiten

Ausgabe aus Fireworks | Die Ausgabe von Seiten aus Fireworks heraus funktioniert prinzipiell wie der Export von einzelnen HTML-Seiten. Man muss lediglich im Export-Dialog sicherstellen, dass diese Möglichkeit auch aktiviert ist. Die Checkbox Nur aktuelle Seite muss unbedingt deaktiviert sein. Die Checkbox darüber (Nur aktueller Status) sollte ebenfalls nicht aktiviert sein, damit Rollover-Effekte mit ausgegeben werden, denn diese basieren ja auf dem unterschiedlichen Status für die einzelnen Zustände von Buttons und anderen interaktiven Elementen. Die Ausgabe von Dateien auf der Basis von CSS mit <div>-Boxen wird von Fireworks nur bei Einzeldokumenten unterstützt, leider (noch) nicht bei mehrseitigem Export.

Ist der Export abgeschlossen, ist für unser Beispiel eine kleine Website mit vier HTML-Seiten und einem Bildordner entstanden, die auf jeden Fall als Mockup für eine Präsentation beim Kunden tauglich ist. Links und Rollovers funktionieren tadellos.

Abbildung 11.62 Die vier HTML-Seiten nach der Ausgabe im Browser

---

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.