Schrift als Grafik ohne Hintergrund

[grenni]

Ich bin bereits seit mehreren Tagen nach der Suche nach einer Lösung für folgendes Problem:

Ich habe eine Homepage in Fireworks entworfen und möchte den Entwurf nun in HTML umsetzen. Entwurfsseitig habe ich teilweise sehr spezielle Schriftarten eingesetzt, die ich als Grafik exportieren und in Dreamweaver (HTML) einsetzen möchte.

Zunächst besteht die HTML Seite aus einer verschachtelten Tabelle, für die ich einen Hintergrund definiert habe: .hintergrund {background-image:url(bilder/hg.gif); background-repeat:repeat}

Der Hintergrund ist eine webgerasterte Fläche.

In eine Tabellenspalte soll nun die Schrift als Grafik eingefügt werden. Ich exportiere die Schrift wie folgt aus Fireworks: Schrift markieren, kopieren, Datei neu, transparenter Hintergrund, einfügen, dann als GIF mit Alphatransparenz speichern und die GIF in HTML laden. Leider erhalte ich als Ergebnis eine völlig zerfranzte Schrift. Wenn ich die GIF mit Hintergrund speichere, sieht sie normal aus. Ich will aber keinen Hintergrund, da dieser bereits in HTML definiert ist und das Speichern mit Hintergrund zu Streifen führt (wegen der Webrasterung). Wenn ich die PNG Datei in HTML lade sieht alles wunderbar aus, nur ist diese Datei ziemlich groß (Ladezeit). Ich habe schon ewig rumprobiert, komme aber nicht ans Ziel. Was mache ich falsch?

Ich habe mal ein Beispiel hochgeladen. Ihr könnt Euch das mal unter

Testdatei -

anschauen. Die obere Datei ist eine GIF, die ohne Hintergrund gespeichert wurde, unten die PNG.

Werden PNG Dateien eigentlich auf allen Browsern korrekt angezeigt?

 

[Lenchen]

Mit transparenten png's wirst du Probleme mit dem IE (ich glaub 6) bekommen...
Hast du mal versucht, das Ganze mit einem anderen Bildbearbeitungsprogramm zu machen?

 

[threadi]

PNG ist auch in Zeiten von Breitbandanschlüssen inzwischen die bessere Wahl. Einzig der IE6 und älter hat mit diesem Format noch ein Problem, aber auch nur bei Alphatransparenz mit mehr als 256 Farben. Dafür gibt es aber zahlreiche Methoden um es zu umgehen.

 

[Bernhard]

Zunächst besteht die HTML Seite aus einer verschachtelten Tabelle, für die ich einen Hintergrund definiert habe: .hintergrund {background-image:url(bilder/hg.gif); background-repeat:repeat}

Hallo grenni,

Tabellen verwendet man, um tabellarische Daten auszuzeichnen,
Layout macht man mit CSS.

Der Hintergrund ist eine webgerasterte Fläche.

Was ist eine "webgerasterte Fläche"?

Wenn ich mir Dein Hintergrundbild anschaue, dann hat das zwar zwei Farben,
führt aber im Endeffekt zu einer grauen Fläche, da das Auge einzelne Pixel nicht
unterscheiden kann...

In eine Tabellenspalte soll nun die Schrift als Grafik eingefügt werden. Ich exportiere die Schrift wie folgt aus Fireworks: Schrift markieren, kopieren, Datei neu, transparenter Hintergrund, einfügen, dann als GIF mit Alphatransparenz speichern und die GIF in HTML laden. Leider erhalte ich als Ergebnis eine völlig zerfranzte Schrift. Wenn ich die GIF mit Hintergrund speichere, sieht sie normal aus. Ich will aber keinen Hintergrund, da dieser bereits in HTML definiert ist und das Speichern mit Hintergrund zu Streifen führt (wegen der Webrasterung). Wenn ich die PNG Datei in HTML lade sieht alles wunderbar aus, nur ist diese Datei ziemlich groß (Ladezeit). Ich habe schon ewig rumprobiert, komme aber nicht ans Ziel. Was mache ich falsch?

Ich habe mal ein Beispiel hochgeladen. Ihr könnt Euch das mal unter

Testdatei -

anschauen. Die obere Datei ist eine GIF, die ohne Hintergrund gespeichert wurde, unten die PNG.

Werden PNG Dateien eigentlich auf allen Browsern korrekt angezeigt?

Lenchen hat Recht: für IE 6 kannst Du Dir mit PNG-Fix helfen, allerdings wird sich der
Rechner einen Wolf rechnen, da er für jede Bildwiederholung neu rechnen muss...
für noch ältere IEs hilft auch PNG-Fix nicht...

GIF kennt keine Alpha-Transparenz, sondern nur Pixel, die entweder Farbe haben,
oder absolut transparent sind. Abhilfe schaffst Du, indem Du beim Speichern eine
Tranzparenzersatzfarbe angibst, die dem Grau Deines Hintergrundbildes möglichst
ähnlich ist.

Grüße
Bernhard

 

[grenni]

Mein Arbeitgeber hat irgend so ne alte IE -Version, da wird der Hintergrund der PNG als graues Kästchen dargestellt :( Das sieht halt total bescheuert aus. Sonst hätte ich mit der PNG sicher keine Probleme, auch nicht wegen der Größe. Im Zeitalter von DSL wird die Seite ja trotzdem recht flott geladen.

Ich habe die Aktion auch schonmal mit Photoshop versucht, führt aber zum gleichen Ergebnis. Bisher habe ich meine Seiten immer mit einfarbigen Hintergründen gebaut, da funktioniert das mit dem Schriftexport als Gif und jpg problemlos. Ist doch komisch oder?

 

[neuroleptika]

Für dieses Beispiel braucht mann keine Tranzparenz

 

[grenni]

Hallo Bernhard,

danke für deine Antwort. Eine "webgerasterte" Fläche besteht praktisch aus abwechselnden Pixeln. In meinem Fall wechseln sich schwarz und ein dunkleres grau ab. Das macht sehr wohl einen Unterschied, da es etwas lebhafter wirkt als eine einfarbige Fläche. Sicher, es wäre leicht, dafür eine Farbe zu nehmen, da hätte ich auch keine Probleme mit dem Schriftexport auf einfarbigem Hintergrund. Ich wollte halt auch mal was neues versuchen.

Wie du oben siehst, formatiere ich auch mit CSS und lade nur die Grafiken und Text in eine verschachtelte Tabelle. Das mache ich schon Jahre so, auch wenn mancher sagt, das wäre zwischenzeitlich out.

 

[grenni]

Für dieses Beispiel braucht mann keine Tranzparenz

wie denn sonst? - die verwendete Schriftart ist keine Standard - Schriftart und muss doch daher als Grafik eingefügt werden oder?

 

[neuroleptika]

wie denn sonst? - die verwendete Schriftart ist keine Standard - Schriftart und muss doch daher als Grafik eingefügt werden oder?

Ich habe die feine Kachelung übersehen.
Auf einfarbigen Hinterrgründen kann man das Muster auch in die Grafik zeichnen.

Wenn sich die Position nicht px-genau ermitteln läßt und der umliegende Hintergrund die selbe Kachelung hat, geht es ohne Tranzparenz wirklich nicht.
Dann suche nach: pngfix IE6

Wenn du eine 1px breite Haarlinie um das Element legen darfst, würde ich das vorziehen.
Der Übergang zur umliegenden Kachelung fällt dann kaum auf.
Vielleicht reicht deinem Chef auch eine leichte Verschiebung für den IE5-6.

Ohne die ganze Seite zu sehen und deinen kreativen Spielraum zu kennen kann ich da auch keine weiteren Tips geben.

Wenn du Fireworks zur Verfügung hast kannst du es auch mit png8 versuchen.

 

[grenni]

<<Dann suche nach: pngfix IE6>>

Super, kenne ich noch nicht und werde es mal ausprobieren. :grin:

<<Wenn du eine 1px breite Haarlinie um das Element legen darfst, würde ich das vorziehen. Der Übergang zur umliegenden Kachelung fällt dann kaum auf. >>

Ja darüber habe ich auch schon nachgedacht, allerdings komme ich da mit dem Gesamtdesign der Seite in Konflikt - wie du bereits vermutet hast.

Vielen Dank Euch allen für die Tipps.

 

[Bernhard]

Hallo Bernhard,

danke für deine Antwort. Eine "webgerasterte" Fläche besteht praktisch aus abwechselnden Pixeln. In meinem Fall wechseln sich schwarz und ein dunkleres grau ab. Das macht sehr wohl einen Unterschied, da es etwas lebhafter wirkt als eine einfarbige Fläche. Sicher, es wäre leicht, dafür eine Farbe zu nehmen, da hätte ich auch keine Probleme mit dem Schriftexport auf einfarbigem Hintergrund. Ich wollte halt auch mal was neues versuchen.

Wie du oben siehst, formatiere ich auch mit CSS und lade nur die Grafiken und Text in eine verschachtelte Tabelle. Das mache ich schon Jahre so, auch wenn mancher sagt, das wäre zwischenzeitlich out.

Hallo grenni,

ich kenne Dein Bildbearbeitungsprogramm nicht, aber in Photoshop kannst Du beim
Speichern als GIF eine Transparenzersatzfarbe angeben. Da gibst Du die Farbe an,
die sich beim Mischen Deiner beiden Hintergrundfarben ergibt.

Mein Arbeitgeber hat irgend so ne alte IE -Version

Hab ich auch, braucht man zum Testen

Im Zeitalter von DSL wird die Seite ja trotzdem recht flott geladen.

Da solltest Du nicht drauf bauen! DSL ist in Deutschland noch lange nicht flächendeckend verfügbar.

Außerdem ist es sinnvoller, Du machst Deine Hintergrundgrafik etwas größer (z.B. 10 × 10 Pixel).
Dann ist die zu übertragende Datenmenge zwar minimal größer, der erforderliche Rechenaufwand
zur Berechnung der Kachelung ist aber deutlich kleiner...

Ich habe die Aktion auch schonmal mit Photoshop versucht, führt aber zum gleichen Ergebnis. Bisher habe ich meine Seiten immer mit einfarbigen Hintergründen gebaut, da funktioniert das mit dem Schriftexport als Gif und jpg problemlos. Ist doch komisch oder?

JPG kennt gar keine Transparenz und GIF kennt keine Alpha-Transparenz, daher
werden Pixel, die halbtransparent sind, voll eingefärbt. Du kannst aber (wie schon
gesagt) angeben, mit welcher Farbe sie eingefärbt werden.

Grüße
Bernhard