Anzeige
Tutorialbeschreibung

Fireworks CS6 - Grundlagen Teil 01: Kleine Übersicht über Fireworks CS6 und die Benutzeroberfläche

Fireworks CS6 - Grundlagen Teil 01: Kleine Übersicht über Fireworks CS6 und die Benutzeroberfläche

Im ersten Teil der Tutorialreihe "Fireworks CS6 Grundlagen" stelle ich Folgendes vor:

• Überblick: die wichtigsten Funktionen
• Das Startfenster
• Die Benutzeroberfläche
• Layouthilfe: Lineale, Hilfslinien, Raster, Intelligente Hilfslinien, Quickinfos, Ausrichtenpalette
• Ebenenpalette, Statuspalette und Seitenpalette
• Die Verlaufspalette
• Shortcuts/Tastaturkürzel
• "Voreinstellungen" im Überblick
Bildquellen: http://fotolia.com - jk_lunettes_optique © RG. #30413222, glasses © maximmmmum #24301742


Einleitung:

Herzlich willkommen zum ersten Teil der Tutorialreihe Fireworks CS6 Grundlagen mit dem Thema: Kleine Übersicht über Fireworks CS6 und die Benutzeroberfläche. In diesem Tutorial stelle ich folgende Themen vor:


1. Überblick: die wichtigsten Funktionen

    1.1.   Warum Fireworks?
    1.2.   Übersicht & Layout
    1.3.   Bibliothek
    1.4.   Seiten/Masterseite
    1.5.   Status
    1.6.   Export


2. Das Startfenster

3. Die Benutzeroberfläche

    3.1.    Menüleiste/Anwendungsleiste
    3.2.    Arbeitsbereich-Umschalter
    3.3.    Suchfenster
    3.4.    Steuerungsbedienfeld
    3.5.    Registerkarte/Tab
    3.6.    Werkzeugpalette
    3.7.    Vorschaufenster
    3.8.    Seitenfenster
    3.9.    Bühne/Arbeitsfläche
    3.10.    Bereich für die Bedienfelder/Paletten/Reiter
    3.11.    Eigenschaftenpalette/Eigenschafteninspektor
    3.12.    Statusanzeige


4. Layouthilfe: Lineale, Hilfslinien, Raster, Intelligente Hilfslinien, Quickinfos, Ausrichtenpalette

    4.1    Lineale, Hilfslinien & Koordinatensystem
    4.2    Raster
    4.3    Intelligente Hilfslinien
    4.4    Quickinfos
    4.5    Ausrichtenpalette
      4.5.1    Ausrichten
      4.5.2    Proportionieren
      4.5.3    Größe
      4.5.4    Abstand


5. Ebenenpalette, Statuspalette und Seitenpalette

5.1 Ebenenpalette
      5.1.1    Optionsmenü
      5.1.2    Ebenen-Mischmodi
      5.1.3    Deckkraft
      5.1.4    Webebene
      5.1.5    Ordner
      5.1.6    Ausgewählte Ebene
      5.1.7    Bitmap-Ebene
      5.1.8    Maske
      5.1.9    Schlosssymbol
      5.1.10    Ausgeblendete Ordner/Ebenen
      5.1.11    Vektorebene
      5.1.12    Ebene mit Auge und Schloss
      5.1.13    Statusanzeige
      5.1.14    Symbol für: Neuen Ordner erstellen
      5.1.15    Symbol für: Neuen Unterordner erstellen
      5.1.16    Symbol für: Ebenenmaske
      5.1.17    Symbol für: Neue Bitmapebene erstellen
      5.1.18    Symbol für: Ordner und/oder Ebenen löschen
      5.1.19    Weiteres

5.2 Statuspalette
      5.2.1    Ausgewählter, erster Status (Erläuterung s.o.)
      5.2.2    Zweiter Status, passiv (Erläuterung s.o.)
      5.2.3    Statusverzögerung
      5.2.4    Zwiebelschichteneffekt
      5.2.5    GIF-Animationsschleife
      5.2.6    Ausgewählte Wiederholung einer GIF-Animationsschleife
      5.2.7    Auf Status verteilen
      5.2.8    Neue / Status duplizieren
      5.2.9    Status löschen

5.3 Seitenpalette


 

6. Die Verlaufspalette

7. Shortcuts/Tastaturkürzel

      7.1    Aktuelle Auswahl der Tastenkürzel
      7.2    Satz duplizieren
      7.3    Tastenkürzen umbenennen
      7.4    Satz als HTML exportieren
      7.5    Satz löschen
      7.6    Übersicht der Befehle
      7.7    Kurzbefehle hinzufügen oder löschen
      7.8    Aktuelle Auflistung der verwendbaren Tastenkürzel
      7.9    Taste drücken. Da meint man die zu drückenden Tasten.
      7.10    „Und wie erstellt man nun einen eigenen Shortcut?


8. "Voreinstellungen" im Überblick

      8.1    Allgemein
      8.2    Bearbeitung
      8.3    Hilfslinien und Raster
      8.4    Text
      8.5    Photoshop-Datei importieren/öffnen
      8.6    Starten und Bearbeiten
      8.7    Zusatzmodule


 

1. Überblick: die wichtigsten Funktionen

1.1 Warum Fireworks?

Warum Fireworks, wenn es auch Photoshop gibt?

Die meisten Tutorials, die das Thema Screen- oder Webdesign behandeln, werden in Photoshop realisiert. Dabei ist Photoshop (so mächtig das Programm auch ist) ein Programm (um es sehr zu verallgemeinern!) zur Fotobearbeitung.

Natürlich kann man mit Photoshop technisch mehr machen, weil der Umfang des Programmes enorm ist, aber wenn es um das Zusammenspiel mit HTML und z.B. Adobe Dreamweaver geht, erkennt man bei Fireworks schnell die Vorteile gegenüber Photoshop.

Hier eine kleine Auflistung von Dingen, die Photoshop nicht kann, die aber in punkto Zeit beim Thema Screendesign sehr wichtig zu wissen sind:

• In Fireworks kann man nicht nur ein Seitenlayout erstellen, sondern dieses auch sofort in Browsern anschauen und testen.
• Fireworks kann durch die Arbeit mit Status Mouse-Over-Effekte gezielt umsetzen und anzeigen.
• Die Bibliothek umfasst ein sehr großes Spektrum an allgemeinen Webelementen und man kann durch einfaches Drag&Drop z.B. Scrollbalken simulieren sowie Screendesigns für Mobiltelefone und Smartphones erstellen, bearbeiten und testen.
• Fireworks bietet die Möglichkeit, durch aktuelle Webstandards (wie CSS3) ganze CSS-Codes zu generieren (wie Schlagschatten, runde Ecken, Verläufe und Transparenzen) und gleich in einem CSS-Dokument abzuspeichern.
• Es ist möglich, animierte Flashbanner zu integrieren.

Es gibt noch weitere Vor-, aber auch Nachteile gegenüber Photoshop – aber in der richtigen Kombination gestaltet sich das Layouten zeit- und Nerven sparend ganz wie von allein.


 

1.2 Übersicht & Layout

Wie man sehen kann, ist Fireworks etwa so aufgebaut wie Dreamweaver (Bild 2). Unten befinden sich die Eigenschaften eines Elementes. Das ausgewählte Element ist blau (Navigation) und das rot umrandete Element ist jenes Element, wo der Cursor sich gerade befindet. Auf der rechten Seite erkennt man, dass man in Fireworks ebenfalls mit Ebenen und Ordnern arbeiten kann, und welches Element ausgewählt ist. Eine weitere hilfreiche Sache ist auch, dass die Ebenen mit kleinen Symbolen versehen sind. So hat die ausgewählte Textebene ein kleines T in der rechten unteren Ecke der Ebene.

Bilder
Bild 1: Fireworks CS6


 
So sieht es in Dreamweaver aus:

Bilder
Bild 2: Dreamweaver CS6


 

1.3 Bibliothek

Die Allgemeine Bibliothek, die mit dem Shortcut L zu erreichen ist, umfasst eine Menge Symbole, Flächen, Animationen und Grafiken. Dabei kann man die Allgemeine Bibliothek stets ergänzen. Auch das Einfügen einer Grafik ist simpel: Einfach das gewünschte Symbol anklicken und mit gedrückter linker Maustaste auf die Fläche ziehen.

Bilder
Bibliothek


 

1.4 Seiten/Masterseite

Damit man in Fireworks Zeit sparen kann, gibt es zwei unterschiedliche Seitenarten. Die Masterseite (ganz oben ausgewählt) und die normalen Seiten (darauf folgende Seiten).

Der Sinn ist folgender: Die Masterseite beinhaltet alle Elemente, die sich während des Layoutprozesses NICHT ändern. Bei einem Fixed Layout (also einer Seite, die stets ihre Größe behält), kann das der Header + kompletter Content sein, aber z.B. NIE die Indexseite, weil der Inhalt (wie Text, Grafiken etc.) nur für diese Seite bestimmt ist. Ein Vorteil dieser Aufteilung ist, dass man nur einmal etwas verändern muss. Z.B., wenn man das Logo verschieben muss, so braucht man das Logo nur einmal zu verschieben und nicht fünfmal.

Bilder
Seitenpalette


 

1.5 Status

Mit dem Status kann man die Status einer Website steuern wie z.B. den Status des Mouse-Hovers, das sich zeigt, wenn man mit der Maus über einen Menüpunkt geht.

Bilder
Status 2: Hier als Hover-Status angelegt


 
Praktisch gesehen, z.B. in einem Browser, sieht es dann so aus:

Bilder
Ansicht in einem Browser

Der Link Typberatung wird unterstrichen angezeigt, da die Maus sich gerade auf diesem Link befindet.


 

1.6 Export

Im letzten Abschnitt der kleinen Zusammenfassung, was einen erwartet, wenn man mit Fireworks CS6 arbeitet, geht es um den Export.

Bilder
Exportauswahl in Fireworks CS6


Hier erkennt man u.a. einen weiteren Vorteil von Fireworks: Auch wenn man in Photoshop ebenfalls slicen kann und die einzelnen Bilder in einem Ordner gespeichert werden – in Fireworks gibt es die Möglichkeit, auch CSS-Sprites (CSS-Codefragmente, die z.B. die Größe und Positionen des Headers angeben und alles gleichzeitig eindeutig mit Class-Elementen versehen) passend zum Layout zu generieren. Das spart Zeit!

So, genug verallgemeinert, jetzt geht’s ins Detail ;)


 

2. Das Startfenster

Wenn Fireworks gestartet wird, so erscheint im Regelfall ein Begrüßungsfenster. Dieses Fenster bietet eine Übersicht über die zuletzt geöffneten Dateien (links) und die Möglichkeit, ob man ein neues Fireworks-Dokument anlegen möchte (rechts, unter Neu erstellen) oder eine neue Seite erstellen möchte mithilfe einer Vorlage.

Unter der Überschrift Erweitern und Fireworks Exchange gelangt man zur Adobe-Exchange-Seite und hat dort die Möglichkeit, passende Plug-Ins und Erweiterungen für Fireworks downzuloaden.

Im unteren Bereich des Begrüßungsfensters findet man Erste Schritte, Neue Funktionen und Ressourcen. Das sind Links zu Tutorials und Informationen, die einem den Einstieg in Fireworks erleichtern. Die rechte untere Seite ist für aktuelle News reserviert, die man erhält, wenn man auf den Link klickt.

Wenn man das Häkchen Nicht mehr anzeigen aktiviert, dann wird das Fenster beim nächsten Start von Fireworks nicht mehr angezeigt.

Bilder
Startfenster


 
Wenn man sich dann aber doch anders entscheiden sollte, dann kann man unter Bearbeiten>Voreinstellungen (alternativ Strg+U) unter Allgemein die Startseite wieder anzeigen lassen.

Bilder
Voreinstellungen zum Begrüßungsfenster


 

3. Die Benutzeroberfläche

Wenn wir z.B. beim Begrüßungsfenster bei Neu erstellen auf Fireworks Dokument (PNG) gehen (alternativ auf Datei>Neu klicken oder den Shortcut Strg+N benutzen), dann öffnet sich als Allererstes ein Fenster für die Leinwandeigenschaften.

Bilder
Voreinstellungen zur Leinwand


Hier hat man die Möglichkeit, die Größe (Breite + Höhe) und die Auflösung zu bestimmen. Außerdem kann man im zweiten Abschnitt des Fensters die Leinwandfarbe bestimmen oder sich unter Vorlagen … für eine Vorlage z.B. für eine Webseite entscheiden.

 
Wenn man sich für etwas entschieden hat (wie in diesem Beispiel für eine leere Seite), kann man auf Anhieb 12 wesentliche Elemente feststellen:

Bilder
Fireworks CS6


3.1.1 = Menüleiste / Anwendungsleiste

3.2.2 = Arbeitsbereich-Umschalter

Hier hat man die Möglichkeit, den Arbeitsbereich so zu gestalten, wie man es möchte. Dies kann sehr nützlich sein, wenn man mit mehreren Personen an einem PC arbeitet und jeder andere Einstellungen bevorzugt (z.B.: Person A hat lieber die Werkzeugpalette rechts und hat eine ganz andere Reinfolge von der Palette als Person B, die dazu noch die Eigenschaftenpalette ganz woanders stehen hat). Ansonsten kann man zwischen vier vorgefertigten Vorlagen wählen.

 
Vergleich: Erweiterter Modus (oben) mit Person A (Mitte) und Person B (unten).

Bilder
Arbeitsbereiche im Vergleich


 

ACHTUNG (!)

AUCH WENN DAS ANLEGEN EINES PERSÖNLICHEN ARBEITSBEREICHES SCHNELL GEHT, SO IST DAS LÖSCHEN EINER VORLAGE LEIDER ETWAS KOMPLIZIERTER!

Leider ist das nicht wie in Photoshop geregelt, wo man einen Arbeitsbereich mit zwei Klicks löschen kann. Somit ist die beste Lösung, wenn man sich dafür entscheiden möchte, mehrere Arbeitsbereiche anzulegen, ein Plug-In von Shambhuling Nashi (http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html) zu installieren.

Folgendes ist zu tun, wenn’s bereit zu spät ist ;)

• Link folgen: http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html
• Zip-Datei herunterladen und entpacken
• Den Adobe Extension Manager öffnen
• Oben auf Installieren klicken
• Extension auswählen
• Installieren
• Fireworks öffnen
• Unter Befehle den Workspace Manager auswählen
• Person A und Person B löschen
• Fireworks neu starten
• Fertig :)


3.3 3 = Suchfenster

Hier kann man einzelne Stichwörter eingeben und bei Enter gelangt man zur http://help.adobe.com-Seite.


3.4 4 = Steuerungsbedienfeld

Hier sind die wichtigsten Funktionen als Symbole noch einmal in einer Leiste zusammengefasst wie Copy & Paste, horizontal oder vertikal spiegeln, importieren, exportieren etc.


 

3.5 5 = Registrierkarte/Tab

In der Registerkarte werden der Dokumentenname und die Dateiendung angezeigt. Der Stern (*) symbolisiert, dass die Datei noch nicht gespeichert wurde. Wenn man zwei Dokumente in Fireworks geöffnet hat, kann man durch Drag&Drop die Tabreihenfolge bestimmen oder die Tabs aus der Leiste lösen, sodass man zwei Fenster hat.

Bilder
Zwei Fenster "auf" der Leinwand


 
Außerdem kann man durch Verschieben z.B. an die rechte Seite des ersten Dokuments (1) beide Dokumente nebeneinander geöffnet haben (2). Somit hat man die Möglichkeit, an beiden Dokumenten gleichzeitig zu arbeiten. Das Gleiche geht auch horizontal: Man muss nur ein Fenster unter das andere schieben.

Bilder
1: Die Registerkarte "Unbenannt-2.fw.jpg" wurde an den rechten Rand des ersten Dokument geschoben
2: Zwei verschiedene Dokumente nebeneinander



Durch das Klicken auf das kleine X oder durch Strg+W wird das Dokument geschlossen.


 

3.6 6 = Werkzeugpalette

Die Werkzeugpalette umfasst alle Werkzeuge, die teilweise noch andere "Unterwerkzeuge" besitzen. Gekennzeichnet sind diese mit einem kleinen Pfeil nach unten wie zum Beispiel beim Auswahlwerkzeug

Bilder.


Klickt man mit der Maus z.B. auf das Auswahlwerkzeug, so kann man sich weitere Werkzeuge anzeigen lassen.

Bilder
Werkzeug: Zeiger


Alternativ kann man auch mit dem jeweiligen Shortcut (hier V) arbeiten.

Generell ist die Werkzeugplatte unterteilt in Auswahlwerkzeuge (z.B. zum Verschieben von Elementen), Bitmapwerkzeuge für weitere Auswahlmöglichkeiten und kleinere Retuschen, dann die Vektorwerkzeuge, darunter befinden sich die Web-Werkzeuge z.B. zum Slicen einer Seite, darunter wiederum befinden sich die Farbwerkzeuge, wo man z.B. die Füll- und Konturfarbe festlegen kann, und am Ende befinden sich die Anzeigenwerkzeuge, wo man rein- und rauszoomen oder im Vollbildmodus arbeiten kann.


 

3.7 7 = Vorschaufenster

Im Anzeigefenster kann man sich zwischen Original, Vorschau, 2-fach-Vorschau und 4-fach-Vorschau entscheiden. Beim Fenster Original handelt es sich um die Bearbeitungsansicht. Bei der Vorschau kann man sich eine aktuelle Vorschau der jeweiligen Seite anschauen, jedoch kann man sich nicht bei einer Navigation mit verschiedenen Seiten durchklicken. Bei der 2-fach- und 4-fach-Vorschau kann man sich einen Vergleich einholen, welche Grafikeinstellungen wie aussehen.

Bilder
'4-fach-Vorschau' mit diversen Einstellungen, die im Reiter 'Optimieren' angezeigt werden


3.8 8 = Seitenfenster

Wenn man mehre Seiten (z.B. Index, About Me, Portfolio etc.) angelegt hat, so kann man im Seitenfenster die jeweilige Seite auswählen.


 

3.9 9 = Bühne/Arbeitsfläche

Die weiße Fläche ist die Bühne bzw. Arbeitsfläche, auf der sich alles abspielt. Es ist der sichtbare Bereich, der zum Arbeiten benutzt wird. Wenn man die Größe der Bühne verändern möchte, so kann man das bei den Eigenschaften unter Leinwandgröße tun.

Bilder
Bearbeitung der Leinwandgröße. Je nachdem, welches Kästchen in der Mitte bei 'Anker' ausgewählt wird, wird die Leinwand vergrößert. Ist z.B. das links oben ausgewählt, vergrößert sich die Leinwand nach unten und nach rechts.


 
Zu beachten ist, dass man für eine Vergrößerung und Verkleidung der Leinwand die Option Leinwandgröße benutzt. Die Bildergröße ist lediglich für Bilder gedacht und ist von der Leinwand getrennt zu behandeln.

Bilder
Optionen von 'Bildergröße'


 
Die Option Leinwand anpassen beinhaltet die Möglichkeit, die Leinwand an die Größe der Inhalte anzupassen.

Bilder
Links oben: ausgewähltes Element und Leinwand; rechts: Reduzierte Leinwand auf ausgewähltes Element


 
Außerdem kann man nachträglich die Farbe (1), die Bildqualität (2) und/oder den Status z.B. für Mouse-Over-Effekte (3) verändern.

Bilder
Diverse Einstellungsmöglichkeiten im Eigenschafteninspektor


 

3.10: 10 = Bereich für die Bedienfelder/Paletten/Reiter

Bei den Bedienfeldern handelt es sich um Übersichten z.B. der angelegten Seiten; es gibt aber auch weitere Einstellungen, die vorgenommen werden können, wie z.B. durch vorgegebene Stile oder Farbfelder. Wenn etwas fehlen sollte, so kann man unter Fenster einzelne weitere Bedienfelder hinzufügen.

Ein Bedienfeld bzw. eine Palette kann aus mehreren Reitern (gelb) bestehen.

Bilder
Beispiel einer Palette mit Reitern


Und mit denen ist einiges möglich.

 
Per Drag&Drop kann man einzelne Reiter aus der Palette lösen (1), man kann sie mit einem Doppelklick auf den Reiter minimieren und maximieren (2). Mit einem Klick auf den kleinen Doppelpfeil auf der rechten Seite kann man die Palette auf Icongröße bringen (3) oder sie der gewünschten Größe anpassen (4). Beim Draufklicken auf das Icon bzw. auf den Reiter im geschlossenen Zustand lässt sich die Palette öffnen (5). Mit erneutem Klicken auf die Pfeile kommt man wieder zurück zum vorherigen Status. Via Drag&Drop kann man die Reiter wieder in eine Palette einfügen.

Bilder
Darstellungsmöglichkeiten eines Bedienfeldes


 
Die einzelnen Status lassen sich auch auf die gesamte Palette übertragen, und es ist möglich, durch Drag&Drop die einzelnen Reiter in ein Bedienfeld zu verschieben.

Weitere Möglichkeiten ergeben sich, wenn man auf das Bilder–Symbol ganz rechts klickt. So sind reiterspezifische Aktionen möglich.

Auch das Verhalten der Palette kann man bestimmen, indem man auf ein freies Feld der Reiter-Reihe mit einem Rechtsklick klickt.

Bilder
Weitere Einstellungsmöglichkeiten der Bedienfelder


So kann man zum Beispiel einstellen, dass sich das Bedienfeld auf Icongröße verkleinern soll, sobald man auf die Leinwand klickt (2). Standardeinstellung ist jedoch jene, dass die Palette offen ist.

 
Die letzte zu erwähnende Sache ist, dass man die Bedienfelder z.B. von der Breite her anpassen kann, indem man einfach mit dem Cursor beim Palettenrand die linke Maustaste gedrückt hält und man sich nach links oder rechts bewegt.

Bilder
Verschiebungspfeil


 

3.11 11 = Eigenschaftenpalette / Eigenschafteninspektor

In der Eigenschaftenpalette sieht man die jeweiligen Eigenschaften zum ausgewählten Element an. Beim Beispielscreen wäre das die Leinwand. Sie passt sich jedem ausgewählten Element automatisch an. Bei einem Text kann das folgendermaßen aussehen:

Bilder
Eigenschaften eines Textes


So sieht man links, dass es sich um einen Text handelt, und den Namen des Textes/Elements (Achtung: Es handelt sich lediglich um die Benennung des Textes, der Text selber lässt sich nur auf der Arbeitsfläche bearbeiten), die Höhe, Breite und Positionierung. Danach kommen die Schriftart und deren Eigenschaften wie Größe, Laufrichtung, Farbe etc. Alle Werte lassen sich anpassen.


 

3.12 12 = Statusanzeige

Hier lassen sich die einzelnen Status anzeigen, z.B. ein Mouse-Hover-Effekt. Bei einer Animation, z.B. bei einem animierten GIF, kann man sich die einzelnen Status in Echtzeit abspielen lassen. Weiter rechts befindet sich die Größe der Leinwand und die Darstellung in %. Man sollte jedoch ab und an während des Arbeitens auf 100% stellen, da Webseiten zum Beispiel in der Ansicht von 100% exportiert werden.


4. Layouthilfe: Lineale, Hilfslinien & Koordinatensystem, Raster, Intelligente Hilfslinien, Quickinfos, Ausrichtenpalette

4.1 Lineale, Hilfslinien & Koordinatensystem

Die Lineale erhält man unter Ansicht>Lineale oder durch Strg+Alt+R.

Wenn man die Lineale aktiviert hat, kann man Hilfslinien horizontal und vertikal ziehen, indem man mit gedrückter linker Maustaste eine Linie auf den Arbeitsbereich zieht (türkise Linien).

 
Außerdem hat man die Möglichkeit, durch Verschiebung des 0-Punktes das Koordinatensystem zu bestimmen. Normalerweise ist der 0-Punkt an der linken oberen Ecke der Leinwand. Wenn man mit gedrückter Maustaste auf das Bilder–Symbol (am Lineal ganz links oben) geht und mit der Maus auf den Arbeitsbereich geht, kann man einen neuen 0-Punkt bestimmen (schwarze gestrichelte Linie). Das kann hilfreich sein, wenn man bei einem Screendesign mit einem Hintergrund gearbeitet hat, man den 0-Punkt und somit die Koordinaten aber am Header oder Content ausgerichtet haben möchte. Wenn man mit einem Doppelklick auf das Symbol klickt, wird das Koordinatensystem resettet.

Bilder
Hilfslinien und Koordinatensystemverschiebungslinien


 
Die Hilfslinien in Fireworks kann man unter Ansicht>Hilfslinien einstellen - ob sie z.B. angezeigt sein sollen, ob sie gesperrt sein sollen (heißt, dass man die Hilfslinien nicht nachträglich verschieben kann), ob Elemente an Hilfslinien andocken oder ob alle Hilfslinien entfernt werden sollen.

Bilder
Eigenschaften der Hilfslinien


Wenn man Hilfslinien einzeln entfernen möchte, zieht man die gewünschte Hilfslinie via Drag&Drop aus der Leinwand heraus.

 
TIPP: Wenn man die Shift-Taste gedrückt hält, kann man nicht nur anschauen, wo die Hilfslinie im Vergleich zur aktuellen Linie wäre, sondern auch den Platz gemessen an der Ober- und Unterkante. Auch ist das allgemeine Anzeigen der unterteilten Bereiche mit der Shift-Taste möglich. Sobald mehrere Hilfslinien im Bild sind, wird der Abstand zwischen der ersten und der zweiten gemessen.

Bilder
Abstände bei gehaltener Shift-Taste. Auch wenn zwei Hilfslinien angezeigt werden: An jener Linie, wo sich das kleine 'x' befindet, ist die Vorschau.


 

4.2 Raster

Wenn man sich ein Raster einblenden lassen möchte, dann kann man dies unter Ansicht>Raster>Raster anzeigen tun oder Strg+Alt+G drücken. Auch hier kann man wie bei den Hilfslinien bestimmen, ob Elemente am Raster andocken sollen oder nicht.

Bilder
Rastereinstellungen

 
Unter Raster bearbeiten lässt sich das Raster anpassen. So kann man die Farbe sowie die Breite und Höhe der einzelnen Kästchen bestimmen. Standardmäßig ist beides auf 36px eingestellt.

Bilder
Einstellungen zum Raster


 

4.3 Intelligente Hilfslinien

Intelligente Hilfslinien sind optische Linien, die einem helfen, Objekte z.B. an der Unterkante auszurichten. Um diese zu aktivieren, geht man auf Ansichten>Intelligente Hilfslinien und aktiviert Intelligente Hilfslinien anzeigen. Alternativ drückt man Strg+ZIRKUMFLEX (mit der Zirkumflex-Taste macht man z.B. das ^-Zeichen und sie befindet sich meistens unter der Esc-Taste und links neben der 1)

Wenn man dann Elemente verschiebt (wie hier im Beispiel das untere grüne Kästchen), dann erscheint eine rosa gestrichelte Linie.

Bilder
Intelligente Hilfslinien


 

4.4 Quickinfos

Quickinfos sind kleine Hilfestellungen, mit denen man sich bei einem Element z.B. die Koordinaten anzeigen lassen kann, während man das Element verschiebt. Das Gleiche gilt auch für Hilfslinien. Um die Quickinfos zu aktivieren, geht man lediglich auf Ansichten>QuickInfos oder man drückt Strg+AKUT (die Akut-Taste ist jene Taste, die sich rechts neben dem ß befindet und mit der man man z.B. ein ó machen kann).

Bilder
Quickinfos


 

4.5 Ausrichtenpalette

Mit der Ausrichtenpalette kann man Elemente aneinander ausrichten. Dabei unterscheidet man, ob es in erster Linie relativ zum Objekt oder zur Leinwand sein soll. Danach kommen die Möglichkeiten des Ausrichtens, Proportionierens, Anpassung der Größe und Anpassung des Abstandes.

Bilder
Ausrichtenpalette


 

4.5.1 Ausrichten:

1 = Am linken Rand ausrichten
2 = Horizontal zentrieren
3 = Am rechten Rand ausrichten
4 = Am oberen Rand ausrichten
5 = Vertikal zentrieren
6 = Am unteren Rand ausrichten

Bilder
Übersicht zu "Ausrichten"


 

4.5.2 Proportionieren:

1 = Oberen Rand proportionieren
2 = Vertikale Mitte proportionieren
3 = Unteren Rand proportionieren
4 = Linker Rand proportionieren
5 = Horizontale Mitte proportionieren
6 = Rechten Rand proportionieren

Ein Farbfeld (grau oder weiß) wurde in Vorher und Nachher aufgeteilt. Die Veränderungen wurden anhand eines gelben 4-Ecks verdeutlicht, das für die vorherige Position steht. Diese Einstellungen sind nur möglich, wenn das obere, mittlere und untere Element ausgewählt ist.

Bilder
Übersicht zu "Proportionieren"


 

4.5.3 Größe:

1 = Breite anpassen
2 = Höhe anpassen
3 = Breite und Höhe anpassen

Links ist die unveränderte Version, rechts das Ergebnis. Die Bereiche wurden jeweils mit Hilfslinien getrennt.

Bilder
Übersicht zu 'Größe'


 

4.5.4 Abstand:

1 = Vertikal gleichmäßig anordnen
2 = Vertikal gleichmäßig anordnen mit 50px Abstand
3 = Horizontal gleichmäßig anordnen
4 = Horizontal gleichmäßig anordnen mit 50px Abstand

Die orange gekennzeichneten Kästchen sind die Ursprungskästchen, auf die sich die Veränderungen beziehen.

Bilder
Übersicht zu "Abstand"


 

5. Ebenenpalette, Statuspalette und Seitenpalette

Wie zu Anfang erwähnt, gibt es Ebenen-, Status- und Seitenpaletten.


5.1 Ebenenpalette

Die Ebenenpalette ist wie folgt aufgebaut:

Bilder
Übersicht der Ebenenpalette


 

5.1.1 1 = Optionsmenü

Im Optionsmenü kann man Ebenen erstellen und bearbeiten, aus- und einblenden, Masken hinzufügen und …

Bilder
Optionsmenü


 
… bei den Miniaturoptionen die Größe der Ebenenminiaturen auswählen.

Bilder
Miniaturoptionen


 

5.1.2: 2 = Ebenen-Mischmodi

Wie in Photoshop gibt es auch in Fireworks die Möglichkeit, durch verschiedene Modi verschiedene Effekte zu nutzen.

Bilder
Mischmodi


 

5.1.3: 3 = Deckkraft

Bei der Deckkraft ist es möglich, die Transparenz einzustellen. Dabei gilt: 100% = volle Deckkraft, 0% = durchsichtig (bzw.: man sieht den Inhalt der Ebene nicht mehr).


5.1.4: 4 = Webebene

In der Webebene werden u.a. Hotspots und Segmente gespeichert, die nachher bei der Vergabe der Seite oder Hoverelemente wichtig sind.


5.1.5: 5 = Ordner

Wie schon erwähnt, kann man in Fireworks Ordner und Unterordner erstellen.


5.1.6: 6 = ausgewählte Ebene

Eine ausgewählte Ebene wird mit einem blauen Hintergrund versehen. Gleichzeitig wird auf der Leinwand das Element blau umrandet wie in diesem Beispiel die Textebene mit den einzelnen Navigationspunkten. Die rot umrandeten Elemente bedeuten, dass der Cursor sich gerade auf diesem Element befindet wie hier in diesem Beispiel die Brillengrafik.


5.1.7 7 = Bitmap-Ebene

Auf dieser Ebene befindet sich eine eingefügte Grafik wie z.B. ein Bild.


5.1.8 8 = Maske

Wie in Photoshop kann man auch in Fireworks mit Masken arbeiten. Dabei ist Schwarz gleichzusetzen mit einer Transparenz von 0% und Weiß mit voller Deckkraft. Um z.B. mit verschiedenen Deckkraftstufen auf der Maskenebene zu arbeiten, kann man mit verschiedenen Grautönen arbeiten.


5.1.9 9 = Schlosssymbol

Das Schlosssymbol steht dafür, Ordner oder Elemente zu "verschließen"; heißt also, dass man weder auf der Ebene arbeiten noch die Elemente in einer Ebene, die das Schloss haben, verschieben kann. Wenn man einen Ordner mit dem Schlosssymbol bestückt, so werden alle Ebenen und Unterordner in diesem Hauptordner automatisch mit verschlossen.


5.1.10: 10 = Ausgeblendete Ordner/Ebenen

Ebenen, die ausgeblendet werden sollen, besitzen kein Auge auf der linken Seite. Durch einfaches Klicken in das kleine Feld wird die Ebene wieder eingeblendet. Wie bei dem Schlosssymbol werden bei ausgeblendetem Ordner auch alle beinhalteten Ebenen ausgeblendet.


5.1.11: 11 = Vektorebene

Durch eine kleine Schreibfeder wird eine Ebene gekennzeichnet, die ein auf Vektor basierendes Element besitzt.


5.1.12: 12 = Ebene mit Auge und Schloss

Es ist selbstverständlich auch möglich, ein Schloss und Augensymbol auf eine Ebene zu setzen.


5.1.13: 13 = Statusanzeige

Status 1 bedeutet, dass man sich im ersten Status befindet, z.B. in jenem Status, der sich zeigt, wenn man die Webseite öffnet, ohne Hovereffekte.


5.1.14: 14 = Symbol für: Neuen Ordner erstellen



5.1.15: 15 = Symbol für: Neuen Unterordner erstellen



5.1.16: 16 = Symbol für: Ebenenmaske

Im Gegensatz zu Photoshop jedoch kann man keine Masken auf Ordnern erstellen.


5.1.17: 17 = Symbol für: Neue Bitmapebene erstellen

5.1.18: 18 = Symbol für: Ordner und/oder Ebenen löschen

5.1.19 Weiteres:

Das Verkettungssymbol zwischen der Ebene und der Ebenenmaske bedeutet, dass die Maske z.B. bei Transformationen (wenn man also das Bild z.B. vergrößert oder verschiebt) an der Ebene haften bleibt und sich mit vergrößert und mit verschiebt und sich somit anpasst. Ist das Verkettungssymbol nicht zwischen Ebene und Maske, so ist die Maske auf ihre Größe, Inhalt, Position etc. fixiert. D.h., wenn man die Bitmapdatei beispielsweise vergrößert, bleibt die Maske gleich. Durch das einfache Klicken in die Mitte zwischen Ebene und Maske kann man das Symbol ein- und ausblenden.

Bilder
Verkettungssymbol


 
Durch das Doppelklicken auf den Ebenennamen kann man die Ebene umbenennen:

Bilder
Änderungen von Ebenennamen


Um mehrere Ebenen auszuwählen, hält man einfach die Shift-Taste gedrückt und wählt die Ebenen aus, vorausgesetzt, sie besitzen kein Schloss.

Wenn man die Ebenenreihenfolge verändern möchte, dann geht man auf eine Ebene, hält die linke Maustaste gedrückt und zieht diese nach oben über oder nach unten unter eine Ebene. Gekennzeichnet wird dies durch einen schwarzen Balken, der entsteht, wenn man die Ebene nach oben oder unten zieht.

Bilder
Ebenenreihenfolge


 
Alternativ kann man auch die Strg-Taste gedrückt halten und mit den Pfeiltasten die ausgewählte Ebene hoch oder runter navigieren. Dabei braucht man die Ebenenpalette nicht offen zu haben. Es reicht, wenn das gewünschte Element ausgewählt wurde.


5.2 Statuspalette

Die Funktion der Statuspalette kann z.B. jene sein, die einzelnen Status eines Links zu simulieren. Status 1 bedeutet, dass es der aktuelle Status ist, also jener Status, den man sieht, wenn man die Webseite geöffnet hat.

Bilder
Status 1


 
Status 2 wiederum könnte ein Mouse-Hover-Effekt sein:

Bilder
Anwendungsbeispiel von Status 2


5.2.1: 1 = Ausgewählter, erster Status (Erläuterung s.o.)

5.2.2: 2 = Zweiter Status, passiv (Erläuterung s.o.)

 

5.2.3: 3 = Statusverzögerung

Die Statusverzögerung wird z.B. bei GIF-Animationen verwendet. Hierzu werden mehrere Status erstellt, die die einzelnen Positionen z.B. eines Banners widerspiegeln, und unter Statusverzögerung lässt sich steuern, wie lange ein Element angezeigt werden soll.

Bilder
Statusverzögerung


 

5.2.4: 4 = Zwiebelschichteneffekt

Der Zwiebelschichteneffekt geht auch in Richtung Animation und hat den Nutzen, dass der Status vor und nach dem ausgewählten Status angezeigt wird. Somit kann man Objekte flüssig animieren, ohne sie dabei stets vorwärts und rückwärts zu durchlaufen.

Bilder
Zwiebelschichteneffekt


5.2.5: 5 = GIF-Animationsschleife

Hier wird eingestellt, wie oft ein animiertes GIF durchlaufen soll.

Bilder
Animationsschleife


 

5.2.6: 6 = Ausgewählte Wiederholung einer GIF-Animationsschleife basierend auf 5

5.2.7: 7 = auf Status verteilen

Auf Status verteilen wird bei Tween-Animationen benutzt. Wenn man eine Animation via Tween erstellt, werden in der Regel ganz viele Status erstellt. Mit Auf Status verteilen werden die vielen Status auf einen Status reduziert.


5.2.8 8 = Neue / Status duplizieren

Es wird ein neuer Status erstellt.


5.2.9 9 = Status löschen

Durch Klicken auf das Mülleimersymbol wird der aktuelle Status gelöscht.


5.3 Seitenpalette

Bei dem Reiter Seiten handelt es sich um die Übersicht aller erstellten Seiten. Da es sich beim Layouten von Webseiten nicht nur um eine Seite handelt, sondern meist um mehrere, kann man gleich die Seiten mit den dazugehörigen Texten anlegen. Jede Seite besitzt ihren eigenen Status und ihre eigenen Ebenen, die eigenständig und unabhängig von den anderen Seiten vorhanden sind. Es ist sogar möglich, die Seiten mit den dazugehörigen Navigationspunkten zu verbinden, um später eine durchklickbare Homepage zu erstellen. Dazu jedoch sollte man sich an die Regeln der Seitenbenennung halten: alles kleinschreiben, keine Leer-, Sonderzeichen oder Umlaute.

 
a Wenn man die Seiten wechseln möchte, kann man die Seiten separat auswählen, bei dem kleinen Bilder Icon links neben 5 Seiten (die die Seitenanzahl wiedergibt) oder direkt etwas weiter oben an der Vorschauleiste die einzelnen Seiten auswählen.

Bilder
Reiter: Seiten


 

6. Die Verlaufspalette

Die Verlaufspalette bietet nicht nur die Möglichkeit, eine Übersicht aller Schritte anzuschauen, sondern mit dem Regler an der Seite kann man die Schritte rückgängig machen. Dabei sind aber ein paar Dinge zu beachten: Wenn man den Regler zu einem Verlaufspunkt schiebt und an diesem Punkt etwas ändert, werden automatisch alle Punkte, die darauf folgen würden, gelöscht. Man kann sich mit Strg+Z für zurück (alternativ: Bearbeiten>Rückgängig) oder Strg+Y für Wiederholen durch die Verlaufspalette navigieren.

Wenn man auf Wiederholen klickt, wird die Aktion wiederholt ausgeführt. Z.B., wenn man eine Vektorgrafik 10px nach rechts verschiebt und auf Wiederholen klickt, dann verschiebt sich die Grafik um weitere 10px nach rechts. Auch ist es möglich, Vorgänge zu kopieren, um sie auf andere Elemente anzuwenden oder zu speichern.

Bilder
Verlauf


 

7. Shortcuts/Tastaturkürzel

Unter Bearbeiten>Tastaturbefehle lassen sich die Shortcuts bearbeiten

Bilder
Tastaturbefehle


7.1: 1 = Aktuelle Auswahl der Tastenkürzel

Bilder


7.2: 2 = Satz duplizieren

Bei Satz duplizieren wird die aktuelle Auswahl dupliziert, die man an eigene Wünsche anpassen kann.


7.3: 3 = Tastenkürzen umbenennen

Dieser Button steht nur bei selbst angelegten Sätzen zur Verfügung.


7.4: 4 = Satz als HTML exportieren

Es wird eine HTML-Übersicht exportiert, in der alle Tastenkürzel aufgelistet werden.


7.5: 5 = Satz löschen

7.6: 6 = Übersicht der Befehle

Bilder
Übersicht der Befehle, die in 3 Einheiten aufgeteilt sind


7.7: 7 = Kurzbefehle hinzufügen oder löschen

7.8: 8 = Aktuelle Auflistung der verwendbaren Tastenkürzel

7.9: 9 = Taste drücken. Da meint man die zu drückenden Tasten.

 

7.10 Und wie erstellt man nun einen eigenen Shortcut?

Zuerst drückt man auf Satz duplizieren, gibt seinem Satz einen neuen Namen und bestätigt dies mit OK.

Bilder
Satz duplizieren


 
Anschließend sucht man sich ein Thema aus, das man ändern möchte. In diesem Fall Modifizieren>Leinwand>Leinwandgröße. Daraufhin klickt man bei Kurzbefehle auf das + und gibt bei Taste drücken die gewünschte Tastenkombination ein.

Bilder
Erstellung eines Shortcuts


 
Danach einfach auf Ändern drücken und auf OK und schon hat man sein eigenes Tastenkürzel erstellt.

Bilder
Fertigstellung eines Shortcuts


Um ein vorhandenes Tastenkürzel zu verändern, muss man einfach nur den gewünschten Bereich anklicken, bei Taste drücken eine neue Tastenkombination eingeben und auf Ändern klicken.


 

8. "Voreinstellungen" im Überblick

Die Voreinstellungen findet man unter Bearbeiten>Voreinstellungen …, und sie werden in 7 Bereiche eingeteilt:

Bilder
Voreinstellungen


8.1 Allgemein

In Allgemeinen kann man bestimmen:

• Ob man sich die Startseite anzeigen lassen möchte (siehe 2. Willkommensscreen).
• Ob Pinselstriche und Effekte skalierbar sind. Das bedeutet, hier wird bestimmt, ob die Größenverhältnisse von Pinselstrichen und Effekten bei einer Änderung der Objektgröße sich mit verändern sollen.
• Wie viele Schritte man zurückgehen kann. Z.B., wenn man bei einer Datei 50x etwas gemacht hat (und sei es nur das Verschieben von Elemente, siehe 6. Verlauf), kann man 20 Schritte zurückgehen.
• Welche Interpolation angewandt werden soll. Interpolation heißt so viel wie verfälschen, und damit ist die Berechnung gemeint, wenn ein Element, das einen Verlauf besitzt, z.B. vergrößert oder verkleinert wird. Man kann sich zwischen 4 Typen entscheiden:
• Bikubische Interpolation (Standard): In den meisten Fällen führt diese Auswahl qualitativ und schärfentechnisch zu den besten Ergebnissen.
• Bilinear: Mindere Qualität als die Bikubische Interpolation, aber bessere als die weiche Interpolation.
• Weich: Das Bild bekommt eine reduzierte Detailschärfe mit einem leicht verwischten Effekt. Diese Einstellung sollte man erst dann verwenden, wenn die anderen Einstellungen zu unerwünschten Störungen führen.
• Nächster Nachbar: führt zu harten Kanten mit scharfen Kontrasten ohne Verwischungen. Dieser Effekt ähnelt dem Herein- und Herauszoomen bei einer Grafik.
• Ob man eine schnellere, aber weniger präzise Neuauflösung wünscht. D.h.: Wenn man eine Bitmapdatei skaliert und diese Option aktiviert ist, braucht das Programm zwar weniger Zeit zum Berechnen des Bilder, es wird aber gröber berechnet.

Bei Speichern kann man angeben:
• Ob sog. Einzelseitenminiaturen gespeichert werden sollen. Dieses Kästchen ist für den Import bzw. das Öffnen einer Datei von Bedeutung. Ist das Kästchen aktiviert, wird eine Vorschau aller Seiten mitgespeichert.
• Ob .fw.png angehängt werden soll. Dies bezieht sich ebenfalls auf das Speichern einer Datei. Deaktiviert man dieses Kästchen, wird die Datei in png gespeichert.

Bei Benutzeroberfläche unter Arbeitsbereich kann man bestimmen, ob die Bedienfeldsymbole automatisch minimiert werden sollen. D. h: Normalerweise bleiben die Paletten geöffnet, sobald man auf die Leinwand klickt. Aktiviert man diese Option, werden die geöffneten Paletten wieder geschlossen. Wie schon in 3.10 gezeigt, kann man mit einem einfachen Rechtsklick auf die Palette diesen Schritt rückgängig machen, wenn man nicht die Voreinstellungen öffnen möchte.

Unter Standardfarben lassen sich die Standardfarben für Pinselstrich, Füllung und Hervorhebung bestimmen. Hier werden im Grunde die Farben für Konturen und Flächen sowie für das Hervorheben von Pfaden festgelegt.

 
Bei Alle Warnmeldungen zurücksetzen ist lediglich das Aktivieren oder Deaktivieren der Warnmeldungen gemeint. Alternativ kann man unter Befehle ebenfalls auf diese Option zurückgreifen.

Bilder
Voreinstellungen: Allgemein


8.2 Bearbeitung

Unter Optionen bei Bearbeiten hat man folgende Möglichkeiten

Objekte beim Zuschneiden löschen. In der Praxis heißt das für Pixel, die über einem Begrenzungsrahmen stehen, oder wenn z.B. die Leinwandgröße verändert wurde, dass das Außenstehende gelöscht wird. Das gilt jedoch nur bei Bitmaps.
Pfade beim Konvertieren in Auswahlrahmen löschen bedeutet, dass ein Pfad gelöscht wird, sobald dieser in einen Auswahlrahmen konvertiert wurde.
• Unter Pinselstärke in Malen-Cursor wird die Größe und Form der Werkzeugzeiger eingestellt
• Aktiviert man das Kästchen für Präzise Cursor, werden alle Werkzeug-Cursorsymbole durch ein Fadenkreuz ersetzt.

Bei den Stift-Optionen kann man lediglich einstellen, ob die Stiftvorschau angezeigt werden soll (heißt, dass eine Vorschau des nächsten Pfadsegments angezeigt wird, das erzeugt wird, sobald man auf das Stift-Werkzeug klickt) und ob einfarbige Punkte angezeigt werden soll, ausgewählte Punkte werden also mattiert und nicht ausgewählte Punkte einfarbig angezeigt.

Zu den Zeigeroptionen hat man folgende Möglichkeiten:

Mausaktiviert: hebt auswählbare Objekte hervor, die man per Mausklick auswählen kann.
Füllungsgriffe anzeigen: ermöglicht die Bearbeitung von Füllungen auf der Leinwand. Mit den Füllungsgriffen sind bei einem Verlauf der schwarze Strich mit einem weißem sternenähnlichen Symbol und einem Quadrat gemeint.

Bilder
Füllungsgriffe


 
Zieh-Vorschau: zeigt beim Ziehen eine Vorschau der neuen Objektposition an.
• Der Markierungsabstand legt den Abstand des Mauszeigers fest, der gegeben sein muss, um ein Objekt auswählen zu können. Es können maximal 10px ausgewählt werden.
9-Slice-Skalierungs-Option: Diese Option bewirkt bei automatischen Formen (wie bei einem Stern oder einem Pfeil, die man bei den Werkzeugen unter Rechteck findet), dass die Gruppierung aufgehoben wird, sobald das 9-Slice-Skalierung-Werkzeug verwendet wird.

Bilder
Voreinstellungen: Bearbeitung


 

8.3 Hilfslinien und Raster

Unter dieser Option verbergen sich im ersten Teil des Fensters die einzelnen Farben und Eigenschaften der Hilfslinien, Raster etc. Unter Ausrichtungsabstand legt man fest, wie nahe (in Pixel) ein Objekt z.B. an einer Hilfslinie sein muss, damit diese andockt. Jedoch muss dafür die Option Am Raster ausrichten bzw. An Hilfslinien ausrichten aktiviert sein. Unter den Rastereinstellungen wird die Größe des Rasters eingestellt. Mehr dazu findet man unter 3.2 Raster.

Bilder
Voreinstellungen: Hilfslinien und Raster


 

8.4 Text

Bei den Einstellungen für den Text kann man den Zeilenabstand (der in % angegeben ist) und die Grundlinienverschiebung, die regelt, wie nahe sich der Text oberhalb oder unterhalb seiner Grundlinie befindet, festlegen.

Die Optionen Schriftnamen auf Englisch, Größe der Schriftvorschau und Anzahl der zuletzt verwendeten Schriften beziehen sich auf den Menüpunkt Text. Die Standardschrift legt eine Schrift fest, die angezeigt werden soll, wenn fremde Schriften nicht auf dem Computer sind. Das kann passieren, wenn man eine Schrift löscht und man diese noch in einem Dokument verwendet hat oder von jemand anderem ein Dokument bekommen hat, wo eine Schrift verwendet wurde, die sich ebenfalls nicht auf dem PC befindet.

Bilder
Voreinstellungen: Text


8.5 Photoshop-Datei importieren/öffnen

Allgemein:

Import-Dialogfeld anzeigen: Zeigt beim Import das entsprechende Dialogfeld an.
Öffnen-Dialogfeld anzeigen: Zeigt beim Öffnen (unter Datei>Öffnen) oder via Drag&Drop das entsprechende Dialogfeld an.

Benutzerdefinierte Einstellungen für die Dateikonvertierung:

Bildebenen: Hier wird entschieden, ob die Bitmap-Bilder, die mit Effekten versehen wurden, bearbeitbar bleiben oder auf die Hintergrundebene reduziert werden.
Text: Hier gibt man an, ob der Text bearbeitbar bleiben oder auf die Hintergrundebene reduziert werden soll.
Formebenen: Hier kann man angeben, ob die Pfade bearbeitbar bleiben sollen, ebenso wie die Effekte, eine auf den Hintergrund reduzierte Bitmapbilder-Ebene sein soll, oder ob die Pfade auf eine Hintergrundebene reduziert werden soll, aber die Effekte bearbeitbar bleiben sollen.
Ebeneneffekte: Hier wird eingestellt, ob Live-Effekte aus Photoshop durch ähnliche Fireworks-Filter ersetzt werden.
Beschneidungspfadmasken: Ausgewählt bedeutet das, dass die Dateien gerastert und die Schnittmasken entfernt werden und dass deren Erscheinungsbild beibehalten wird.
Einstellungsebenen: Hier wird festgelegt, ob das Erscheinungsbild der Einstellungsebenen beibehalten werden soll (heißt: eine importierte Photoshopdatei behält das Erscheinungsbild der einzelnen Ebenen).

Bilder
Voreinstellungen: Photoshop-Datei importieren/öffnen


 

8.6 Starten und Bearbeiten

Unter Starten und Bearbeiten hat man folgende Auswahlmöglichkeiten:

Beim Bearbeiten mit externer Anwendung: Hier wird festgelegt, was passieren soll, wenn die Datei aus einer externen Anwendung heraus geöffnet wird.
Beim Optimieren mit externer Anwendung: Hier wird festgelegt, was passieren soll, wenn die Datei aus einer externen Anwendung heraus optimiert wird.

Diese zwei Möglichkeiten sind noch jeweils in drei auswählbare Optionen eingeteilt:

Bilder
Optionen


Immer PNG-Quelldatei verwenden: Hier wird die PNG-Datei von Fireworks automatisch geöffnet. Wenn ein platziertes Bild aktualisiert wird, wird die Veränderung in der PNG-Quelldatei und auch am entsprechenden Bild vorgenommen. Dazu muss es jedoch im Designhinweis als Quelle für das platzierte Bild angegeben worden sein.
Nie PNG-Quelldatei verwenden: Ist diese Option ausgewählt, wird das platzierte Bild von Fireworks automatisch geöffnet, unabhängig davon, ob eine PNG-Quelldatei vorhanden ist. Änderungen jedoch werden nur am platzierten Bild vorgenommen.
 
Beim Start fragen: Diese Option kann man auswählen, wenn bei jedem Start nachgefragt werden soll.

Bilder
Voreinstellungen: Starten und Bearbeiten


8.7 Zusatzmodule

Bei den Zusatzmodulen kann man Folgendes auswählen:
Photoshop-Zusatzmodule: Hier kann man unter Durchsuchen Photoshop-Plug-Ins suchen und auswählen. Diese werden später im Menüpunkt Filter angezeigt.

 
Bei Texturen und Muster passiert genau das Gleiche wie bei Photoshop-Zusatzmodule.

Bilder
Voreinstellungen: Zusatzmodule


Ende

So :) Das war mein Beitrag zu Fireworks CS6 Grundlagen Teil 01: Kleine Übersicht über Fireworks CS6 und die Benutzeroberfläche. Ich hoffe, ich konnte euch weiterhelfen und würde mich über offene Kritik, was gut war und was ich hätte besser machen können, freuen.

Bis zum nächsten Tutorial :D

Eure
Black-Hat

DVD-Werbung

Passend zum Inhalt empfehlen wir: Objektorientierte Web-Programmierung mit PHP

Hier kommt dein ausführlicher Wegweiser in die moderne Webentwicklung mit PHP! Lerne detailliert und praktisch die objektorientierte Entwicklung mit PHP kennen und lass dir von Jan Brinkmann zeigen, wie du deine Kenntnisse auf ein neues Level anhebst und beschleunigst! Von den Grundlagen über die richtige Denkweise bis hin zur finalen Umsetzung erfährst du hier, wie dynamische Webentwicklung mit der Skriptsprache PHP funktioniert. 10 Stunden Video-Training mit Basics, fortgeschrittenen Konzepten, wichtigen Entwurfsmustern und praktischen Projekten erwarten dich!

  • 88 Lektionen in 10 Stunden Video-Training zur objektorientierten Web-Programmierung mit PHP
  • Von den Basics bis zur Praxis und als Bonus ein vollständiges HTML/CSS-Template
  • Von Jan Brinkmann, einem Entwickler aus Leidenschaft mit über 15 Jahren Web- und App-Erfahrung

Sprachen lernen war nie so einfach! Lass dir zeigen, wie es dir auch mit PHP gelingt!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von schuloe
  • 02.12.2014- 03:43

Hallo Black-Hat
Dankeschön für den ersten Teil des Tutorials.
Ist noch eine Fortsetzung geplant? Ich würde mich sehr darüber freuen, da es wenig deutschsprachiges Material für Fireworks gibt.

Portrait von schub
  • 11.08.2013- 21:09

Vielen Dank für das Tutorial!

Portrait von nanny2905
  • 10.08.2013- 13:21

Vielen Dank! Sehr übersichtlich, toll gegliedert, perfekt für absolute Programm-Anfänger. Ich bin gespannt auf Teil 2!

Portrait von MicroSmurf
  • 10.08.2013- 13:16

Vielen Dank. Mal sehen, ob mir das was bringt.

Portrait von BOPsWelt
  • 10.08.2013- 13:15

Wirklich super, vielen Dank! :-)

Portrait von Pinochio
  • 10.08.2013- 12:59

Umfangreich und sehr informativ,Danke sehr

Portrait von Kundentest
  • 10.08.2013- 12:52

Herzlichen Dank für das sehr ausführliche Tutorial.

Portrait von ARTelier
  • 10.08.2013- 12:20

Sehr ausführliche Einführung - herzlichen Dank! Da ich meine Webseite demnächst neu aufbauen will, kann ich das sehr gut gebrauchen und bin gespannt auf die weiteren Folgen :-)

Portrait von GillaGrebe
  • 10.08.2013- 11:24

Super Einführung,. Danke :-)

Portrait von MaoMao
  • 10.08.2013- 11:17

Vielen dank für das Umfangreiche und sehr gut dokumentierte Tutorial. Das ist ein super Nachschlagewerk.

Portrait von Dineria
  • 10.08.2013- 11:17

Danke für die Reihe über Fireworks und den umfangreichen ersten Teil! :-) Bisher kannte ich FW nur vom Namen und dass es was mit Webdesign zu tun hat, jetzt bin ich schlauer und freue mich auf mehr! :-)


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
x
×
×