Webdesign mit Adobe Fireworks und Photoshop

von Benjamin Hartmann | 0 | 16656 Aufrufe

Anzeige Hier werben

Adobe Fireworks und Photoshop im Webdesign

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Die Bedeutung des Internets und somit auch die Bedeutung von Webseiten hat in den letzten 10 bis 15 Jahren enorm zugenommen. Ob Online-Banking, Shopping oder Informationsbeschaffung – alles läuft heutzutage über Webseiten. Wie man früher in eine Bibliothek gegangen ist, um sich Bücher auszuleihen, in Lexika geschaut hat, wie sich Quantenmechanik definiert, zur Bank gegangen ist, um Überweisungen zu tätigen oder in ein Reisebüro ging, um seinen nächsten Urlaub zu buchen, so schaltet man heute in der Regel seinen PC oder Laptop an und bedient sich Mithilfe von google bei den unzähligen Informations- und Dienstportalen, die das WorldWideWeb bietet. Der Trend ging und geht zum Internet – Konkurrenz entsteht. Jeder will seine Angebote attraktiver anbieten als Andere. Genau aus diesem Grund ist Webdesign nicht mehr nur noch unter Profis ein Begriff.

Interessante Websites sind daher das A und O im Internet und ohne entsprechende Software zur Anfertigung von Entwürfen bis hin zu ausgeklügelten Web-Layouts und -Grafiken kommt man heute nicht mehr aus. In den vergangenen Jahren hat sich dabei Photoshop als Marktführer herauskristallisiert. Adobe Photoshop, derzeit in der Version 10 (= CS3), ist ein kommerzielles, professionelles Bildbearbeitungsprogramm für die Druckvorstufe – so definiert es Wikipedia. Obwohl man für Photoshop in der aktuellen Version eine Menge Geld bezahlt, besitzt es so gut wie jeder, der in der Bildbearbeitung oder im Webdesign involviert ist – ob Profi oder Laie. Adobe Photoshop bietet dem Anwender durch eine Unzahl an "Filtern" und Brushes wahnsinnige Möglichkeiten bei der Bearbeitung von Fotos und der Erstellung von Grafiken, von denen einige sogar 3D-Grafikprogrammen Konkurrenz machen könnten.

Doch nun folgt das große Aber, mit dem ich an folgender Stelle wohl auf große Kritik stoßen werde: Was bietet Photoshop für das Webdesign? - Nichts.

Unnötige Filter, fehlende Vektor-Eigenschaften, mangelnde Unterstützung und Features bei der Web-Gestaltung sowie eine unpraktische und unnützliche Arbeitsoberfläche, die das Arbeiten mit Photoshop für das Webdesign meiner Meinung nach unerträglich und sehr, sehr langsam machen. In den vergangenen Jahre wurde diese Prestige-Software zu etwas abgestempelt, was es nicht ist.

Bis heute habe ich nicht herausgefunden, wie man mit dem schwarzen Mauszeiger die Größe eines Rechteckes in Photoshop verändert.

Adobe Fireworks

Die Lösung der Probleme ist ein Programm, das 8 Jahre nach der Version 1.0 von Photoshop zum ersten Mal auf den Markt kam. Macromedia Fireworks heißt diese Lösung (Macromedia wurde Ende 2005 von Adobe Systems übernommen, folgende Versionen heißen seit dem Adobe Fireworks).

Fireworks befindet sich derzeit in der Version 9 (CS3) und ist ein vektorbasiertes Grafikprogramm. Es ist also nicht nur möglich Rastergrafiken, sondern auch Vektorgrafiken zu bearbeiten und zu erstellen. Nun treten vielleicht die Fragen auf, warum Fireworks denn besser für Webdesign geeignet ist als Photoshop. Die Antwort darauf möchte ich anhand zusätzlicher Illustrationen im Folgenden geben und erklären.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Das Vektor in Fireworks

Nehmen wir noch mal das Beispiel mit dem Rechteck. In Photoshop bietet sich für mich auf dem ersten Blick keine Möglichkeit Form- oder Größenveränderungen am Rechteck vorzunehmen. In Fireworks hingegen haben wir dazu ganz simpel zwei Möglichkeiten: Entweder wir nehmen den schwarzen Zeiger („Zeiger“) um die Größe des Rechteckes zu verändern

Bild zu Webdesign mit Adobe Fireworks und Photoshop

oder wir benutzen den weißen Zeiger („Teilauswahl-Werkzeug“), um die Form des Rechteckes zu verändern.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Seiten-Funtkion

Ein großartiges Feature seit der Version CS3 ist die Seitenfunktion. Während man in Photoshop lediglich auf Ebenen zum Strukturieren von Dokumenten zurückgreifen kann, bietet Fireworks noch die „Seiten“ an.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Das Ganze ist so simpel wie genial – im rechten Menue findet man unter „Seiten und Ebenen und Frames“ die Registerkarte „Seiten“. Dort kann man neue Seiten anlegen, umbenennen, Master-Seiten festlegen – quasi die Seiten managen. Jede Seite hat dann Ihre eigenen Ebenen, auf die man zugreifen kann.

Möchte man z.B. auf der Startseite arbeiten, so wählt man die „Startseite“ in der Registerkarte „Seiten“ und wechselt dann zur Registerkarte „Ebenen“. Möchte man in anderen Seiten arbeiten, gilt selbes Verfahren.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Was hat es mit den Master-Seiten auf sich?

Angenommen, man möchte mehrere Seiten für seine Webseite in Fireworks entwerfen und planen, am grundsätzlichen Layout oder in bestimmten Bereichen der Webseite ändert sich jedoch nichts, so kann man dieses allgemeine Layout bzw. diese bestimmten Bereiche in die Master-Seite legen. Der komplette Inhalt der Master-Seite wird nun in allen anderen Seiten angezeigt, können aber dort nicht verschoben/bearbeitet werden und stören damit nicht die Arbeit und müllen die Ebenen nicht zu. Änderungen am fundamentalen Layout können nur an der Master-Seite vorgenommen werden. Die Seiten-Funktion bietet dem Benutzer vor allem bei der Gestaltung von Webdesigns viel Luxus. Man brauch nicht mehrere Dokumente für mehrere Seiten (die den Seiten auf der Webseite entsprechen) anlegen, sondern hat alles in einem Dokument. Mit den Master-Seiten kann man ein Fundament erstellen und in anderen Seiten im Dokument darauf aufbauen und damit arbeiten, was mehr Übersicht und Kontrolle in die Arbeit bringt.

9-Slice-Scale

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Eine hervorragende Option, wenn man sich exotischere Formen für seine Webseite entworfen hat, ist das 9-Slice-Scale. Normalerweise, wenn man sich Vektor-Formen erstellt hat und diese vergrößern/verkleinern möchte, ändern sich durch das Skalieren bestimmte Werte, wie z.B. der Radius von runden Ecken. Mit dem 9-Slice-Scale hingegen legt man Bereiche im Objekt fest, die beim Skalieren vergrößert/verkleinert werden und Bereiche, die sich nicht verändern, z.B. runde Ecken, die bei jeder Größe identisch aussehen sollen.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Stile

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Einige kennen es: man arbeitet an einem Projekt und es kommt oft vor, dass Elemente/Objekte bestimmte Eigenschaften, Effekte und Filter bekommen und oft werden diese nicht gerade rar verwendet. Es folgt also stets dieselbe, nervige Prozedur: Objekt erstellen, Größe einstellen, Verlauf wählen, Farbcodes eintippen, Filter anwenden – und das oft duzende Male. Abhilfe schafft hier eine nette Funktion: Man nutzt einfach Stile. Stile kann man sich so ähnlich wie Gruppierungen von Einstellungen vorstellen. Wir haben z.B. Schriftgröße, Schriftfarbe, Schriftart und Filter – diese Sachen wenden wir auf einen beliebigen Text an. Diese Eigenschaften/Effekte können wir nun zu einem Stil gruppieren.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Sobald wir das nächste Mal einen Text erstellen, wählen wir mit einem Klick den Stil aus und der Text erhält automatisch die exakten Eigenschaften und Effekte, die wir vorher definiert haben. Dasselbe mit anderen Formen, ganz gleich, ob es sich um eine Vektor-Grafik oder um eine Raster-Grafik handelt. Wir können nicht nur eigene Stile erstellen, sondern auch vorhandene nutzen. Fireworks CS3 bringt hier schon von Haus aus eine Hülle von Stilen mit – sowohl für Texte, als auch für andere Formen. Ein weiterer Vorteil ist, dass sich durch Anwendung von Stilen die Objekte nicht zu Raster-Grafiken umwandeln, sondern sie bleiben (sofern sie es vorher schon waren) Vektorgrafiken, wodurch das Skalieren ohne Qualitätsverlust problemlos möglich ist.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Das tolle daran: Diese Stile sind nicht Blackbox-Artig, so daß wir nicht wissen, was eigentlich mit unseren Objekten passiert sind, sondern die Stile fügen den Objekten die Eigenschaften ganz normal hinzu, so daß wir problemlos sehen, welche Filter/Effekte angewandt wurden – sogar das bearbeiten ist kinderleicht.

Formen

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Fireworks bietet auch für gewisse Dinge vorgefertigte Formen. Diese Formen sind nicht einfach nur Raster-Grafiken, sondern sie sind Vektor-Grafiken mit zusätzlichen Funktionen. So kann man z.B. eine 3D-Box erstellen, bei der man die Kantengröße, Perspektive, Position, Drehwinkel etc. ändern kann. Weiterhin kann man mit nur einem Klick ein Herz oder eine Sprechblase mit komplett variabler Form erstellen. Diese Formen, die sich auch beliebig erweitern lassen, sind höchst flexibel und stellen viele Möglichkeiten für den Benutzer bereit – vor allem, wenn es um schnellen Zugriff geht.

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Kompaktes und übersichtliches Layout

Von Photoshop ist man es gewöhnt, dass die Menue-Boxen für Ebenen, Farben etc. frei „herumhängen“. Mich persönlich hat das in Photoshop extrem gestört, da sie immer wieder (durch verschiedene Aktionen) in meinen Arbeitsbereich kamen und ich letztendlich wieder am Schieben war. Was in Fireworks zunächst wie eine kleine Freiheitsberaubung aussieht, dient letztlich optimal zur Übersicht und zur Leichtigkeit beim Arbeiten. Anders als in Photoshop ist das Gerüst, also Menueleisten für Ebenen, Farben, Werkzeuge, Stile usw., fixiert. Man kann sie zwar mit einem simplen Klick skalieren oder ausblenden, von der Position her bleiben sie jedoch starr. Kein nerviges Herumschieben, keine Überlappung mit Arbeitsbereichen – alles hat seinen Ort und man findet, was man benötigt. Ebenso schweben nicht zig einzelne Fenster durch die Gegend, sondern versammeln sich am rechten Rand und sind ein- und ausklappbar.

(Web-) Export-Funktionen

Bild zu Webdesign mit Adobe Fireworks und Photoshop

Webdesigner, die mit Flash und Dreamweaver arbeiten, werden auch an dieser Stelle von Fireworks verwöhnt. Die zahlreichen Export-Möglichkeiten von Fireworks in andere Programme nehmen viel Arbeit ab und ermöglichen eine bequeme Zusammenarbeit der Adobe-Software. Weiterhin bietet Fireworks viele Optimierungsmöglichkeiten und Auswahloptionen bei dem Export von Grafiken.

Dinge, die es zu klären gilt

Zum Ende möchte ich noch wichtige Punkte nennen, die es zu klären gilt, damit ich und der Artikel nicht falsch verstanden werden.

Fireworks ist _kein_ Ersatz für Photoshop!

Im Laufe der Zeit haben sich viele Fireworks-Benutzer angehäuft, einschließlich mir, die stets versuchen Photoshop-Funktionen bzw. –Effekte nachzubilden, getreu dem Motto „Was Ihr könnt, können wir schon lange!“. Doch eigentlich ist das alles Schwachsinn... Nicht umsonst hat sich Photoshop jahrelang in Agenturen & Co bewährt – es ist durch die vielfache Anzahl von Filtern (gegenüber Fireworks) deutlich breiter gefächert, was die Möglichkeiten angeht, wodurch Photoshop in Punkto Bildbearbeitung & Co niemals von Fireworks geschlagen wird – nicht nur, weil es unnötig ist, sondern auch, weil es nicht das Ziel von Fireworks darstellt.

Fireworks ist nicht nur ein Programm für Web-Layouts

Es scheint sich ebenso das Klischee breit gemacht zu haben, Fireworks sei „nur“ zum Gestalten von Web-Entwürfen gut. Das stimmt nicht. Wie im Punkt darüber erwähnt, versuchen Einige stets Photoshop-Werke mit Fireworks nachzumachen, was auch eine gute Seite hat. Man stößt dadurch an die Grenzen der Funktionen von Fireworks und erfährt dabei viele wichtige Dinge und kann zeigen, wozu Fireworks fähig ist. Die Filter-Anzahl mag nicht enorm sein, doch mit den anderen Funktionen lassen sich wunderbare Grafiken und Bildbearbeitungen erstellen erzielen: Seiten wie Firetuts.com demonstrieren anhand vieler Tutorials, was Fireworks auch in der Grafikerstellung leistet. Wirft man einen Blick auf http://www.blue2x.com/portfolio.html so sieht man fantastische Logos, von denen die meisten in Fireworks entworfen und umgesetzt wurden.

Worum es in Fireworks geht

Es geht in Fireworks und in diesem Artikel darum zu zeigen, dass Fireworks ein wesentlich besseres Programm für das Webdesign ist als Photoshop. Auch, wenn man mit Fireworks nicht die Effekt-Vielfalt hat, wie in Photoshop, kann man sehr viele Dinge erreichen, die man auch mit Photoshop ermöglichen kann – der Clou dabei: Die Geschwindigkeit. Jeder Fireworks-Benutzer, mit dem ich geredet habe (und das waren etliche), schätzt und lobt die einfache, intuitive Bedienung von Fireworks, die ein enormes Arbeitstempo, das Photoshop übersteigt, ermöglicht. Nicht nur die oben genannten Funktionen, wie das 9-Slice-Scaling, die Exportfunktionen, die Stile, die Formen oder die Seiten-Funktionen, machen Fireworks einzigartig einfach und schnell in der Umsetzung von Projekten, auch der gesamte Aufbau ermöglicht eine optimale Arbeitsumgebung.

Fazit

Wer sich mit Webdesign beschäftigt, für den ist ein Grafikprogramm mittlerweile Pflicht geworden. Auch, wenn die Masse zum aktuellen Zeitpunkt noch Photoshop benutzt, so wächst die Community um Adobe Fireworks stetig an und Fireworks gewinnt zunehmend mehr an Bedeutung. Ich kann jedem Fireworks nur ans Herz legen und kann nur betonen, dass sich ein Wechsel von Photoshop zu Fireworks lohnt, da es seit der MX-Version gewaltige Sprünge zur Web-Unterstützung getan hat und Adobe die Weiterentwicklung von Fireworks bereits garantiert hat, wodurch es sich in den kommenden Jahren durch überzeugende Angebote dort an die Spitze setzen wird, wo die Gestaltung moderner und attraktiver Webseiten gefragt wird.

Über den Autor: Benjamin Hartmann
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten