Haupt Sonstiges Der Fokus auf das mobile Design von Fireworks CS6 bildet den Dreh- und Angelpunkt der neuen Strategie
Sonstiges

Der Fokus auf das mobile Design von Fireworks CS6 bildet den Dreh- und Angelpunkt der neuen Strategie

BewertungenTablets 19.07.2012 23:00 PDT

Auf einen Blick

Expertenbewertung

Vorteile

  • Die Unterstützung für CSS hilft Entwicklern, schnell zu programmieren
  • Die Symbolbibliothek erleichtert das Erstellen von Schnittstellen
  • CSS-Sprite-Export ermöglicht optimierte Downloads

Nachteile

  • Das Bedienfeld „CSS-Eigenschaften“ enthält für einige Formen keinen Code
  • jQuery Mobile-Themen werden vom Editor besser gehandhabt
  • Vektorwerkzeuge stimmen nicht mit Illustrator überein

Unser Urteil

Adobe Fireworks – eine kuriose Kombination aus Photoshop und Illustrator, die speziell dem Webdesign gewidmet ist – ist eine der spezialisierteren Apps in der Creative Suite von Adobe. Als Begleitprodukt zu Dreamweaver ermöglicht Fireworks Designern, Webmodelle zu erstellen, Dateien für den Export aufzuteilen und Assets an Entwickler weiterzugeben. Zu diesem Zweck bietet Fireworks CS6 Verbesserungen, die den Austausch zwischen Designern und Entwicklern erleichtern.



Meister der Mockups

Mit den Bitmap-Werkzeugen von Fireworks können Sie Pixel für Pixel Mockups erstellen, während Sie mit den Vektorwerkzeugen des Programms schnell Kästchen, Hintergründe und andere größenveränderbare Formen erstellen können. Sie können mehrere Seiten in einem einzigen Dokument für verschiedene Versionen desselben grundlegenden Designs erstellen. Beispielsweise kann eine Seite ein Modell der Homepage enthalten, während eine andere die Standardinhaltsseite hostet. Fertige Mockups können für den Export in Slices aufgeteilt werden, und Sie können Slice-Verhalten (z. B. ein Rollover) zuweisen, um mit Dreamweaver kompatibel zu sein.

Fireworks CS6 enthält einige kleinere Verbesserungen der Benutzerfreundlichkeit, darunter Deckkraftsteuerungen für Füllungen und Striche, eine verbesserte Farbauswahl, die Hex-Werte anzeigt, und die Möglichkeit, den Winkel eines Farbverlaufs anzugeben. Darüber hinaus enthält die Symbolbibliothek jetzt Oberflächenelemente von Smartphones, mit denen Designer mobile Websites schnell nachbilden können. Zu den neuen Elementen gehören Gestensymbole, Tastaturen und Hardwarerahmen.





Erweiterungen der Symbolbibliothek ermöglichen Ihnen das schnelle Nachbilden von mobilen Weboberflächen und mobilen Apps.



gibt es eine garantie auf airpods?

Verbesserte CSS-Funktionalität

Bei einem typischen Workflow erstellt ein Designer möglicherweise Webmodelle in Fireworks und übergibt sie dann zur Codierung an einen Webentwickler. Der Entwickler muss dann die Mockups zerlegen und beurteilen, welche visuellen Elemente mit Cascading Style Sheets (CSS3) erreicht werden können, einer Programmiersprache, die zunehmend verwendet wird, um nicht nur das Aussehen und das Layout von Texten, sondern auch das Erscheinungsbild grafischer Elemente zu beschreiben wie Schaltflächen, Hintergründe und Schatten.

Das Bedienfeld „CSS-Eigenschaften“ – neu in Fireworks CS6 – bietet Entwicklern einen Vorteil, indem es automatisch Code für viele Elemente des Designs generiert. Nehmen wir an, Sie erstellen mit dem Vektorwerkzeug ein Rechteck mit abgerundeten Ecken, wenden eine Verlaufsfüllung an und fügen einen dezenten Schlagschatten hinzu: All dies kann mit CSS beschrieben werden. Wählen Sie das Objekt aus und besuchen Sie das Bedienfeld CSS-Eigenschaften, und Sie sehen die vollständige Liste der Eigenschaften zusammen mit dem erforderlichen Code (der in die Zwischenablage kopiert werden kann). Darüber hinaus kann Fireworks Code generieren, der für Opera-, Firefox-, Internet Explorer- und Webkit-Browser wie Safari und Chrome spezifisch ist, um ein konsistentes browserübergreifendes Rendering zu gewährleisten.

Diese Funktion ist ein großer Vorteil für Entwickler und kommt auch Designern zugute. Passen Sie Ihre Designelemente an CSS an und vermeiden Sie umstrittene Änderungen durch einen Entwickler, der die Website optimieren möchte. Der Vorbehalt – und es gibt immer einen Vorbehalt – ist, dass es nur wenige Arten von grafischen Elementen gibt, die vollständig mit CSS kodiert werden können. Das Bedienfeld „CSS-Eigenschaften“ beschreibt Aspekte dieser Objekte (z. B. Linienstärke, Linienfarbe und Füllung), benötigt jedoch eine Warnanzeige, um Designern mitzuteilen, welche Objekte nicht vollständig von CSS beschrieben werden können.

Die zweite wichtige Möglichkeit, wie Fireworks CSS jetzt unterstützt, ist über CSS-Sprites. Anstatt Oberflächengrafiken in Dutzende von einzelnen Dateien aufzuteilen, können Sie eine einzelne Bilddatei (oder ein Sprite-Sheet) exportieren, die alle Grafikelemente enthält. CSS-Code – definiert durch Ihre Slices – beschreibt die Position jedes Grafikelements auf diesem Sprite-Sheet. Der Vorteil besteht darin, dass das Sprite-Sheet nur einmal heruntergeladen wird, was die Website beschleunigt, indem die Nachfrage auf dem Server verringert wird.

Im Bedienfeld „CSS-Eigenschaften“ können Entwickler Code für Objekte wie abgerundete Rechtecke kopieren und einfügen, die vollständig von CSS gerendert werden können.

iPhone 6s plus Batteriewechselprogramm

jQuery Mobile-Design-Skinning

jQuery ist für Uneingeweihte ein berührungsoptimiertes Framework, das Entwicklern dabei helfen kann, auf Smartphones zugeschnittene Inhalte schnell bereitzustellen. Es stützt sich stark auf CSS-Grafiken und CSS-Spritesheets, um sicherzustellen, dass mobile Websites schnell geladen werden.

In Fireworks CS6 ist es jetzt für einen Designer (und nicht für einen Entwickler) möglich, ein jQuery Mobile-Design anzupassen, ohne jemals Code durchforsten zu müssen. Es ist jedoch ein bisschen ein fauler Prozess. In Fireworks CS6 gibt es keinen dedizierten Themeneditor; Stattdessen werden Sie aufgefordert, die Eigenschaften von Objekten in einer mehrseitigen Vorlage anzupassen und sie dann als Design zu exportieren.

So löschen Sie das iCloud-Konto vom Mac

Wenn Sie Befehle -> jQuery Mobile Theme -> Create New Theme wählen, wird ein neues Theme-Dokument geöffnet. Auf der ersten Seite können Sie globale Assets und Stile definieren, und Sie erhalten zwei Sätze von allgemeinen Navigationssymbolen, die Sie anpassen können. Sie können auch den Stil für Schaltflächenbeschriftungen, Symbolhintergründe, Rahmenschatten und abgerundete Ecken festlegen, indem Sie auf ein Objekt klicken und seine Eigenschaften anpassen. Die folgenden fünf Seiten bieten Standardmuster, die Sie an Ihr Design anpassen können, indem Sie Schriftarten auswählen und die Farbe von Kopf-/Fußzeilen, Hintergründen und Schaltflächen anpassen. Leider deaktiviert Fireworks keine Eigenschaften, die nicht webfreundlich sind, daher müssen Sie darauf achten, Schriftarten und Farbverlaufstypen zu vermeiden, die nicht von CSS unterstützt werden.

Mit einer integrierten Designvorschau können Sie Ihr Design jederzeit überprüfen, obwohl Sie die Vorschau manuell neu laden müssen, nachdem Sie Änderungen vorgenommen haben. Das Problem ist, dass Sie das Thema nicht mit Ihren eigenen Beispielinhalten in der Vorschau anzeigen können, was enttäuschend ist, da der Hauptfokus dieser App auf der Erstellung von Webmodellen liegt. Im Endeffekt bedeutet dies, dass Sie das Thema in einem regulären Dokument neu erstellen müssen, um ein richtiges Modell für Ihren Kunden zu erstellen.

Darüber hinaus bietet jQuery Mobile einen kostenlosen webbasierten Editor namens ThemeRoller, der die Themenanpassung mit mehr Finesse als Fireworks handhabt. Auf der linken Seite werden Theme-Einstellungen konfiguriert, Farben können per Drag & Drop aus der Palette oben gezogen werden und alle Änderungen an einem Theme werden live in der Mitte der Seite angezeigt. Sobald Sie mit dem, was Sie sehen, zufrieden sind, können Sie das Thema kostenlos herunterladen. Die mehrseitige Vorlagenstruktur von Fireworks ist im Vergleich umständlich, obwohl Sie im Gegensatz zu ThemeRoller mit Fireworks Änderungen am Standardsymbolsatz des Themas vornehmen (und neue Symbole hinzufügen) können.

Mit Fireworks CS6 können Sie jQuery-Designs optimieren, aber es ist ein umständlicher Prozess, dem eine benutzerdefinierte Vorschauoption fehlt.

Alte Gewohnheiten

Trotz vier großer Updates behält Fireworks viele Oberflächenartefakte aus seiner Zeit als Macromedia Studio MX-Produkt. Infolgedessen stimmen viele Aspekte der Benutzeroberfläche nicht mit anderen Apps in der Adobe Creative Suite überein. Die Vektorwerkzeuge von Fireworks – ursprünglich abgeleitet von Macromedia Freehand – unterscheiden sich weiterhin deutlich von denen in Illustrator.

Das ist nicht immer schlecht; Farbverlaufssteuerelemente enthalten beispielsweise eine Reihe von Ziehpunkten, mit denen Sie die Platzierung und den Winkel der Füllung schnell anpassen können, und Sie können die Ecken eines abgerundeten Rechtecks ​​oder die Spitzen eines Sterns jederzeit bearbeiten. Diese Unterschiede führen jedoch zu einer unnötig steilen Lernkurve für neue Benutzer, die von Photoshop oder Illustrator migrieren.

Es macht einfach keinen Sinn, dass Produkte innerhalb derselben Anwendungssuite unterschiedliche Tools haben, um dasselbe Ziel zu erreichen. Es ist fünf Jahre her, dass Fireworks offiziell in die Creative Suite integriert wurde, und leider fühlt es sich immer noch wie ein Außenseiter an.

Kaufberatung für Template Studio

Fireworks CS6 ist ein Rätsel. Es teilt viele Funktionen mit Photoshop, und viele Designer sind damit zufrieden, Photoshop (oder sogar Illustrator) zum Erstellen von Webmodellen zu verwenden. Fireworks CS6 bietet jedoch als Webdesign-Umgebung eine Reihe von entscheidenden Vorteilen, darunter eine umfangreiche Symbolbibliothek, Hooks mit Dreamweaver und erweiterte Unterstützung für CSS.

Avery Design und Druck für Mac

Bestehende Fireworks-Benutzer sollten auf CS6 aktualisieren, insbesondere wenn sie häufig auf Designprobleme mit Webentwicklern stoßen, die Elemente wie Schaltflächen und Hintergründe innerhalb der Einschränkungen von CSS gestalten möchten. Auf der anderen Seite kann die Fireworks-Benutzeroberfläche so weit von ihren Creative Suite-Kollegen abweichen, dass einige Benutzer frustriert sind. Aus Sicht eines Künstlers und Designers sind Sie wahrscheinlich besser dran, bei Photoshop zu bleiben, um Ihre Websites nachzuahmen, es sei denn, Ihr Webentwickler fordert Sie auf, CSS-Code-Snippets oder CSS-Sprite-Sheets bereitzustellen.

[ Chris McVeigh ist Autor, Illustrator und Spielzeugfotograf, lebt in Halifax, Nova Scotia und schreibt regelmäßig für TabletS. ]