Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Creative Cloud im Überblick

Website-Design mit Fireworks

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Adobe entwickelt die aktuelle Version von Fireworks nicht mehr weiter. Dennoch beinhaltet das Programm weiterhin hilfreiche Tools zur Entwicklung von Websites und User Interfaces.
05:33

Transkript

Die aktuelle Version von Adobe Firework ist mittlerweile schon ein bisschen in die Jahre gekommen, denn das Tool wird seit der CS6 Version nicht mehr weiterentwickelt. Immer mehr Funktionen von Fireworks greift Adobe jetzt in Illustrator und Photoshop. Sicherlich noch nicht alles und Andre Reinegger hat auf seiner Webseite ein paar gute Gründe vorgestellt, warum man Webdesign mit Fireworks am besten umsetzen kann. Vieles davon gibt es mittlerweile auch schon in Illustrator und Photoshop und bei vielen anderen Dingen wird Adobe sicherlich noch nachbessern. Aber es gibt hier und da sicherlich noch einen Grund für dieses Programm. Ein großer Unterschied findet sich schon mal darin, dass Fireworks so ein bisschen eigentlich ein Bildbearbeitungsprogramm ist aber doch viele Vektorfunktionen zur Verfügung stellt. Dementsprechend habe ich hier ähnlich wie in Illustrator und Photoshop eine Ebenenpalette. Dazu gekommen sind dann allerdings auch die Seiten. Das heißt, ich kann hier Design, ähnlich wie in InDesign oder auch Illustrator, auf verschiedene Seiten aufteilen. Das kann zum Beispiel ganz interessant sein, wenn man dem Kunden visualisieren möchte, wie die Navigation in einer Applikation wie hier zum Beispiel einer SmartPhone App oder auch auf einem WebShop aussehen soll. Dafür gibt es dann hier auch Funktionen wie zum Beispiel so ein Segmentwerkzeug und damit kann ich jetzt hier ein Segment hinzufügen und sagen: wenn man hier drauf klickt, hätte ich ganz gerne einen Hyperlink auf die Homepage. Gehen wir jetzt mal in die Homepage, dann finde ich hier weitere Links, also weitere Buttons. Die kann ich jetzt hier mit diesem Segmentwerkzeug ebenfalls verknüpfen. Hier beispielsweise den Store Locator hier haben wir dann beispielsweise die Results oder was auch immer, und so kann ich jetzt einzelne Elemente verbinden. Und hier möchte ich dann zurück gehen auf den Splash Screen. Jetzt können wir das Ganze einmal testen. Wir gehen dazu hier auf Datei. Vorschau im Browser. Vorschau aller Seiten in Chrome anzeigen. Und jetzt sehe ich hier die Startseite. Ich kann anklicken, kann jetzt zum Store Locator gehen oder hier die Seite, oder wieder zurück gehen auf die Homepage, den so genannten Splash Screen. Auf die Art und Weise kann man also ein interaktives Web Projekt erst mal visualisieren. Da gibt es hier nicht nur so einzelne Apps, die man gestalten kann, sondern auch größere Seiten, Homepages. Man kann dafür auch Elemente als Musterseite festlegen, die dann auf allen Seiten immer wieder auftauchen. Das heißt, wenn ich jetzt hier später neue Seiten auf Basis von meinem Design mache, so kann ich jetzt hier die Inhalte in dieser Seite jeweils austauschen. Gehen wir dazu mal jetzt auf die Musterseite, und da lassen wir jetzt mal hier den ganzen oberen Bereich stehen und kopieren uns jetzt hier den Inhaltsbereich einmal raus. Die Ebenen sind hier alle geschützt. Wollen wir die mal abschalten. Das ist jetzt hier das, was ich haben möchte. Und hier, alles was unter Copy ist, also der ganze Textbereich, der soll sich jetzt auf den Seiten unterscheiden. Das heißt, wie wählen den einfach mal aus, Kopieren den heraus, so dass wir auf der Musterseite jetzt nur noch diesen Inhalt haben. Gehen jetzt auf die Seite 1. Und dort kann ich dann sagen: Bearbeiten, Einfügen. Das heißt, hier unterscheidet sich jetzt sozusagen Seite 1 von Seite 2. Globale Änderungen kann ich aber wie in InDesign entsprechend über die Musterseite machen. Das heißt, wenn ich hier beispielsweise etwas bearbeiten möchte, den Verlauf hier, in einem Element, dann ist das sozusagen Etwas, das auf der Musterseite festgelegt wird, und dementsprechend diese Dinge dann auf allen Dokumentseiten, die ich nachher hier wieder erzeuge. Musterseite ist also wieder ein praktisches Element, weil ich mir dadurch die Arbeit hier sehr viel erleichtern kann. Ich muss also nicht immer wieder alles pro Element neu gestalten. Auch sehr praktisch, dass das Optimieren von Webgrafiken hier schon mit eingebaut ist. Direkt in der Oberfläche habe ich hier eine Optimieren-Funktion, eine Vorschau-Funktion. Blenden wir mal die Hilfslinien alle ab. Dann kann man das hier auch besser beurteilen. Wir sind jetzt hier in der Vorschau Ansicht. Und ich kann hier jetzt sagen, wie ich das exportieren möchte. Beispielsweise als JPEG, mit welcher Qualität, und so arbeite ich sozusagen hier schon gleich in der Vorschau Ansicht. Ich gehe mal auf 100%. Das heißt, ich kann jetzt schon beurteilen, wie groß bestimmte Elemente werden, die man dann nachher sehr einfach exportieren kann. Hierfür kann ich so einen Export-Bereich anlegen, um jetzt bestimmte Elemente meines Designs hier zu exportieren. Gehen wir dazu mal wieder in die Originalansicht und hier kann man schnell wie ein Snapshot jetzt einen Bereich festlegen, und den dann schnell aus dem Design heraus exportieren, in der Einstellung, die ich hier vorher getroffen habe. Bestimmte Dinge in Fireworks gehen also dementsprechend auch sehr schnell, lassen sich schnell durchführen und anpassen, und sind halt für die Erstellung eines Designs sehr angenehm. Nachteil, wie gesagt ist, das Fireworks nicht mehr weiterentwickelt wird, die CS 6 Version ist zwar noch in der Cloud verfügbar, aber es ist dann auch die letzte Version von Fireworks. Zukünftige Funktionen Richtung Web Design wird Adobe dann primär in Illustrator und Photoshop einbauen.

Creative Cloud im Überblick

Lernen Sie Adobes Creative Cloud und all ihre Applikationen kennen. Sven Brencher zeigt, was hinter CC und den Applikationen für Web, Design, Fotografie und Publishing steckt.

7 Std. 24 min (55 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Mit dem Creative Cloud Update vom Oktober 2014 wurde Adobe Kuler umbenannt in Adobe Color.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!