Los geht s: Ein Bild für das Web optimieren

Transkript

1 3 Fireworks 4 (Nitty Gritty) ISBN: Los geht s: Ein Bild für das Web optimieren Genug der Theorie. Lassen Sie uns mit einer einfachen Aufgabe starten, mit der Sie einige Grundfunktionen und Arbeitsweisen von Fireworks kennenlernen. Wir werden ein Bild für die Darstellung in einer Website optimieren, d.h. eine vorliegende Bilddatei direkt in Fireworks öffnen, das Bild nachträglich bearbeiten und es in einem Format exportieren, das für die Darstellung im Internet optimal geeignet ist. 3.1 Eine Bilddatei öffnen Fireworks versteht viele Formate und kann Dateien, die in anderen Programmen erstellt wurden, öffnen. Hierzu gehört beispielsweise Photoshop, CorelDraw, Illustrator oder Freehand. Das Besondere daran: Eine vorherige Konvertierung ist nicht notwendig und viele wichtige Bildinformationen (zum Beispiel Masken und Ebenen) bleiben erhalten und können in Fireworks weiterbenutzt werden. Wenn Sie eine Datei in einem fremden Format öffnen, erstellt Fireworks automatisch ein neues Arbeitsdokument im Fireworksformat PNG. Die Ausgangsdatei bleibt davon vollkommen unberührt. Für den Import von Fremddateien gibt es verschiedene Einstellungsmöglichkeiten, die von dem jeweiligen Programm abhängen. Wir werden im Teil 2 näher auf die Import- und Exportoptionen eingehen. Um eine Bilddatei in Fireworks zu öffnen, wählen Sie Datei/Öffnen aus dem Programm-Menü. Je nachdem, ob Sie mit dem Betriebssystem Windows oder Macintosh arbeiten, sehen Sie nun ein Fenster mit dem Öffnungsdialog wie in Abbildung 3.1 oder Abbildung 3.2. Sie können nun auf Ihrer Festplatte oder einer CD nach dem gewünschten Bild suchen. Wenn Sie Los geht s: Ein Bild für das Web optimieren 53

2 eine Datei auswählen, wird Ihnen rechts eine Vorschau des Bildes angezeigt (sofern eine Vorschau vorhanden ist). Wählen Sie ein beliebiges Bild aus, es sollte sich jedoch um eine Bitmap-Datei handeln. Geeignet ist zum Beispiel ein eingescanntes Foto oder ein Bild von einer Bild-CD. Wenn Sie kein geeignetes Bild finden, können Sie auf die im Fireworks-Verzeichnis enthaltenen Beispieldateien zurückgreifen oder Sie laden sich ein Bild aus dem Internet (siehe hierzu die Adressen im Anhang). Bild 3.1: Der Öffnen-Dialog unter Windows. Unter DATEITYP sehen Sie, welche Dateiformate Fireworks direkt öffnen kann. Wenn Sie unter Windows arbeiten und nicht genau wissen, welchen Dateityp das Bild hat, das Sie öffnen wollen, sollten Sie im Öffnen-Dialog unter DATEITYP unbedingt ALLE LESBAREN DATEIEN oder ALLE DATEIEN aktivieren, sonst werden Ihnen nicht alle Dateien angezeigt. 54 Eine Bilddatei öffnen

3 Bild 3.2: Und so sieht es auf dem Mac aus. Fireworks zeigt, wenn möglich, eine Vorschau des ausgewählten Bildes an. Sie können diese Funktion jedoch ausschalten, dann geht die Suche in umfangreichen Verzeichnissen schneller. Bilder für die Darstellung im Internet aufzubereiten ist sicherlich eine Standardaufgabe bei der Erstellung von Webseiten. Häufig bekomme ich Material für Broschüren oder Kataloge, die für den Druck bestimmt sind. Hieraus soll dann ebenfalls noch eine Webseite gebastelt werden. Die für den Druck bestimmten Bilder können natürlich nicht direkt in eine Webseite übernommen werden, denn die Auflösung ist zu hoch und damit auch die Dateigröße und die Ladezeit, das Dateiformat ist ungeeignet (meistens TIF oder EPS) und lässt sich nicht in jedem Browser darstellen, die Maße des Bildes entsprechen meist nicht den Vorgaben für das Layout der Webseite. Los geht s: Ein Bild für das Web optimieren 55

4 3.2 Ansichtsgröße In Abbildung 3.4 sehen Sie das Dokumentenfenster von Fireworks mit einer geöffneten Bilddatei. Am gestreiften Rahmen erkennen Sie, dass der Bitmap-Modus aktiv ist. Sie können dem Dokumentenfenster aber noch weitere Informationen entnehmen: In der Titelleiste steht der Name der Ursprungsdatei sowie die momentane Ansichtsgröße von 25%. Fireworks öffnet große Bilder automatisch so, dass sie auf den Bildschirm passen, also in einer verkleinerten Ansicht, wenn das Bild zu groß ist. Im unteren Rand des Dokumentenfensters kann die Ansichtsgröße, auch Zoom genannt, eingestellt werden. Wenn Sie mit der Maus auf den kleinen Pfeil neben 25% klicken, können Sie aus einem Popup- Menü eine Verkleinerung bzw. Vergrößerung der Ansicht in Prozenten auswählen. Sie können nur die hier vorhandenen Vorgaben benutzen, eine Eingabe von Zwischengrößen ist leider nicht möglich. Bild 3.3: Mögliche Ansichtsgrößen für das Dokument Es ist wichtig, dass Sie die Ansichtsgröße nicht mit der eigentlichen Bildgröße verwechseln. Ändern Sie in Fireworks die Ansichtsgröße eines Bildes, sehen Sie es nur in einer anderen Vergrößerung. Die Bildgröße, also die Anzahl der Pixel im Bild, wird dadurch nicht verändert. 56 Ansichtsgröße

5 Bild 3.4: Ein in Fireworks geöffnetes Bild im TIFF-Format Außerdem erkennen Sie, dass das Bild einen unschönen schwarzen Rand hat, den wir als Erstes entfernen wollen, indem wir einen Bildausschnitt wählen und das Bild zuschneiden. 3.3 Bild zuschneiden Wählen Sie über das Menü den Befehl Bearbeiten/Dokument zuschneiden. Der Mauszeiger sollte sich nun in das Symbol für das Zuschneide-Werkzeug verwandeln und der Inhalt des Dokumentenfenster von einer Auswahl eingefasst sein. Sie können nun mit gedrückter Maustaste die Auswahl verändern, also beispielsweise so verkleinern, dass die schwarzen Ränder nicht mehr in der Auswahl erscheinen oder Sie können einen passenden Bildausschnitt wählen. Durch Doppelklick innerhalb der Auswahl schließen Sie diesen Vorgang ab und Ihr Dokument wird entlang der Auswahl beschnitten. In anderen Programmen nennt man das auch Auswahl freistellen. Los geht s: Ein Bild für das Web optimieren 57

6 Bild 3.5: Mit dem Zuschneide-Werkzeug wurde ein Bildbereich ausgewählt. Mit einem Doppelklick innerhalb der Auswahl kann das Bild beschnitten werden. Wenn Sie das Bild doch nicht zuschneiden wollen, reicht ein Klick mit der Maus außerhalb der Auswahl und die Auswahl wird aufgehoben. Sie können mit Fireworks alle Werkzeuge und Funktionen getrost ausprobieren. Solange Sie die Änderung nicht speichern und das Dokument schließen, gibt es mehrere Möglichkeiten, Arbeitsschritte wieder rückgängig zu machen. Jeweils den letzten Vorgang können Sie über den Menübefehl BEARBEITEN/ WIDERUFEN... oder die Tastenkombination (Strg)+(Z) (Win) bzw. (Befehl)+(Z) (Mac) rückgängig machen. Um die zuletzt gespeicherte Version wiederherzustellen, aktivieren Sie den Menübefehl DATEI/ WIEDERHERSTELLEN. 3.4 Auflösung und Bildgröße einstellen Links neben der Ansichtsgröße sehen Sie eine Angabe über die Dateigröße in Pixel. Klicken Sie in dieses Feld, werden die Angaben für Breite, Höhe und die Auflösung in Pixel bzw. Pixel pro Zoll angezeigt. 58 Auflösung und Bildgröße einstellen

7 Bild 3.6: Die Größe der geöffneten Bilddatei in Pixel In diesem Beispiel ist das Bild natürlich viel zu groß für eine Webseite. Auch die Auflösung von 243 Pixel/Zoll muss geändert werden. Dazu ruft man mit dem Menübefehl Modifizieren/Bildgrösse ein Dialogfeld auf, in dem Bildgröße und Auflösung geändert werden können. Die Pixelabmessung gibt die eigentliche Bildgröße der Datei an, also wie viel Pixel das Bild hoch und breit ist. Die Druckgröße gibt an, wie groß die Datei bei der eingestellten Auflösung und Pixelabmessung ausgegeben wird. Bild 3.7: Das Dialogfeld für die Einstellung der Bildgröße Los geht s: Ein Bild für das Web optimieren 59

8 3.4.1 Proportionen beibehalten Wenn die Funktion Proportionen beibehalten aktiviert ist, wird die Bildgröße automatisch proportional geändert. Neben den Breitenund Höhenangaben erscheint ein Verkettungssymbol. Wenn Sie beispielsweise wissen, dass Ihr Bild eine Breite von 400 Pixel haben soll, tragen Sie diese Zahl ein und die richtige Höhe wird automatisch berechnet. In den meisten Fällen sollten Sie diese Funktion also aktivieren, um das Bild nicht zu stauchen oder zu dehnen Bild neu auflösen Wenn Sie die Einstellung Bild neu auflösen deaktivieren, behält das Bild seine feste Dateigröße, also die Anzahl der Pixel, bei. Es kann dann nur das Verhältnis zwischen Bildformat und Auflösung verschoben werden. Wird die Auflösung verkleinert, erhöhen sich die Bildmaße und umgekehrt. Das ist in unserem Fall nicht erwünscht, wir wollen das Bild (und zwar die Datenmenge) verkleinern. Bild neu auflösen sollte also wie in Abbildung 3.7 zu sehen ist, aktiviert sein. Stellen Sie im Dialogfeld zunächst die Auflösung ein, also 72 Pixel/ Zoll. Nun können Sie unter Pixelabmessung noch die gewünschte Höhe oder Breite in Pixel eintragen. In unserem Beispiel soll das Bild eine Breite von 400 Pixel haben. Sie können unter Dateigröße außerdem die Einheit von Zoll auf Zentimeter umstellen. Klicken Sie nun auf OK, wird das Bild neu berechnet. In unserem Fall wird das Bild verkleinert, es werden also Pixel entfernt. Bild 3.8: Die neuen Einstellungen für die Bildgröße 60 Auflösung und Bildgröße einstellen

9 Die Bildansicht muss nun von 25% auf 100% vergrößert werden. Sie können hierzu natürlich das Aufklappmenü benutzen, aber es geht auch schneller: Mit einem Doppelklick auf das Zoom-Werkzeug in der Werkzeugleiste stellen Sie aus jeder beliebigen Vergrößerung oder Verkleinerung die Ansicht wieder auf 100% zurück. 3.5 Bild optimieren Bei der Optimierung von Bildern für die Darstellung im Internet gibt es ein Problem: Sie wissen nicht, auf welchem Betriebssystem und Monitor sich der Betrachter die Webseite ansehen wird Gammavorschau Die Helligkeit eines Monitors wird in Gamma gemessen. Macintoshund Windows-Rechner benutzen unterschiedliche Gammawerte, d.h. ein Bild, das unter Windows optimiert wurde, ist auf dem Macintosh zu hell und umgekehrt. Fireworks bietet eine einfache Möglichkeit, zwischen den unterschiedlichen Gammawerten umzuschalten, sodass Sie einen Eindruck bekommen, wie das Bild auf der jeweils anderen Plattform aussieht. Wenn Sie unter Windows arbeiten, wählen Sie den Menübefehl Ansicht/Macintosh Gamma. Nun sehen Sie eine deutlich hellere Ansicht des Bildes. Mac-Anwender müssen hierfür Ansicht/Fenster Gamma wählen. Sie sehen dann eine dunklere Darstellung des Bildes. Bei der Bildoptimierung sollten Sie also die Gammavorschau hin und wieder umschalten. Optimieren Sie das Bild so, dass unter Windows die Farben nicht zu dunkel und beim Macintosh die Farben nicht zu hell und verwaschen erscheinen Tonwertkorrektur Oft hat man das Problem, dass die Bilder zu wenig Kontrast haben und zu verwaschen aussehen. Sie sollten dann nicht sofort zu der Funktion Helligkeit/Kontrast greifen, die sich über das Menü Xtras/Farbe anpassen/helligkeit/kontrast aufrufen lässt, son- Los geht s: Ein Bild für das Web optimieren 61

10 dern lieber erst einen Blick auf das Histogramm des Bildes werfen, um gegebenenfalls eine Tonwertkorrektur vorzunehmen. Diese Möglichkeit verbirgt sich bei Fireworks hinter dem etwas nichts sagenden Namen Stufen. Mit dem Menübefehl Xtras/Farbe anpassen/stufen... rufen Sie das Dialogfeld Stufen auf, in dem Sie die Tonwerte überprüfen und korrigieren können. Sie können diese Funktionen zur Bildbearbeitung nur auswählen, wenn Fireworks sich im Bitmap-Modus befindet. Den Bitmap-Modus aktivieren Sie mit einem Doppelklick auf Ihr Bild im Dokumentenfenster. Bild 3.9: Das Dialogfeld STUFEN gibt Auskunft über den Tonwertumfang eines Bildes. Das Histogramm in Abbildung 3.9 zeigt die Verteilung der Pixel auf die verschiedenen Helligkeitswerte. Sind im unteren und oberen Farbbereich keine Pixel (links und rechts), so bedeutet dies, dass nicht der gesamte Tonwertumfang benutzt wird. Durch Verschieben der schwarzen und weißen Regler unter dem Histogramm bis an die Kanten des Diagramms werden die vorhandenen Tonwerte über die gesamte Skala gespreizt und so besser ausgenutzt. Dadurch werden Schwarz- und Weißpunkte im Bild neu gesetzt und der Kontrast erhöht. Der graue Regler dient zur nachträglichen Gammakorrektur und verschiebt die Helligkeit in den Mitteltonbereichen. Wenn Sie Vorschau aktiviert haben, können Sie die Änderungen direkt im Bild verfolgen. 62 Bild optimieren