Kapitel 9 Photo Paint Bild mit Text für das Internet optimieren

Transkript

1 Eine der häufigsten gestellten Fragen von Anfängern ist sicherlich: Ich möchte eine Schrift oder Button für den Einsatz auf meiner Homepage basteln, wie mache ich den Hintergrund transparent? Wie das geht, ob es immer notwendig ist und in welches Dateiformat konvertiert werden muss, erfahren Sie hier. Dieser Workshop kann keine Anleitung für das Basteln einer Homepage sein, er erklärt ausschließlich wie Sie Web taugliche Grafiken und Bilder herstellen. Photo Paint 9 öffnen und Bild laden 1 Im Windows Verzeichnis >Programme finden Sie >Corel Draw9, im Unterverzeichnis öffnen Sie dann >Photo Paint9. Sollten Sie Photo Paint zum ersten Mal öffnen, müsste das Andock-Fenster Objekte sichtbar sein. Ist dies nicht der Fall, klicken Sie in der >Eigenschaftsleiste auf den Button >Objekte, alternativ geht das auch mit (Strg+F7). Das Andock-Fenster Objekte ist eines der wichtigsten Steuerelemente in Photo Paint und sollte bei jeder Arbeit aktiv sein. Vielleicht werden Sie fragen, warum erst das Andock-Fenster Objekte öffnen und danach die eigentliche Datei? Beim nachträglichen Öffnen würde das >Andock-Fenster Objekte über dem Bild oder der Datei liegen und die Sicht beeinträchtigen. Für die folgenden e ist das Andock-Fenster Objekte unverzichtbar, es wird als Steuerzentrale für die wichtigsten Funktionen genutzt Aktivieren Sie das Hilfsmittel Objekt-Auswahl und laden Sie über >Datei>Öffnen von der CD im Verzeichnis >Kapitel 9>Zubehör das Bild (man bezeichnet es auch als Datei) >WWW. Das Bild mit dem Schriftzug WWW wurde im Kapitel 8 hergestellt. Es hat eine für das Internet übliche Auflösung von 72 DPI. Die zusätzlichen Anforderungen die das Internet stellt, werden in den nächsten en berücksichtigt. Um vor eventuellen Überraschungen sicher zu sein, sollten Sie Ihr Dokument von Anfang an über >Datei speichern im Photo Paint eigenen CPT Dateiformat speichern. Je nach Konfiguration Ihres Rechners ist es leider nicht ganz auszuschließen, dass Corel Photo Paint ohne ersichtlichen Grund mit einer Fehlermeldung aufwartet und jeden weiteren Dienst verweigert. Nur durch einen Neustart von Corel Photo Paint ist ein Weiterarbeiten möglich. Ohne eine Speicherung sind die Daten verloren und Sie dürfen dann wieder ganz von vorn anfangen. Laut einem aktuellen Werbespruch wäre das wirklich schade, schade, schade.

2 2 Das Ziel ist, eine höchstmögliche Qualität bei geringer Ladezeit zu erreichen. Unglücklicherweise stehen diese Forderungen zueinander im Widerspruch. In den meisten Fällen wird ein Kompromiss die Lösung sein. Die im Internet üblichen Dateiformate sind GIF (graphics interchange File) und JPEG (Joint Photographic Experts Group), ein weiteres Dateiformat ist PNG (portable network graphics) wird aber zur Zeit nicht von allen Browsern unterstützt. Das geeignete Dateiformat finden - JPEG? Als allgemeine Empfehlung gilt, für Grafiken mit wenigen Farben ist das geeignete Format GIF, es erlaubt zusätzlich den Hintergrund oder einen Teil davon transparent zu gestalten. Für Fotos ist das Format JPEG die richtige Wahl. Letztendlich hilft aber nur Ausprobieren, um das bestmögliche Resultat zu finden. Nach der Konvertierung beurteilen Sie das Ergebnis am besten im Microsoft Frontpage Express (gehört zum Lieferumfang von Windows) oder Microsoft Frontpage, wenn vorhanden. Probieren Sie zuerst die Konvertierung in ein JPEG, über >Datei >Exportieren>Exportieren wird die Konvertierung eingeleitet, im Dialogfenster suchen Sie ein Verzeichnis auf Ihrer Festplatte, geben einen Dateinamen ein, wählen als Dateityp: JPG-JPEG- Bitmaps und klicken auf >Speichern. Die Photo Paint Warnung: Objekte werden in der exportierten Datei mit Hintergrund zusammengeführt, können Sie beruhigt mit >Ok bestätigen. Danach öffnet sich das eigentliche Dialogfenster JPEG exportieren, hier sind die optimalen Einstellungen, Komprimierung 28, Glättung 28, Unterformat: Optional (4:4:4) und die Checkbox für Optimieren wird aktiviert. Die Änderungen beurteilen Sie durch einen Klick auf die Schaltfläche >Vorschau. Haben Sie auf >OK geklickt, hat Photo Paint durch diesen Vorgang eine Kopie erzeugt, die Original Photo Paint Datei ist weiterhin unverändert vorhanden. Das Ergebnis ist eine akzeptable Qualität mit einer Dateigröße von 10 KB. Mal sehen, was Sie im nächsten mit einem anderen Dateiformat erreichen.

3 3 Wenn das Ausgangsbild nicht mehr geöffnet ist, laden Sie es erneut von der CD im Verzeichnis >Kapitel 9>Zubehör>WWW. Zuerst beschneiden Sie das Bild bis auf die notwendigen Details, also die Schrift und den Lichteffekt. Aktivieren Sie hierzu das Hilfsmittel Rechteckmaske und ziehen einen Rahmen außerhalb des Lichteffektes, dann führen Sie aus >Bild>Beschneiden>Auf Maske. Die nicht mehr benötigte Maske löschen Sie über >Maske>Entfernen. So ist das Bild auf den wesentlichen Inhalt reduziert. Führen Sie dann wieder aus >Datei >Exportieren>Exportieren, im Dialogfenster suchen Sie wieder ein Verzeichnis, vergeben einen Dateinamen und wählen als Dateityp: GIF CompuServe-Bitmap. Die folgende Frage, ob Sie das Bild ebnen möchten, beantworten Sie mit >OK. Danach gelangen Sie in das Dialogfenster In Palettenbild konvertieren, hier wird das Bild in den 8 Bit Modus mit einer Darstellung von max. 256 Farben konvertiert. Bitte übernehmen Sie die folgenden Einstellungen: Glätten: 50, Palette: Optimiert, Rastern: Geordnet, Rasterintensität: 100 und Farben reduzieren Sie auf 55. Ziel ist, die Farben soweit zu reduzieren ohne einen sichtbaren Qualitätsverlust im rechten Vorschaufenster zu erhalten, je geringer die Anzahl der benötigten Farben ist, umso kleiner die Dateigröße. Haben Sie mit >OK bestätigt, gibt Photo Paint erneut die Warnung, quittieren Sie auch diese mit >OK. Nun sind Sie endlich im Dialogfenster >GIF-Export angelangt, hier aktivieren Sie beide Checkboxen für Transparenz: Keine und Interlace Image. Durch aktives Interlace Image wird das Bild im Browser nach und nach aufgebaut. Diesmal ist das Resultat eine Dateigröße von 14 KB. Nun ist bei Ihnen Entscheidungsfreude angesagt, nehmen Sie das JPEG (der Lichteffekt zeigt einen hervorragenden Verlauf, die Schrift selbst wirkt etwas unscharf) oder ist das GIF die bessere Wahl? (der Lichteffekt wirkt etwas körniger, dafür ist die Schrift auch geringfügig schärfer dargestellt). Für eine genaue Beurteilung der Unterschiede sollten Sie die beiden Dateien in einem WEB Editor Programm Ihrer Wahl öffnen und dort den Hintergrund auf schwarz einstellen. Sie erinnern sich an den Hinweis, für die Webgestaltung müssen Sie fast immer einen Kompromiss zwischen Qualität und Dateigröße (gleich Ladezeit) eingehen. Hinweis: Würden Sie nun versuchen, über eine weitere Reduzierung der Farben eine kleinere Dateigröße zu erreichen, müssen Sie Qualitätseinbußen in Kauf nehmen. Grund hierfür ist der Lichteffekt, mit weniger Farben wird der Verlauf mit unschönen Streifen dargestellt. Das geeignete Dateiformat finden - GIF (ohne Transparenz)

4 Veränderte Gestaltung - Dateiformat GIF (ohne Transparenz) 4 Wenn Sie nun unbedingt eine kleinere Dateigröße erreichen wollen, müssen Sie das Pferd neu satteln. Entweder Sie reduzieren die Größe des gesamten Bildes, dann wird die Schrift etwas kleiner im Browser dargestellt, oder Sie gestalten das Bild neu und sehen was nach der Konvertierung rauskommt. Sie ahnen es bereits, um ein optimales Resultat für das Web zu erstellen, ist immer viel Ausprobieren angesagt. Öffnen Sie für einen weiteren Versuch über >Datei>Öffnen von der CD im Verzeichnis >Kapitel 9>Zubehör>WWW-kL. Bei diesem Bild wurde, wie in Kapitel 8 beschrieben, für das Leuchten die Voreinstellung kleines Leuchten angewendet. Anschließend wurde wie in 3 in diesem Kapitel erklärt, mittels Rechteckmaske beschnitten. Wegen dem kleineren Lichteffekt kann das Bild mehr beschnitten werden. Also haben wir bereits einen kleinen Vorteil, ohne das die eigentliche Schriftgröße verändert wird. Jetzt führen Sie noch einmal aus >Datei>Exportieren >Exportieren, vergeben einen Dateinamen, bestimmen Dateityp: GIF CompuServe-Bitmap, die Frage von Photo Paint beantworten Sie mit >Ja, im Dialogfeld In Palettenbild konvertieren sind die Einstellungen: Glätten: 50, Palette: Optimiert, Rastern: Geordnet, Rasterintensität: 100 und Farben können Sie diesmal auf 28 reduzieren. Danach bestätigen Sie die Photo Paint Warnung mit >Ok, im Dialogfenster GIF-Export aktivieren Sie beide Checkboxen für Transparenz: Keine und Interlace Image. Als Ergebnis haben Sie nun eine Schrift, mit einem leider nicht mehr ganz so dramatischen Leuchteffekt, aber dafür ist die Datei nur noch 8 KB groß. Wie bereits oben erwähnt, welchen Kompromiss Sie wählen, müssen Sie ganz allein treffen.

5 5 Bleibt noch die Frage zu klären, bringt die Transparenz einen Vorteil oder nicht? Die Antwort finden Sie ganz einfach heraus, durchs Ausprobieren. Öffnen Sie mit >Datei>Öffnen von der CD im Verzeichnis >Kapitel 9>Zubehör>WWWohne. In diesem Bild wurde der Lichteffekt entfernt, damit lässt sich die Frage, Transparenz - ja oder Transparenz- nein einfacher nachvollziehen. Außerdem konnte es noch mehr mit der Rechteckmaske be-schnitten werden. Bei dem bisher verwendetem Beispiel benötigt der Lichteffekt auch schwarze Teile des Bildes, zur Darstellung des weichen Übergangs. Mit anderen Worten, hier bleibt nicht mehr viel übrig was transparent gestaltet werden könnte. Wiederholen Sie das Exportieren im Dateiformat GIF wie oben beschrieben, im Dialogfenster In Palettenbild konvertieren benutzen Sie die gleichen Werte wie vorher, Glätten: 50, Palette: Optimiert, Rastern: Geordnet, Rasterintensität: 100 und Farben können Sie jetzt sogar auf eine Zahl zwischen 16 und 19 reduzieren, ohne einen nennenswerten Qualitätsverlust hinnehmen zu müssen. Beim anschließenden GIF-Export probieren Sie erst ohne Transparenz, also aktivieren Sie die beiden Checkboxen für Transparenz: Keine und Interlace Image. Jetzt wissen Sie ganz genau, ein Lichteffekt kostet 3 KB Ladezeit, denn jetzt haben Sie eine Dateigröße von 5 KB. Nun werden Sie es mit einer Transparenz probieren. Also noch einmal auf die gleiche Weise als GIF exportieren, unter In Palettenbild konvertieren benutzen Sie die gleichen Werte, im Fenster GIF-Export kommt die Änderung, unter Transparenz: aktivieren Sie Bildfarbe, dann klicken Sie mit der Pipette auf einen schwarzen Bereich in dem linken Vorschaufenster. Noch sehen Sie nichts, aber mit einem Klick auf >Vorschau wird das Resultat sichtbar, nun können Sie zuweisen. Vielleicht ist die Überraschung bei Ihnen groß, auch dieses Ergebnis erzeugt eine Dateigröße von 5 KB. Fortsetzung > Dateiformat GIF - mit oder ohne Transparenz?

6 Fortsetzung - Dateiformat GIF - mit oder ohne Transparenz? 5 Hinweis: Warum wird die Frage nach der Transparenz so oft gestellt, offensichtlich möchten viele Anwender einen Schriftzug für eine Webseite produzieren, die auf unterschiedlich farbigen Seiten genutzt werden kann. Ist das so einfach möglich? Hierzu schauen Sie sich das soeben mit Transparenz erzeugte GIF in einem Webpage Editor wie Microsoft Frontpage an, stellen Sie hier die Hintergrundfarbe auf weiß oder eine andere helle Farbe, nun können Sie sich die Frage selbst beantworten. Die freigestellte Schrift zeigt schwarze Randpixel vom Hintergrund, also ist ein universeller Einsatz ohnehin sehr fragwürdig. Mit der Technik wie unter 3 beschrieben und einem identischen Hintergrund wie in der Webpage sind Sie immer auf der sicheren Seite. Soll es aber unbedingt ein mehrfarbiger oder gemusterter Hintergrund sein, müssen Sie mit den schwarzen Randpixeln leben. Im Internet finden Sie jede Menge dieser Negativ-Beispiele. Für Anfänger noch der Hinweis, haben Sie beispielsweise in Frontpage die Farbe Orange als Hintergrund gewählt, notieren Sie hier die genauen Werte der RGB Farbe. In Photo Paint über >Bearbeiten>Füllen>Button: Gleichmäßige Füllung>Bearbeiten, übertragen Sie dann diese Einstellungen. So erhalten Sie eine identische Farbwahl, auch wenn vielleicht Photo Paint diese Farbe in einem anderen Ton auf Ihrem Monitor darstellt. Zusätzlich können Sie unter >Extras>Optionen>Farbverwaltung die Checkbox für >Simulierte Druckerfarben anzeigen deaktivieren, danach ist die Farbanzeige in Frontpage und Photo Paint identisch. Bei Arbeiten die später auf Ihrem Drucker ausgegeben werden, sollten Sie diese Einstellung wieder aktivieren. copyright 2000 by kay michael kuhnlein