Adobe Fireworks CS4
Interaktive Designs

Vom Grafiktool zur Design-Umgebung

Grafik-, Web- und Application-Designer, egal ob sie für Agenturen oder frei arbeiten, haben oft mit Kunden zu tun, für deren Entscheidungsfindung Visualisierungen eine große Hilfe darstellen. Schicke Demos und Mock-ups sagen dabei mehr als viele Worte. Mit Fireworks CS4 haben Designer ein Tool zur Hand, das sich entwickelt hat vom einfachen Webgrafik-Programm hin zur Pre-Visual-Webdesign-Umgebung, die nicht nur Pixel- und Vektortools mitbringt, sondern mit der sich schnell und unkompliziert auch interaktive Web-Demos erstellen lassen. Wichtig dabei ist: Die erstellten Prototypen und Visuals sind keine Sackgassen. Sie lassen sich als HTML-Code und CSS-Layout ebenso exportieren wie als weiterzubearbeitende Projekte in Adobe AIR, Flex, Flash oder Photoshop, Illustrator und natürlich Dreamweaver.

Fireworks-Projekte lassen sich als HTML-Code und CSS-Stylesheet exportieren. Voraussetzung ist, dass Anwender vorher die Objekte entsprechend definiert haben. Die Eigenschaftenpalette hilft dabei.

Schnelleres Arbeiten

Adobe Fireworks CS4 ist deutlich flotter als der Vorgänger: Das Öffnen und Speichern sowie der Umgang mit Ebenen, Symbolen und mehrseitigen komplexen Projekten geht schneller von der Hand. Bei besonders umfänglichen Kompositionen können Anwender bereits während des Speicherns weiterarbeiten und müssen nicht mehr lange darauf warten.

Positiv auf das Arbeiten mit Fireworks wirkt sich auch die Vereinheitlichung der Oberfläche aus. Das Bedienverhalten folgt inzwischen sichtbar dem von zum Beispiel Photoshop, Illustrator und InDesign. Größeres Umgewöhnen ist daher kaum mehr erforderlich. Wie in den anderen CS4-Applikationen auch finden sich alle wichtigen Werkzeuge links in der Tools-Palette sowie die Optionen am oberen Rand oder im jeweiligen Kontextmenü des gewählten Werkzeugs. Die Paletten sind am rechten Bildschirmrand übersichtlich kombiniert und schnell ein- und ausblendbar. Die Oberfläche und das aktive Paletten-Set können per Pull-down-Menü zügig ausgewählt werden – je nach Bedarf. Diese so genannten Workspaces lassen sich darüber hinaus an die eigenen Bedürfnisse anpassen, abspeichern und später voreingestellt nutzen.

Beim Positionieren und Ausmessen von Objekten helfen in Fireworks die mit der Creative Suite 4 eingeführten Smart Guides. Sobald ein Objekt verschoben wird, blenden diese neben den Koordinaten auch Hilfslinien ein und unterstützen Anwender beim exakten Anordnen auf der Arbeitsfläche. Da die Hilfen nur während des Verschiebens eingeblendet sind, besteht keine Notwendigkeit mehr, die Arbeitsfläche später aufzuräumen oder Hilfslinien ständig zu verschieben. Denn die Smart Guides finden schon vorhandene Objekte, an denen neue ausgerichtet werden können, automatisch. Wenn der Anwender gleichzeitig die Shift-Taste betätigt, helfen die Smart Guides auch beim Ausmessen von Abständen. So hat sofort alles seine Ordnung.

Bei komplexeren Projekten und mehreren geöffneten Dateien sind große Bildschirme und Auflösungen hilfreich – auch wenn sich die Oberfläche von Fireworks gut anpassen lässt und stets aufgeräumt bleibt.

Flexible Projekt-Export

Statt Webpages umständlich für Demonstrationen zu programmieren, lassen sie sich mit Fireworks CS4 ganz einfach grafisch erstellen. Auch komplexere Layouts sind als HTML- und Stylesheet-Dateien mit CSS-Unterstützung exportierbar. Voraussetzung dafür ist natürlich, dass die entsprechenden Objekte vorher mit den notwendigen Eigenschaften versehen wurden, wie zum Beispiel die Definition einer Grafik als Hintergrund.

Das funktioniert über Palletten und Optionen allerdings recht unkompliziert. Checkboxen, Textfelder und interaktive Buttons werden ebenfalls in Fireworks zunächst grafisch erstellt und schließlich mit den gewünschten Funktionen versehen als HTML-Code exportiert.

Falls Projektdateien und Kompositionen an einen Kunden zur ersten Absprache übersandt werden sollen, macht es indes wenig Sinn, Code zu verschicken. Hierfür eignet sich die Funktion Export to PDF, die etwa mehrere verlinkte Seiten auch mit einfachen interaktiven Inhalten aufnimmt, so dass der Betrachter sich mit dem Adobe Reader durch den Projekt-Dummy klicken sowie Anmerkungen hinterlegen kann. Vorteilhaft dabei ist zudem, dass sich die Daten mit einem Passwort schützen lassen – etwa vor unberechtigtem Öffnen, Drucken oder Verändern.

Alternativ dazu lassen sich mit Fireworks CS4 auch Grafikdesigns für Prototypen von Adobe AIR-Webapplikationen erstellen, um diesen ein frühes eigenes Gesicht zu verleihen. Nachdem in Fireworks die Oberfläche gestaltet und verschiedene Zustände für Interaktionen definiert wurden, lassen sich die Mock-ups in echte AIR-Prototypen umwandeln oder wie gehabt als Projekt für Flex oder Flash sowie
als HTML-/CSS-Paket exportieren.

Als PDF exportierte Fireworks-Projekte können passwortgeschützt sein und lassen sich mit Anmerkungen versehen. Das hilft bei Kollaborationen und Abstimmungsprozessen.

Freieres Texten und Stylen

Das Einfügen, Bearbeiten und Positionieren von Texten und Rahmen erfolgt in Fireworks CS4 intuitiv. Ohne Qualitätsverlust lassen sich jetzt auch Texte (inklusive Double-Byte-Zeichen) zwischen Fireworks und Photoshop, Illustrator oder InDesign CS4 austauschen, da dieselbe Text-Engine verwendet wird. Wer ein PSD-File mit mehreren Textebenen in Fireworks importiert, kann den Text sofort weiter bearbeiten.

Hilfreich ist zudem, dass sich der Textfluss innerhalb bestimmter Pfade anlegen lässt und Anwender sofort prüfen können, wie sich der Text in einer CSS-Komposition verhält. Die Eigenschaftenpalette für Texte erlaubt das präzise Aussteuern der Typografie inklusive Größe, Breite, Höhe, Kerning, Absatzdefinitionen  und Positionierung.

Um (Grafik-) Symbole zu bearbeiten, verzichtet Fireworks jetzt auf das Öffnen eines zusätzlichen Fensters, sondern gestattet In-situ-Anpassungen. Dabei behalten Designer das Gesamtbild der Komposition immer im Auge. 9-Slice-Scaling ist zudem in Version CS4 für jede Art von Objekt verfügbar, egal ob Pixel- oder Vektorgrafik, Objektgruppe oder Textfeld.

Um Farben, Effekte oder sonstige Attribute Objekten schnell zuzuweisen, sind Styles eine große Hilfe. In Fireworks CS4 arbeitet es sich mit diesen jetzt noch schneller, da das Style-Management flexibler geworden ist. Einerseits können Änderungen eines Objekts, das zur Stylegruppe gehört, automatisch die sofortige Anpassung aller anderen Gruppenobjekte nach sich ziehen. Andererseits können einzelne Objekte verändert, aber von der Stylegruppe getrennt werden. Auf diese Weise sind neue oder Untergruppen einzurichten, für die wiederum eigene Styledefinitionen gelten. Die Style-Sets lassen sich über mehrere Dokumente verwenden und austauschen. Auf diese Weise vermeiden Anwender früher wiederholte Arbeitsschritte.

Intuitiver mit Texten arbeiten: In Fireworks ist jetzt die bekannte Adobe Text-Engine voll integriert.

Testergebnis

Ob Designer ein spezielles Tool für Website-Mock-ups benötigen oder sich anderer Referenztools wie Photoshop, Flash oder Dreamweaver bedienen, ist wohl Geschmackssache. Das Optimieren von Grafiken für den Online-Einsatz geht mit Fireworks CS4 jedoch ebenso schnell und unkompliziert wie das grafikbasierte Anlegen von Webpage-Layouts und Designs für Web-Applikationen. Dass sich die Dummies und Prototypen gut in den Referenzprogrammen weiter ausbauen lassen, trägt zum Nutzwert von Fireworks CS4 bei. Die Neuerungen sind nützlich und beschleunigen die Arbeit, lassen allerdings größere Aha-Effekte vermissen.

Fireworks CS4
Hersteller: Adobe
Internet: www.adobe.de
Preis: 415,31 Euro, Upgrade für 177,31 Euro

Note: gut *
Leistung (50 %)    gut
Bedienung (30 %)    gut
Ausstattung (20 %)    befriedigend

* Getestet wurde die Beta-Version. Die finale Version kommt Anfang November auf den Markt.

Das ist neu
– Anpassung an einheitliche CS4-Oberfläche
– PDF-, AIR-, CSS- und grafikbasierter Export
– Verbesserung der Text-Engine
– Erweiterung der Style- und Symbol-Funktionen
– Integration von Kuler für Farbharmonien

Systemvoraussetzungen
Betriebssysteme:    ab Windows XP SP2, ab Vista Home Premium SP1
            MacOS X 10.4.11 – 10.5.4
Prozessor:        Für Windows: 2 GHz Pentium, Für MAcOS: PowerPC G5 oder Multicore Intel-CPU
Arbeitsspeicher:    1 GByte
Festplatte:        etwa 2 GByte freier Speicherplatz (zzgl. Nutzdatenspeicher)