Slices als CSS exportieren

Adobe Fireworks CS3 ist für den Multimediabereich konzipiert und bietet Funktionalitäten, die Adobe Photoshop CS3 und Adobe Illustrator CS3 in dieser Form nicht bieten können. In diesem Film erfahren Sie, welche Vorteile Fireworks bei der Erstellung von Grafiken hat und welche Optimierungsmöglichkeiten angeboten werden.

Dieses Video zeigt Ihnen den Einstieg in Adobe Fireworks. Lernen Sie den Startbildschirm und die Arbeitsoberfläche von Fireworks kennen. Die Arbeitsoberfläche stellt unter anderem unterschiedlich optimierte Ansichtsmodi zur Verfügung. Auf der Internetplattform zu Adobe Fireworks werden Ihnen viele Zusatzmodule zum Download angeboten.

In diesem Film lernen Sie die grundsätzlichen Arbeitsweisen innerhalb von Adobe Fireworks kennen. Erfahren Sie, wie Sie Dateigröße und Auflösung einstellen und das native Dateiformat von Fireworks verwenden. Ein wichtiges Werkzeug, das Ihnen immer zur Verfügung steht, ist das Eigenschaftenbedienfeld.

Sie können sich auf unterschiedliche Art innerhalb von Bildern bewegen. Erfahren Sie in diesem Film, wie Sie die Zoomfunktionen gebrauchen und wozu Sie unterschiedliche Ansichtsgrößen verwenden. Zur Verwaltung und Organisation Ihrer Bilddaten lernen Sie die grundlegenden Funktionen der Adobe Bridge kennen.

Voreinstellungen und Tastaturbefehle erleichtern die Arbeit mit dem Programm. Dieses Video zeigt Ihnen, welche Voreinstellungen Sie treffen können und wie sie sich auf das Programm auswirken. Für die schnelle Arbeit mit Fireworks verwenden Sie die Möglichkeit, Tastaturbelegungen hinzuzufügen und zu verändern.

In diesem Film lernen Sie die Zeichenhilfsmittel innerhalb von Adobe Fireworks CS3 kennen. Zeichenhilfsmittel sind Lineale, Hilfslinien und Raster, die vom Autor anschaulich demonstriert werden. Eine exakte Positionierung von Zeichenelementen wird dabei über die Koordinaten vorgenommen.

Innerhalb von Adobe Fireworks können Sie mit Grundformen arbeiten. Grundformen sind vektorbasierte Formen, die über Attribute gesteuert und später in Pfade umgewandelt werden können. In diesem Film lernen Sie unterschiedliche Zeichenwerkzeuge kennen und Zeichenoptionen anzupassen.

In diesem Film lernen Sie die Arbeit mit Autoformen kennen. Autoformen sind Vektorgrundformen wie beispielsweise ein abgerundetes Rechteck. Diese Grundformen können Sie interaktiv anpassen. Für eine numerische Anpassung der Parameter lernen Sie das Bedienfeld 'Einstellungen für automatische Form' kennen.

Möchten Sie in die Struktur von Grundformen oder Autoformen eingreifen, so benötigen Sie umgewandelte Vektorobjekte. In diesem Film zeigt Ihnen der Autor die Umwandlung von Formen in einfache Pfadobjekte. Das ermöglicht es Ihnen, Pfadpunkte mit dem Auswahlwerkzeug auszuwählen und beliebig zu verändern.

Um aus mehreren Formen ein komplexes Gebilde zu erstellen, müssen diese zuerst zu einem Objekt zusammengefasst werden. Dieses Video zeigt Ihnen, wie Sie unterschiedliche Formen und Pfade miteinander kombinieren können. Zur Bearbeitung von Pfaden stehen Ihnen dazu verschiedene Werkzeuge zur Verfügung.

Neben dem Arbeiten mit Grundformen können Sie Pfade auch direkt zeichnen. Darum geht es in diesem Film. Der Autor verrät Ihnen zudem hilfreiche Tipps und Tricks beim Zeichnen von Pfaden. Sie lernen auch unterschiedliche Vektorzeichenwerkzeuge kennen, die Sie entsprechend vor dem Zeichnen anpassen können.

In diesem Film lernen Sie die Bearbeitung von Pfaden kennen. Sie lernen, wie Sie neue Stützpunkte zu Pfaden hinzufügen und wieder entfernen oder Eckpunkte in Kurvenpunkte umwandeln. Sie erfahren auch, wie einfach Sie organische Veränderungen an Formen mit dem Freiformwerkzeug durchführen können.

Grundsätzlich sind alle Zeichenobjekte so aufgebaut, dass sie eine Füllung und eine Kontur haben. In diesem Video lernen Sie, mit Konturen und Linien zu gestalten. Dabei stehen Ihnen viele unterschiedliche Einstellmöglichkeiten zur Verfügung. Sie lernen auch, Texturen auf eine Füllung oder Kontur anzuwenden.

Wenn Sie Navigationsschaltflächen oder Bilder erstellen, möchten Sie diese meistens auch gleichmäßig auf eine Seite bringen. Fireworks bietet dazu einige interessante Möglichkeiten. In diesem Film lernen Sie das Ausrichten und Verteilen von Objekten. Sie lernen auch, Effektstile auf Objekte anzuwenden.

Eine tolle Eigenschaft von Vektorgrafiken ist, dass sie beliebig skalierbar und transformierbar sind. Dazu bietet Fireworks CS3 wieder eine Reihe von Möglichkeiten, die Sie in diesem Film kennenlernen werden. Sie erfahren, wie Sie Objekte skalieren, verschieben, verzerren, frei transformieren oder auch numerische Werte verändern.

In diesem Video lernen Sie die Arbeit mit Farben innerhalb von Adobe Fireworks CS3 kennen. Dazu gehört, Kontureigenschaften über das Eigenschaften-Bedienfeld einzustellen und Farbwerte zu definieren. Im Farbregler stehen unterschiedliche Farbräume zur Verfügung, damit Sie auch vordefinierte Werte eingeben können.

Mithilfe der Farbpalette haben Sie die Möglichkeit, eigene Farben anzulegen. Damit stellen Sie sicher, dass Sie im gesamten Projekt die gleichen Farben verwenden. Definierte Farbtabellen können Sie aber auch mit anderen Programmen austauschen oder wiederverwenden. Diesen Umgang mit Farben lernen Sie in dem Film kennen.

In diesem Film erklärt Ihnen der Autor, wie Sie Farben mischen oder eigene Farbpaletten erstellen. Mithilfe der Palette 'Farbmischer' können Sie ausgehend von vier Grundfarben komplett neue Farbpaletten für Ihre Gestaltungen erzeugen und exportieren. Die Verwendung von Farbverläufen rundet diese Lektion ab.

Vektorgrafiken können sehr einfach farblich angepasst werden. Anders verhält sich das bei Bitmap-Bildern. Hierzu verwenden Sie das Farbe-Ersetzen-Werkzeug. Sie lernen in diesem Video, welche Methoden dieses Werkzeug verwendet, um die Farbe von pixelorientierten Bildern zu verändern.

Mithilfe von Muster und Texturen innerhalb von Adobe Fireworks CS3 ist es möglich, auch eine sehr einfache Form etwas komplexer aussehen zu lassen. Hierbei werden Fotos und Graustufenbilder verwendet, um die Füllung zu transformieren. In diesem Film lernen Sie, welche Möglichkeiten Sie mit Muster und Texturen haben.

In diesem Film lernen Sie die Arbeit mit Verläufen innerhalb von Adobe Fireworks CS3 kennen. Verläufe sind eine Möglichkeit, mehrere Farben innerhalb einer Füllung zu mischen und so interessante visuelle Effekte zu erzielen. Sie sehen, wie einfach Sie interaktiv durch Verändern der Regler 3D-Effekte erzeugen können.

In diesem Film lernen Sie Werkzeuge zur Auswahl von einzelnen Objekten kennen. Das meistverwendete Werkzeug zur Objektwahl ist das 'Zeigewerkzeug'. Das Teilauswahlwerkzeug hingegen bietet Ihnen die Möglichkeit, nur einen Teil des Objekts auszuwählen. Weitere hilfreiche Auswahlwerkzeuge sehen Sie hier.

In diesem Film lernen Sie, wie Sie Objekte schnell und effektiv auswählen. Sie können mehrere Elemente gleichzeitig über die Ebenen oder in der Komposition auswählen, um sie dann gemeinsam zu bearbeiten. Mithilfe der Tastatur können Sie dabei einzelne Objekte zur Auswahl hinzufügen oder entfernen.

In diesem Film gibt Ihnen der Autor einige Tipps und Tricks bei der Auswahl von Objekten. Der gesamte Bereich, den ein Objekt in Fireworks einnimmt, wird als Hotspot für die Auswahl verwendet und erschwert oft die Objektwahl. Lernen Sie, wie Sie diese Eigenschaft umgehen, indem Sie Ebenen sperren oder ausblenden.

Neben Vektorobjekten kann Adobe Fireworks CS3 auch mit Bitmap-Objekten umgehen. In diesem Film lernen Sie die unterschiedlichen Bitmap-Auswahlwerkzeuge und deren Funktionsweise kennen. Während der Auswahl haben Sie die Möglichkeit, mit Tastaturbefehlen den gewählten Bereich einzuschränken oder zu verschieben.

In diesem Film lernen Sie, Auswahlen zu kombinieren, um komplexere Bereiche auswählen zu können. Dazu steht Ihnen die Tastatur zur Verfügung. Fügen Sie einfach zu einer bestehenden Auswahl Bereiche hinzu oder ziehen Sie entsprechend Bereiche ab. Die Auswahlwerkzeuge sind dabei untereinander kombinierbar.

Sie lernen in diesem Video, wie Sie Auswahlen nachträglich modifizieren können. Darunter versteht man, Auswahlen umzukehren, Auswahlrahmen zu erweitern, Rahmen um Objekte zu bauen oder auch Auswahlrahmen in Pfade zu konvertieren. Für eine spätere Nutzung von Auswahlen können Sie diese als Kanal speichern.

In diesem Film lernen Sie, wie Sie selbst innerhalb von Adobe Fireworks CS3 malen können. Dazu stehen in der Werkzeugleiste das Pinsel- und das Bleistiftwerkzeug zur Verfügung. Benutzen Sie den Radiergummi, um Bitmaps wieder zu entfernen. Ausschlaggebend für die Funktion der Werkzeuge sind wieder die Einstellungen.

In diesem Film lernen Sie das Retuschewerkzeug 'Stempel' kennen. Mithilfe des Stempelwerkzeugs können Sie einfach Pixelreparaturen durchführen. Primär retuschieren Sie auf derselben Ebene. Fireworks bietet jedoch auch die Möglichkeit, auf einer eigenen Retuscheebene zu zeichnen, was viele Vorteile mit sich bringt.

Sie können Bilder weichzeichnen oder schärfen sowie nachbelichten oder abwedeln, um einzelne Bildpunkte zu verändern. Sie lernen in diesem Film, wie Sie mit Werkzeugen solche Manipulationen an Bildern vornehmen. Im Prinzip verhalten sich diese Werkzeuge wie Pinsel und können dementsprechend eingestellt werden.

Mithilfe von Korrekturen für Helligkeit, Kontrast und Tonwerte können Sie Bilder nachträglich anpassen. In diesem Film lernen Sie diese Korrekturmöglichkeiten von Bitmap-Bildern in Fireworks kennen. Unterscheiden Sie dabei zwischen Methoden, die sich unterschiedlich auf nachträgliche Änderungen Ihrer Korrekturen auswirken.

Fireworks gibt sich mit der Einstellung der Helligkeit nicht zufrieden. Die (kreativen) Möglichkeiten, die Ihnen in Form der Schieberegler für das Farbrad und die Sättigung zur Verfügung stehen, scheinen grenzenlos zu sein!

Ein häufiges Problem beim Arbeiten mit Bildern ist die Korrektur von Farbstichen. Um herauszufinden, welchen Farbstich das Bild hat, können Sie das Bedienfeld 'Info' verwenden. Mit der Information zu den Farbwerten lassen sich die Farbverschiebungen genauer einschätzen und anschließend korrigieren.

Sie lernen in diesem Film Methoden zum Schärfen von Bildern innerhalb von Adobe Fireworks CS3 kennen. Schärfe bedeutet in diesem Zusammenhang, Kantenkontraste zu erhöhen. In dieser Lektion erfahren Sie auch, warum Sie vor der Arbeit mit Scharfzeichnungswerkzeugen in die Ansicht 100% wechseln sollen.

Ein häufiges Problem beim Fotografieren von Personen in dunkler Umgebung mit Blitz ist das Phänomen der roten Augen. Um das zu entfernen, gibt es innerhalb von Adobe Fireworks CS3 ein eigenes Werkzeug. Je nach Werkzeugeinstellung wird ein zusammenhängender roter Bereich gesucht und durch Schwarz ersetzt.

In diesem Video lernen Sie das Bedienfeld 'Bildbearbeitung' kennen. In diesem Bedienfeld sind viele Werkzeuge zur Bildbearbeitung zusammengefasst. Zudem finden Sie eine Reihe von Befehlen, die hier übersichtlich angeordnet sind.

In diesem Film lernen Sie, wie Sie Textobjekte erzeugen können. Grundsätzlich sind Texte innerhalb von Fireworks auch wieder Objekte. Das Textwerkzeug bietet eine Reihe von Optionen an, so wie Sie das auch in Layoutprogrammen finden. Unterscheiden Sie Zeilentext und Text mit fixer Breite.

Gerade bei der Arbeit in größeren Webprojekten ist es nicht unbedingt sinnvoll, alle Texte nur in Adobe Fireworks zu schreiben. Häufig arbeitet man mit Textern zusammen, die auch ihre eigenen Textverarbeitungsprogramme haben. Für einen guten Datenaustausch bietet sich das rtf-Format an.

In diesem Film lernen Sie die Möglichkeiten der Formatierung von Texten in Adobe Fireworks CS3 kennen. Typografische Gestaltungselemente sind beispielsweise Unterschneidungen von Text, Zeichen- und Absatzformatierungen, Schriftschnitte. Sie können aber auch ganzen Textblöcken eine Kontur zuweisen.

Die Rechtschreibprüfung wird bei der Arbeit mit Text in Grafikprogrammen oftmals unterschätzt. Oft muss man feststellen, dass kleine Fehler vorhanden sind, die nicht gerade zur Zufriedenheit des Kunden oder Betrachters beitragen. In diesem Film lernen Sie, wie Sie in Fireworks CS3 eine Rechtschreibprüfung vornehmen.

In diesem Video lernen Sie, wie Sie Texte auf Pfade positionieren können. Voraussetzung dafür ist die Erstellung eines Pfads oder einer Form. Sie können nun sehr einfach Text an den Pfad anfügen. Pfade können Sie nachträglich beliebig bearbeiten. Zur einfachen Textbearbeitung steht Ihnen ein Editor zur Verfügung.

Je nachdem, welche Logos, Menüpunkte oder auch Produktnamen Sie erstellen, benötigen Sie Sonderzeichen. Das können anderssprachige Schriftzeichen sein oder einfach das Copyright-Symbol. Um solche Zeichen einzufügen, gibt es ein eigenes Bedienfeld, das Sie in diesem Film kennenlernen.

Wollen Sie mit Text künstlerisch arbeiten, bietet Fireworks eine große Palette an Möglichkeiten, ohne dass Sie den Text mit seinen Textattributen verlieren. Das räumt Ihnen viel Flexibilität bei der Arbeit ein. Sie können beispielsweise Filter auf den Text anwenden, ohne diesen vorher in Bitmap umwandeln zu müssen.

Mithilfe von Ebenen können Sie Dokumente innerhalb von Adobe Fireworks CS3 strukturieren, was auch Inhalt dieses Videos ist. Die Ebenen werden im Bedienfeld 'Ebenen' verwaltet und können beliebig verschachtelt werden. Sie können Ebenen einzeln oder als Ebenengruppe ausblenden oder sperren.

In diesem Film lernen Sie, wie Sie mit Ebenen beispielsweise eine Komposition erstellen können. Dabei lernen Sie die Mischmodi der Ebenen kennen, d.h., wie eine Ebene mit der darunterliegenden Ebene zusammenwirkt. Ähnliche Effekte erzielen Sie auch, wenn Sie mit Ebenentransparenzen arbeiten.

Sie lernen nun ein neues Konzept innerhalb von Adobe Fireworks CS3 kennen – das Konzept der Seiten und Masterseiten. Mit den Seiten können Sie Seitenhierarchien abbilden. Das ermöglicht es, Objekte in verschiedenen Seiten abzulegen, die von der Größe, Auflösung und Hintergrundfarbe unterschiedlich sind.

In diesem Film sehen Sie, wie Sie mit dem Seitenkonzept effektiv arbeiten können. Sie lernen, Seiten mit der kompletten Ebenenstruktur zu duplizieren. Eine tolle Möglichkeit ist auch, Ebenen für andere Seiten freizugeben, damit beispielsweise ein Logo auf mehreren Seiten angezeigt werden kann.

Ersparen Sie sich doch den Aufwand, auf allen Seiten wiederkehrende Seitenelemente jedes Mal neu zu platzieren! Das Masterseiten-Konzept von Fireworks CS3 übernimmt das für Sie!

Masken sorgen dafür, dass bestimmte Bereiche eines Bilds ausgeblendet, also unsichtbar werden. Vektormasken sind die schnellste und präziseste Art der Maskierung.

Bitmapmasken bieten gegenüber Vektormasken den Vorteil, halbtransparente Bereiche, Strukturen oder Verläufe darzustellen. Dazu dienen alle Arten von Graustufen-Bitmaps, die Fireworks bei Bedarf selbst erzeugt.

Eine Maske verliert viele der Bearbeitungsmöglichkeiten einer Grafik. Um das zu verhindern, drehen Sie den Spieß um: Der Trick heißt 'Innen einfügen'.

Dieser Film zeigt, welcher Zusammenhang zwischen Auswahlen und Masken besteht. Und wie einfach es in Fireworks ist, aus einer Auswahl eine Maske zu machen.

Die erweiterten Möglichkeiten, die Fireworks für Vektormasken bietet, erlauben auch das Definieren von Verläufen in Vektormasken.

Flexibles und ressourcenschonendes Arbeiten gestatten die Live-Filter in Fireworks, mit denen Sie die Originale der Bilddateien nichtdestruktiv bearbeiten.

Flexibles und ressourcenschonendes Arbeiten gestatten die Live-Filter in Fireworks, mit denen Sie die Originale der Bilddateien nichtdestruktiv bearbeiten.

Ein Filter für viele Gelegenheiten: Um das Rad nicht immer wieder neu zu erfinden, speichern Sie einmal gestaltete Live-Filter als Stil, den Sie auch auf andere Objekte anwenden können.

Um ein Symbol zu erstellen, ist kein großer Aufwand nötig: Ein paar Mausklicks genügen und schon ist Ihre Grafik ein Symbol.

Definieren Sie ein Symbol gleich als Schaltfläche, stehen Ihnen Schnittstellen für Interaktivität und Effekte zur Verfügung. Ein eigener Editor lässt Sie bestimmen, wie die Schaltfläche auf Events reagiert.

Das Scale-9-Grid, das neunteilige Segmentraster, ist Ihr Instrument, mit dem Sie das Verzerren Ihrer Symbole beim Skalieren verhindern.

Die allgemeine Bibliothek ist Fireworks' Elementefundus, der allen Benutzern in allen Dokumenten zur Verfügung steht. Natürlich hat Adobe schon für eine reichhaltige Grundausstattung gesorgt, die Sie beliebig erweitern können.

Intelligente Symbole sind Ihr Baukasten für die Entwicklung von Anwendungen fürs Web oder für Mobile Devices. Nutzen und steuern Sie die Attribute nach Belieben.

Slices sind Ausschnitte aus Grafikobjekten. Mit diesen Segmenten werden Ihre Entwürfe und die Webseiten noch flexibler. Dieser Film zeigt das Prinzip.

So einfach zerschneiden Sie Grafiken in Slices und exportieren sie – vorbereitet für die weitere Bearbeitung in Webeditoren oder -Frameworks.

Besonders gelungene oder auch komplexe Slices exportieren Sie isoliert. Legen Sie so Ihre eigene Slice-Bibliothek an.

Mit den verschiedenen Hotspot-Werkzeugen von Fireworks bauen Sie Image Maps, mit denen Sie Links auf verschiedenen Bereichen eines einzelnen Bilds platzieren.

Neu in Fireworks: Mehrseitige Designs mit Master-Seiten und Hotspots lassen Ihre Kunden komplette Seitennavigationen nachvollziehen – ohne dass Sie eine einzige HTML-Seite programmieren müssen.

Rollover-Effekte in Fireworks basieren auf Frames, den einzelnen Inhalten der Fireworks-Datei. In Verbindung mit Segmenten bauen Sie schnell und einfach interaktive Objekte.

Rollover mit Fernsteuerung: Remote-Rollovers erweitern den Effekt auf andere Segmente. Solche komplexen Effekte schaffen Sie in Fireworks ganz ohne Programmierung.

Der HTML-Programmierer erblasst vor Neid: Mit CSS-Popup-Menüs bauen Sie in Fireworks Menüs und Navigationen per Mausklick, Drag&Drop und Dialog.

Kleine Animationen – in Fireworks dank Frames kein Problem. Legen Sie Frame-Verzögerungen in der Palette fest, um die Spieldauer zu bestimmen, und nutzen Sie Hintergrundebenen.

Komplexe Animationen realisieren Sie mit Tweens. Hierbei berechnet Fireworks automatisch Zwischenstufen zwischen definierten Frames und erstellt die passenden Frames.

Noch einfacher geht's mit Animationssymbolen: Speichern Sie Symbole von Haus aus als Animation, bestimmen Sie Vektor, Drehung und Skalierung einer linearen Bewegung per Dialog.

Optimierung ist stets ein Kompromiss zwischen Dateigröße und Qualität. Die Fireworks-Werkzeuge helfen Ihnen bei der richtigen Entscheidung.

GIF- und JPEG-Formate sind die beiden wesentlichen Kompressionsverfahren für Bilder im Internet. Dieser Film vermittelt Ihnen die Grundlagen und Entscheidungskriterien.

Manche Bildteile sind wichtiger als andere. Reagieren Sie mit selektiver Komprimierung und erhöhen Sie die Qualität des Hauptmotivs.

Exportieren Sie Ihre Animationen als 'Animiertes GIF'. Was Sie in Bezug auf Dateikompression hierbei beachten sollten, zeigt Ihnen dieser Film.

Die Exportoptionen: Blicken Sie ob der Fülle nicht mehr durch, lassen Sie sich von Fireworks Schritt für Schritt fragen, wie's sein soll. Der Exportassistent führt Sie per Dialog.

Die Funktion 'Bildvorschau' unterstützt Sie, wenn Sie kleine Vorschaubilder für Ihre großen Originale erstellen möchten. Nutzen Sie andere Formate und höhere Komprimierung im eigenen Menü.