Photoshop oder Feuerwerk? Diese Frage hat alle Arten von Designern und Entwicklern in eine hitzige Debatte geführt. Heute verwenden wir beide Anwendungen, um eine einfache Webgrafik zu erstellen.
Dieses Tutorial wendet sich an alle Designer, die niemals davon träumen würden, Photoshop aufzugeben und fast nichts über Fireworks wissen. Ich zeige Ihnen, wie Sie Ihre Photoshop-Grafiken nutzen und über Fireworks einige interaktive Funktionen hinzufügen.
Interaktivität sollte Design beeinflussen
Es gibt viele Designer, die sich an reine Front-End-Mockups halten. Mit anderen Worten, sie starten Photoshop, lassen das allgemeine Erscheinungsbild einer Website außer Kraft und geben es an die Entwickler weiter.
Viele argumentieren, dass jeder Designer wissen muss, wie er codiert, aber diese Debatte ist für unser heutiges Thema irrelevant. Tatsache ist, dass ich überall in den USA Designbüros in Unternehmen gesehen habe, die mit zwei unterschiedlichen Teams zusammenarbeiten: den Personen, die in Photoshop entwerfen, und den Menschen, die diese Designs im Browser zum Leben erwecken.
Dieser Artikel ist für die erstere. Sie sind ein Design-Typ, der sich nicht mit Code auskennt, aber Sie wissen, dass Ihr Entwicklerteam dynamische und interaktive Designs anregt. Sie möchten Ihre Comps mit diesen Zielen erstellen, aber letztendlich können Sie nur vage Vorschläge machen und hoffen, dass die Entwickler Ihre Vision teilen.
Eine andere häufige Situation ist die Notwendigkeit, schnell ein Live-Modell zu erstellen, das Sie einem Kunden zeigen können. Sie sind möglicherweise in der Lage, Ihre Photoshop-Arbeit in eine standardkonforme Website umzuwandeln, möchten jedoch sicherstellen, dass Ihr Kunde zufrieden ist, bevor Sie fortfahren.
In beiden Fällen ist Adobe Fireworks ein perfektes Werkzeug, das Sie Ihrem Workflow hinzufügen können, um das zu erreichen, wonach Sie suchen. Mit Fireworks können Sie die Interaktion direkt in Ihre Designs einbauen und eine Vorschau wie eine Live-Seite anzeigen.
Warum ein Feuerwerk?
Webdesigner erkennen allmählich, dass Fireworks ein wirklich großartiges Werkzeug für die Gestaltung von Websites ist. Es gibt sogar ein heftiges Argument darüber, ob Webdesigner Photoshop überhaupt öffnen sollten, wenn sie eine komplette Site in Fireworks erstellen können.
Trotz dieser Argumente stelle ich fest, dass die Webdesign-Community größtenteils in Photoshop lebt. Selbst ich bin relativ neu bei Fireworks und bin daher viel anfälliger für die Erstellung eines schnellen Comp in Photoshop. Aus diesem Grund zeigt Ihnen dieses Tutorial, dass Sie beide synergetisch verwenden können. In Photoshop erstellen wir eine einfache Grafik, in der Sie sich wohl fühlen, und dann zu Fireworks übertragen, um sie zum Leben zu erwecken.
Erstellen einer Schaltfläche in Photoshop
Anstatt Ihr erstes Fireworks-Projekt zu einem vollständigen Website-Modell zu machen, versuchen Sie, mit etwas Kleinem zu beginnen. Das Ergebnis ist ein viel weniger überwältigender Übergang von einer App zur anderen. Heute beginnen wir Ihre Fireworks-Schulung mit einer einfachen Schaltflächengrafik.
Wie bereits erwähnt, beginnen wir mit dem Photoshop-Tool-Set. Sie können dieses gesamte Objekt problemlos in Fireworks erstellen (der Workflow wäre sogar ziemlich ähnlich), aber im Moment möchte ich mich auf die Idee konzentrieren, dass Sie Ihre bevorzugte Grafikanwendung nicht unbedingt aufgeben müssen.
Erstellen Sie ein neues Photoshop-Dokument (jede Größe ist für diesen Test ausreichend) und erstellen Sie ein Vektorrechteck wie das unten stehende. Ich habe den Button mit # 005da5 gefüllt.
Gehen Sie als Nächstes zu Ihren Ebenenstilen und fügen Sie eine leichte Verlaufsüberlagerung und einen inneren Schatten hinzu. Gerade genug, um den Knopf etwas weniger flach aussehen zu lassen.
Kopieren Sie von hier aus die Vektorformebene mit der Taste und löschen Sie die Punkte am unteren Rand mit dem Direktauswahl-Werkzeug (A). Bewegen Sie dann die Punkte entlang der Seite nach oben, füllen Sie die Ebene mit Weiß und reduzieren Sie die Deckkraft, sodass der Effekt etwa dem Bild unten entspricht.
Zum Schluß noch ein paar Worte und schon kann es losgehen. Ich habe eine typische fette Sans-Serif-Schrift mit Inner Shadow verwendet. Die Einstellungen werden unten gezeigt.
Jetzt haben wir unseren schrecklich klischeehaften Photoshop-Button. Von hier aus möchten wir eine Vorschau auf die Interaktivität anzeigen. Nehmen wir beispielsweise an, wir möchten einen einfachen Hover-Effekt zeigen. Photoshop ist nicht unbedingt der beste Weg, um das zu erreichen, und wir brauchen nicht so viel wie Dreamweaver, also wo ist der Mittelweg? Feuerwerk zur Rettung!
Importieren in Fireworks
Vergewissern Sie sich vor dem Importieren dieses Dokuments in Fireworks, dass Ihre PSD einwandfrei und aufgeräumt ist. Benennen Sie all Ihre Layer, gruppieren Sie Layer, wenn nötig, usw. Dadurch wird alles viel einfacher, um den Überblick zu behalten. Unser kleiner Button hat nur ein paar Ebenen, also habe ich einfach alles benannt und die PSD in meinem Projektordner gespeichert.
Starten Sie Fireworks und öffnen Sie die soeben gespeicherte PSD. Sie müssen nicht auf besondere Weise exportieren / importieren, verwenden Sie einfach den einfachen alten Befehl "Öffnen". Dies gibt Ihnen einige Optionen, mit denen Sie herumspielen können (ich habe sie alle alleine gelassen). Wählen Sie einfach die Option aus, um die Ebenenbearbeitbarkeit über das Erscheinungsbild zu erhalten.
Von hier aus ist es wichtig zu untersuchen, was Fireworks ordnungsgemäß übertragen wird und welche nicht. Wie Sie im Bild unten sehen können, waren meine Vektorformen, -text und -farben gut, aber die Deckkraft der Ebene auf meinem Highlight liegt bei 100%. Das ist ein bisschen nervig, aber es ist leicht genug, um es wieder auf 10% zu senken.
Abgesehen davon hat meine kleine Datei den Import perfekt überstanden. Wie Sie unten sehen können, waren meine Ebenen jeweils intakt und sogar meine Ebeneneffekte können noch bearbeitet werden.
Beachten Sie, dass Ebeneneffekte in der Eigenschaftenpalette angezeigt werden und eine andere Oberfläche als in Photoshop haben. Es sind jedoch dieselben grundlegenden Effekte und Steuerelemente vorhanden.
Einen neuen Staat hinzufügen
Um unserer Schaltfläche etwas mehr Interaktivität zu verleihen, müssen wir mit zwei Fireworks-Funktionen arbeiten, mit denen Sie möglicherweise nicht vertraut sind: Schnitte und Zustände.
Zustände ähneln Photoshop Layer Comps, sind jedoch eher auf tatsächliche Änderungen ausgerichtet, die ein Objekt voraussichtlich durchläuft. Für unseren Button möchten wir also, dass sich das Erscheinungsbild ändert, wenn der Benutzer darüber fährt. Um dies zu erreichen, erstellen wir mehrere Zustände, um die verschiedenen Schaltflächeniterationen widerzuspiegeln.
Navigieren Sie dazu zur Statuspalette und duplizieren Sie den aktuellen Status. Nennen Sie dann den ursprünglichen Zustand als "Normal". oder? Default? und nennen Sie den neuen Staat "Hover".
Wechseln Sie von hier aus in die Eigenschaftenpalette und ändern Sie die Füllfarbe der Schaltfläche in Rot. Auch dies unterscheidet sich ziemlich von dem, was Sie in Photoshop sehen, aber der Vorgang ist selbsterklärend. Klicken Sie auf das Farbfeld, wählen Sie eine neue Farbe aus und Sie können loslegen.
Wir haben jetzt zwei verschiedene Zustände, mit denen wir arbeiten können: einen roten Knopf und einen blauen Knopf. Durch die Verwendung von Slices können wir diese Status ohne jeglichen Code mit einer Hover-Aktion verknüpfen.
Ein Slice hinzufügen
Fireworks-Slices funktionieren ähnlich wie in Photoshop. Nur wenn sie sich mit Zuständen zusammenschließen, erhalten Sie fast eine Dreamweaver-ähnliche Funktionalität.
Um ein Slice hinzuzufügen, greifen Sie das Auswahlwerkzeug und klicken Sie mit der rechten Maustaste auf die blaue Schaltfläche (stellen Sie sicher, dass Sie nicht auf die Markierung klicken). Wählen Sie hier den Menüpunkt? Rechteckige Scheibe einfügen? So erstellen Sie ein Slice, das dieselbe Größe wie unser Button hat.
Danach sollte eine farbige Überlagerung über der Schaltfläche erscheinen. Suchen Sie in der Eigenschaftenpalette erneut nach unten, um Optionen für die Dateikomprimierung des Slice zu finden. Ich habe "JPEG - Better Quality" ausgewählt. Hier können Sie auch einen Link und einen anderen Text hinzufügen.
Hover-Effekt implementieren
Beachten Sie den kleinen Kreis in der Mitte der Schaltfläche im Screenshot oben. Wenn Sie darauf klicken, wird eine Liste mit Aktionen angezeigt. Von hier aus müssen Sie nur noch einfaches Rollover-Verhalten auswählen. Dadurch wird automatisch der Status der Schaltfläche ausgetauscht, wenn Sie den Mauszeiger über das Bild bewegen.
Nachdem Sie dies getan haben, werden Sie keinen Unterschied in Ihrem Dokument feststellen. Um den Effekt in Aktion zu sehen, klicken Sie oben im Fenster auf die Schaltfläche Vorschau. Auf diese Weise können Sie mit der Schaltfläche wie mit einem Webbrowser interagieren.
Schaltfläche in einen Browser exportieren
Wenn Sie Ihre Kreation nun einer anderen Person zeigen möchten, möchten Sie sie wahrscheinlich außerhalb von Fireworks veröffentlichen. Eine Möglichkeit, dies zu tun, besteht darin, Ihre Datei als Webseite zu exportieren. Wenn Sie Datei> Exportieren aufgerufen haben, wählen Sie die Option "HTML und Bilder". Im Bild unten zeigen.
Wenn Sie eine vollständige Website mit mehreren Seiten erstellen, müssen Sie die Option Alle Seiten auswählen. Option, aber für diesen kleinen Test benötigen wir nur die aktuelle Seite. Das Ergebnis sollte ein Ordner mit Bildern und ein? Htm? oder? html? Datei, die Sie auf einen Server hochladen und online freigeben können. Wenn Sie es im Browser öffnen, funktionieren sowohl der Hover-Effekt als auch der von uns eingefügte Link wie bei einer echten Website. Dies macht es zu einem hervorragenden Werkzeug für die Erstellung von Web-Comps.
Nicht produktionsbereit
Wenn Sie ein Nichtcodierer sind und plötzlich glauben, er hätte Gold geschlagen, halten Sie eine Minute. Leider ist die Ausgabe hier in Ordnung, aber nicht in der Nähe von etwas, das Sie auf einer tatsächlichen Website veröffentlichen möchten. Das Ergebnis unseres einfachen kleinen Projekts war ein Durcheinander von JavaScript, wenn solch ein einfaches Webelement in Wirklichkeit nur wenige Zeilen HTML und CSS erfordert.
Fireworks ist nicht als vollwertiger WYSIWYG-Site-Builder gedacht. Folglich ist die Live-Webausgabe nicht auf dem neuesten Stand und sollte nur für die Vorschau verwendet werden.
Fazit
Zusammenfassend lässt sich sagen, Photoshop eignet sich hervorragend für das Erstellen von Grafiken. Wenn es darum geht, Interaktionen zu erstellen und in der Vorschau anzuzeigen, wird es kurz. In diesen Fällen bietet Fireworks ein viel leistungsfähigeres Toolset.
Dieses Tutorial richtet sich an absolute Anfänger von Fireworks und zerkratzt kaum die Oberfläche der Web-Tools und der Funktionen, die Ihnen zur Verfügung stehen. Wir werden dies in Kürze mit einem detaillierteren Blick auf die Verwendung von Fireworks zum Erstellen fantastischer, ausgewogener Website-Comps verfolgen.