Dieter Petereit 5. Dezember 2008

Adobe Fireworks CS4 – Kein Photoshop für Arme!

Kein Beitragsbild

Fireworks verwirrt die Zunft. Wieso leistet sich Adobe ein weiteres Bildbearbeitungsprogramm, wo es doch schon Photoshop im Portfolio hat? Manch einer nimmt es Adobe immer noch übel, dass das angeblich bessere Fireworks, nämlich „ImageReady“ eingestampft wurde. Und wenn man durch die Foren und Blogs der Design-Welt streift, stellt man fest, dass die Abgrenzung von Fireworks zu anderen Programmen doch offenbar einige Schwierigkeiten verursacht. Schwierigkeiten indes, die hauptsächlich aus dem falschen Verständnis des Anwendungszwecks von Fireworks resultieren. Im Folgenden will ich ein bisschen zur Entwirrung beitragen und ein paar der neuen Features stelle ich bei dieser Gelegenheit auch noch vor.

Positionsbestimmung

Fireworks ist kein Konkurrenzprodukt zu Photoshop. Fireworks hat nicht Imageready verdrängt, denn Imageready war ein reines Slicing-Tool und damit nicht annähernd so leistungsfähig wie Fireworks. Fireworks ist kein Pixel-Grafik-Programm, es ist aber auch keine Vektor-Grafik-Anwendung und steht also auch nicht in Konkurrenz zu Illustrator. Was aber, wenn all das nicht, ist Fireworks (FW) dann?

Lassen Sie mich kurz einschieben, dass wohl auch Adobe selber länger gebraucht hat, zu erkennen, was FW tatsächlich ist und was es für den Web-Entwickler leisten kann. Erst in der aktuellen Version CS4 hat Adobe FW in die „Suite Design Premium“ aufgenommen, deren Anwender in der Version CS3 noch ohne FW auskommen mussten, weshalb ich es seinerzeit separat nachkaufte. Rationelle Entwurfsarbeit ist für mich seit der Version 1.0 von Fireworks aus dem Jahre 1998 undenkbar geworden.

Fireworks ist, ich ließ es bereits anklingen, DAS Tool für die Entwurfsarbeit, heutzutage „Rapid Prototyping“ genannt. Es ersetzt weder ein spezialisiertes Vektor-, noch ein spezialisiertes Pixel-Grafik-Programm, noch eine Entwicklungsumgebung wie Dreamweaver. Man könnte also sagen, es sei unnütz. Unnütz, weil man eben mit anderen Programmen teils deutlich bessere Ergebnisse in der jeweiligen Spezialdisziplin erreichen kann. Und ich muss einräumen, dass die Aussage, so platt betrachtet, grundsätzlich wahr ist. Aber – Realitycheck.

fw-splash.png

Die Realität im Agenturalltag

Ein Kunde will eine neue Website. Er will mal richtig was wagen – sagt er – und Sie sollen ein paar überraschende Vorschläge machen. Bildmaterial gibt er Ihnen zwar, Sie sehen jedoch auf den ersten Blick, dass Sie damit nur etwas werden anfangen können, wenn Sie die Bilder stark nachbearbeiten. Gleichzeitig wissen Sie, dass es schwierig ist, diesem Kunden gerecht zu werden. Er ist ein typischer Laie, der glaubt, Veränderungen, auch massive Veränderungen am Entwurf sind jederzeit durch simplen Knopfdruck möglich. Das Budget ist stets zu eng, der Zeitplan auch. Sie haben im Grunde zwei Möglichkeiten.

Entweder Sie bauen dem Kunden mehrere Prototypen mit Photoshop und Dreamweaver zusammen, die Sie im Browser präsentieren können. Schließlich will der Kunde auch die vorgesehene Interaktion beurteilen können. Wenn man sich nicht wegen mangelnder Funktionalität in der Präsentation blamieren will, wird man entsprechend viel Aufwand in die Vorbereitung investieren, dabei wissend, dass man diesen Aufwand nur schwerlich in klingende Münze wird umsetzen können.

Oder Sie klöppeln lediglich einige Designentwürfe mit Photoshop zusammen, verzichten somit auf die Präsentation der interaktiven Elemente und der Informationsarchitektur und drucken die Beispiele mit einem Farblaserdrucker großformatig aus. Laminiert oder in sonstiger Verpackung präsentiert, hoffen Sie, den Kunden so hinreichend begeistern zu können. Im Hinterkopf dreht sich dabei die Frage, ob der platte grafische Entwurf letztlich überhaupt in gleicher Weise umgesetzt wird werden können. Haben Sie an alles gedacht?

Rapid Prototyping mit Fireworks

FW eröffnet Ihnen eine dritte Option. Denn mit FW entwickeln Sie mehrere funktionierende Prototypen inklusive Navigations- und sonstiger Dialog-Elemente, lassen das Ganze eventuell noch als HTML exportieren und können Ihrem Kunden Lösungen präsentieren, die der Realität möglichst nahekommen, also keine platten Grafiken sind. Zudem lässt sich nicht nur das Look und das Feel zeigen, sondern es lässt sich auch der simple Schluss ziehen, dass eine Lösung, die mit FW funktioniert, letztlich auch „in echt“ umsetzbar sein wird. Ihr Kunde kann sich was unter seinem Auftrag vorstellen, Sie besitzen eine saubere Kalkulations-, respektive Ressourcenplanungsgrundlage und vor allem haben Sie nicht schon das halbe Budget in Entwürfen verblasen.

prototyping-1.png

Dafür lohnt die Anschaffung von FW bereits. Natürlich kann FW auch den Produktionsprozess begleiten. Prinzipiell ist es eine „Start-To-Finish“-Lösung. Ich setze sie allerdings so nicht ein. Nach der Entwicklung der Prototypen und der Festlegung des Auftragsumfangs nutze ich FW bestenfalls noch als Slicing-Tool, wenn Slicing benötigt wird, während alle anderen Arbeiten mit der Unterstützung spezialisierterer Softwares stattfinden. Ich kenne allerdings einige Kollegen, die so tief in Ihrem FW drinstecken, dass sie alles, was ich in Photoshop, Illustrator, Dreamweaver erledige, auch mit ihrem FW hinbekommen. Das aber ist stets eine Frage der eigenen Ansprüche an die Qualität des Endproduktes, denn ohne Kompromisse geht es bei FW nicht.

Vorteile des Prototyping im Vergleich zu Photoshop

Wir alle wissen, dass Photoshop ein Produkt ist, das nicht für das Webdesign geschaffen wurde. Photoshop entfaltet seine Kraft bei der Gestaltung von Printmedien und in der Bearbeitung von Fotografien. Photoshop ist bestens geeignet in Bereichen, in denen es auf Druckfarben, Formathaltigkeit und andere Designziele ankommt, die im Webdesign nur eine stark untergeordnete Rolle spielen. Photoshop gehört natürlich in jede Agentur.

Fireworks kostet lediglich einen Bruchteil des Funktionsmonsters Photoshop (PS). Schon von daher muss klar sein, dass FW keine Konkurrenz zu PS sein kann und will. FW kümmert sich nicht um Druckfarbräume und kann auch mit Auflösungen außerhalb der Screenüblichen nicht sonderlich gut umgehen. FW-Effekte lassen sich aufgrund ihrer starken Rasterung bei Skalierung auf druckübliche Auflösungen nicht mehr gebrauchen.

Kurz: FW taugt für nichts anderes als für screendesign-bezogene Aufgabenstellungen. In diesem Spezialgebiet jedoch ist es besser als PS. Diese Überlegenheit beginnt ganz weit vorne.

wireframe.png

FW blendet auf Wunsch ein Pixelraster ein, das die Basis für die Bildschirmaufteilung sein kann und wie ein Grid funktioniert. Die zu positionierenden Elemente können als Vektorgrafiken angelegt werden, so dass es im Folgenden leicht möglich ist, diese zu skalieren, ohne dabei deren Eigenschaften (wie Rahmendicke etc.) zu verändern. Sämtliche Positionierungen finden numerisch statt, also in der Form „10px vom oberen Rand“ oder ähnlich. Auch Abstände zwischen Elementen sind so wesentlich genauer, also screendesigntauglicher, als mit PS umzusetzen, wo es sehr auf das Augenmaß des Designers oder auf die Anzahl der definierten Hilfslinien im Projekt ankommt.

fw-grid.png

FW kann Effekte nicht nur auf Ebenen (wie PS), sondern auch auf einzelne Objekte innerhalb einer Ebene nicht-destruktiv anwenden. Das erleichtert das Experimentieren im Rahmen des Prototyping kolossal. Überhaupt sind nahezu alle Effekte in FW nicht destruktiv, was das Hantieren mit X Versionen ein und derselben Grafik überflüssig macht und die Entwurfsarbeit innovationsfreudiger, weil aufwandsärmer werden lässt. Dadurch, dass die Bearbeitung in FW stets auf der Basis der endgültigen Auflösung stattfindet, lassen sich auch kleinste Details der Screengrafiken fine tunen. Da kein Re-Rendering stattfinden muss, kann sich der Designer auf eine 1:1-Umsetzung im Browser verlassen.

Das Prototyping mit FW kann so weit gehen, dass eine komplette Website mit mehreren Seiten vollständig in einer einzigen PNG-Datei (dem Standard-Dateiformat von FW) entwickelt und gespeichert werden kann. Dabei können Ebenen ihre Inhalte und/oder Eigenschaften auf andere Ebenen weitergeben, so dass Redundanz beispielsweise mit Blick auf die Verwendung von Design-Elementen wie Grafiken, ausgeschlossen werden kann, respektive die Möglichkeit rationeller Verwendung schon im Prototypen erkennbar wird.

prototyping-2.png

Am Ende des Prototyping führt man den Prototyp entweder in FW selbst vor oder exportiert ihn nach HTML oder exportiert ihn (seit CS4) in ein interaktives PDF, was immer dann die beste Möglichkeit ist, wenn man seine Prototypen aus der Hand geben muss, bevor ein definitiver Auftrag erteilt ist. PDFs lassen sich bekanntlich recht rigoros schützen. Nichts von all dem hätten Sie mit Photoshop tun können…

Neue Funktionen in Fireworks CS4

Glücklicherweise scheint man sich bei Adobe nun auch selbst über die Rolle klar geworden zu sein, die FW im Portfolio zukommen soll. War die Fortentwicklung des FW bislang eher zaghaft, zeichnet sich mit CS4 eine Verstärkung der Bedeutung des Produktes innerhalb der Adobe Produktfamilie ab. Anders als noch zu Zeiten von Macromedia bemüht sich Adobe, den Fokus klar auf die Entwurfsentwicklung mit FW zu lenken. Dazu passen entsprechend die neuen Funktionen:

Export in interaktives PDF: Wie eben schon beschreiben, eignet sich ein interaktives PDF aus mehrererlei Gründen besonders für die Präsentation eines Prototypen. PDF ist omnipräsent. PDFs sind optisch über die Plattformen konsistent. PDFs lassen sich hervorragend schützen.

Prototyping für und mit AIR: FW kann Prototypen für AIR-Anwendungen erstellen, wie auch Prototypen als AIR-Anwendungen. Eine weitere elegante Möglichkeit für den Designer, sein geistiges Eigentum zu schützen und es dennoch quasi unbeaufsichtigt zum Kunden zu geben.

Kollaboration über ConnectNow: Entfernt sitzenden Kunden zeigen Sie Ihre Prototypen in Echtzeit über den Dienst ConnectNow. Änderungen und Erweiterungen können direkt am Produkt besprochen werden.

CSS-Export: Der CSS-Export ist aus meiner Sicht die spannendste Neuerung. Sie soll FW befähigen, den Prototypen als HTML+CSS auszugeben und das Ganze auch noch standardkonform. Angesichts der bisherigen Qualität des exportierten Codes sind allergrößte Zweifel angebracht. Ich werde mich zu dieser Thematik äußern, nachdem ich ein kleineres Projekt entworfen habe. Da mein CS4 erst vor wenigen Tagen geliefert wurde, kann das noch eine Weile dauern…

In CS4 wurden zudem eine ganze Reihe bereits vorhandener Funktionen verbessert. Praxisrelevant ist die Möglichkeit der naturgetreuen Übernahme von Daten aus Photoshop und Illustrator, sowie die Integration der Adobe-Text-Engine, die bisher nur in PS und IL verwendet wurde.

Fazit

Fireworks ergänzt Photoshop, Illustrator und Dreamweaver (auch Flash respektive Flex für die Zappeldesigner unter Ihnen) um eine wichtige Komponente, nämlich die schnelle Entwurfsentwicklung. Mit keinem der Einzelprodukte ist ein auch nur annähernd ähnlich schnelles Prototyping möglich. Dabei kümmert sich FW in besonderer Weise um den Schutz der geleisteten Entwicklungsarbeit. Angesichts der vorhandenen Limitierungen ist es nicht ernsthaft als Komplettlösung für den Screendesigner geeignet, leistet aber in seinem Teilbereich Einzigartiges. Abgestimmte Layouts wird der Entwickler auch weiterhin zumindest mit zusätzlichen Tools, wie PS, IL und DW zur Endreife bringen. Insofern ist es sehr zu begrüßen, dass Adobe FW in Version CS4 auch in die Design Suite aufgenommen hat.

vectorbearbeitung-1.png

Wichtige Weblinks

  • Das Fireworks-Developer-Center, dem man immer noch ansieht, wie zaghaft Adobe in den letzten Jahren FW mit Ressourcen versorgt hat.
  • Der Fireworks-Exchange, der einen Marketplace für Erweiterungen der Kernfunktionalitäten des FW darstellt. Viele Entwickler aus aller Welt stellen sinnvolle Zusätze zum Kernprodukt teils kostenlos zum Download bereit.
  • Der Fireworks-Blog, dem man die Ressourcenknappheit immer noch überdeutlich ansieht. Aber vielleicht tut sich da in nächster Zeit etwas mehr…
  • Die offiziellen Fireworks-Supportforen
  • Die FireworksGuru-Foren: Ein relativ reges englischsprachiges Forum zu FW
  • DemonTowers: Eine Website mit professionellen Extensions für FW, DW und Flash.
  • Dreamworker.de: Eines der beiden besten Foren zu Adobe-Produkten in Deutschland (Link führt direkt zum FW-Forum)
  • Traum-Projekt.com: Das andere der beiden besten Foren… Auch hier führt der Link direkt zum FW-Forum. ™

Die verwendeten Screenshots noch einmal als Galerie:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

14 Kommentare

  1. Hi,
    ich finde FW super was mich aber stört ist das Anti Alias für Fonts in PS ist es einfach besser mit der Schrift.

  2. Auch ich verwende Fireworks schon seit einigen Jahren. Man kann damit so ziemlich alles erstellen. Für mich persönlich ersetzt es Photoshop + Illustrator voll und ganz. Sei es ich gestalte eine Website, Visitenkarten, Flyer, Poster etc. es ist alles machbar und bis jetzt waren alle mit dem Ergebnis zufrieden. Bin froh das es FW gibt, auch wenn so manche Druckerei nichts mit *.png anfangen kann, aber kann man ja dennoch exportieren.
    ————-
    Guter Artikel!

  3. Danke für die Info! Beim Thema Fireworks hatte ich schon immer ein großes Fragezeichen überm Kopf.

  4. Ich habe es über die Jahre immer mal wieder mit PS probiert, und bin jedesmal voller Reue zu FW zurückgekehrt. PS fühlte sich einfach so „fremd“ an. Das Team DW + FW war immer ungeschlagen, bis ich den DW irgendwann nicht mehr benutzt habe – weil ich die Eleganz von Coda entdeckte. FW aber ist noch immer da. Fürs Web einfach unfassbar gut.

    Just my 0,02 EUR…

  5. @Martin: Das spiegelt so ziemlich meiner Erfahrung wieder. Ich habe mit dem DW/FW/FL 2.0 Paket begonnen und muss in Bezug auf Webseiten feststellen, dass ich mit FW immer noch weit schneller und unkomplizierter ans Ziel komme. Ein wesentlicher Punkt des Artikels ist die leichte Positionierung der Elemente.

    Und von dem einstigen „Dreigestirn“ ist bei mir nur noch FW übrig geblieben.

  6. Ich fand die Bedienung noch nie ungewohnt, für mich ist Photoshop ein Graus! ;)
    Liegt aber bestimmt daran, das ich FW schon seit Jahren kenne. Je mehr ich mit FW gearbeite habe, umso faszinierter war ich über die Einfachheit in FW, in PS war alles irgendwie komplizierter.

    Gruß
    Martin

  7. Ich setze auch FW zum Layout Entwurf ein und möchte es um keinen falls Missen.
    Entwurf mit FW, Grafiken mit PS und zum Schluß alles im DW ins Reine gebracht. Den Code von FW kann man nicht verwenden, aber die Erstellung geht weit aus schneller wie ich finde.

    Ich denke das so viele skeptisch dem FW gegenüber stehen ist die ungewohnte Bedienung. Wenn man sich aber erst einmal zurecht findet, fragt man sich warum man es nicht schon von Anfang an benutzt hat.

    MFG

  8. Interessanter Artikel, vielen Dank

  9. Ih setzte seit Jahren FW als Tool zur Erstellung von Prototypen ein, meist für Websiten. Neuerdings benutze ich es auch für Software-Klickdummys, zu Usibility-Zwecken, um Prozesse im Dummy abzubilden und Fehler zu erkennen. Super dazu sind die HTML-Export-Klickdummys geeignet!

    Gruß
    Martin

  10. Man wird sicher nie alle Webdesigner unter einen Haube bekommen, aber ich habe lange mit dem Duo Fireworks + Photoshop sehr gute Erfahrungen gemacht. Da wo Photoshop die gestalterische Kreativität besser unterstützt, setzt Fireworks immer wieder effektivere Worksflows für den Webdesignprozess entgegen. Grade die CS4-Version ist einen zweiten Blick wert. Die interaktiven PDF-Entwürfe können tatsächlich den Weg zur Kundenpräsentation verkürzen, die Möglichkeit mehrere Seiten in einer Datei zu verwalten ist seit CS3 einer meiner Favoriten, und auch die allgemeine Bibliothek mit Formularelementen etc. ist einfach ausser Konnkurenz. Und FW CS4 bringt erstmals einen brauchbaren, wenn auch sicher nicht perfekten CSS-Export mit sich, dem ich jetzt schon mal eine interessante Zukunft voraussage. Entwicklungsbedürftig und kritisierbar wird FW sicher bleiben, aber wer FW zu schätzen weiss, wird mit dem neuen Update, glaube ich auch nicht unglücklich.

  11. Daß FW das Programm für den ersten Entwurf sein soll, wird ja schon seit einigen Versionen angepriesen. Bisher war aber das große Problem, daß sich FW anders anfühlte als die Adobe-Programme. Das beginnt beim Einstellen des Schriftgrades und geht viel weiter, obwohl einige Dinge bei FW einfacher gelöst sind.

    Das zweite Problem: Für einen überzeugenden Entwurf braucht mit Grafiken braucht man PS. Gerade die Effekte sind für PS-Anwender fremdartig. Da wäre es vielelicht doch besser gewesen, IR weiterzuentwickeln, weil sich dort das UI immerhin anfühlte wie bei PS.

    Das dritte Problem ist natürlich der Code. Nichts vom ersten Entwurf in FW kann man davon später beim eigentlichen Layouten verwenden. Deshalb müßte man viel Zeit in einem fremden Programm verbringen und dann alles noch einmal mit den üblichen Programmen machen, nachdem der Kunde ja gesagt hat. Man spart Zeit, wenn man für beim Entwurf eine Grafik ohne Code macht, denn mit FW codiert man zweimal.

  12. Klingt interessant! Für denjenigen, der FW nicht kennt, bleibt aber unklar, worin die Interaktivität besteht. Ist das Ding nebenbei auch CMS und/oder HTML-Editor?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.