Schriftzug bleibt unscharf/verpixelt

[Jorgo]

Hallo zusammen.

Komischerweise ist mein letzter Thread nicht erschienen, daher versuche ich es nun nochmal in der Hoffnung dass es nun klappt...

Und zwar hatte ich vor für meinen Blog einen einfachen Schriftzug zu erstellen. (mit Photoshop)

Der Schriftzug ist in dem Fall die Domain.
"www." und ".de" sind 50% kleiner als der Domainname.

Die Grafik hat ein Format von 1100px Breite und 100px Höhe.
Auflösung 500
RGB
Schriftgröße 8 und 4
Farben sind Schwarz, Grau und Pink
Hintergrund ist transparent (und weiß)
Schriftart "TR Arial Black"

Problem ist nun, dass die Konturen der Buchstaben verpixelt sind.
Weshalb ist das so?
Das Problem hatte ich bisher NIE...

Ich musste drei verschiedene Schriftzüge bzw. Formate machen.
Einen für die Website, einen für den Facebook-Account und einen für den Twitter-account.
Bei allen drei Grafiken das gleiche Problem...

Weiß jemand einen Rat?

Danke.


Gruß,

Jorgo

[virra]

Auf welcher Glättung steht den deine Schrift?

http://abload.de/img/bildschirmfoto2013-09g5uex.png

[Jorgo]

Hallo.

Ich habe es auf "stark" stehen.

Hatte mal durchgetestet... Ohne, Scharf, Schärfer, Stark und Abrunden...
Ist alles nicht der Hit. :nixweiss:

[Garion]

Bei wieviel % Vergrößerung hast du dein Dokument denn (gaaaaanz unten links in der Ecke)? Schriftgröße 8 und 4 sind ja jetzt ehrlich gesagt auch recht winzig...

[Jorgo]

Hallo,

ja 8 und 4 ist klein.
Aber wenn ich es größer mache, passt es nicht mehr in die 1100 x 100.
Die Sache ist eben, dass ich das Format für die Website brauche.
Sieht mir jetzt schon ein wenig zu groß aus. (Jedenfalls die 1100px breite - Höhe ist in Ordnung)

Unten links in der Ecke steht 66,67%.
Meinst du das?
Was sagt mir das, wie ändere ich das und wird es zur Verbesserung beitragen?
Hab ich jetzt zum ersten mal gesehen... :emo_biggr

[Jenny]

Hallo!

Möglicherweise hängt dein Problem auch mit deiner Auflösung zusammen: Wozu um alles in der Welt brauchst du eine Auflösung von 500 (was überhaupt?) für's Web?
Setz die Auflösung mal auf 72ppi oder 96ppi und schau dir das Bild bei genau 100% an. Dann siehst du exakt das, was die Besucher deines Blogs auch sehen.

[Jorgo]

Hallo.

die Auflösung steht auf 500 PIXEL/INCH.

Ich hatte sie standardmäßig auf 72 Pixel/Inch.
Habe gedacht es wird scharf, wenn ich es höher stelle...

Bei 100% in Photoshop sieht es scharf aus.
Aber auf der Website, Facebook und Twitter sieht es nicht scharf aus.
Das ist ja das eigentliche Problem an der Sache. :emo_biggr

[Jenny]

Hallo!

Selbst die neuesten Retina-Displays haben noch keine 500ppi.
Im Web ist die Auflösung sowieso völlig uninteressant!

Wenn es in PS scharf ist und im Web nicht, dann stellt sich die Frage, wie und in welchem Format du speicherst. Bei einem JPG niederer Qualität kann die Schärfe schnell mal verloren gehen.

[Jorgo]

Hallo.

Wegen dem transparenten Hintergrund speichere ich als PNG.

Mit weißem Hintergrund speichere ich als jpg mit maximaler Qualität. :nixweiss:

[Jenny]

Hallo!

PNG ist verlustfrei und sollte eigentlich keine Änderungen der Schärfe zeigen. Kann es sein, dass die Grafik irgendwie versehentlich noch per CSS skaliert wird?

[Jorgo]

Hallo.

Wo kann ich das sehen, mit dem CSS?

[Jenny]

Hallo!

Das lässt sich mit den Entwickler-Tools des Browsers überprüfen. Gib doch mal einen Link zu deiner Website.

[Jorgo]

Link kam per PN.

Danke

[virra]

…Bei 100% in Photoshop sieht es scharf aus.
Aber auf der Website, Facebook und Twitter sieht es nicht scharf aus.
Das ist ja das eigentliche Problem an der Sache. :emo_biggr

Twitter kenne ich jetzt nicht, aber Facebook speichert dein Bild neu ab und komprimiert es dabei dermaßen Brutal, dass du null Chance hast. Aus einer Uni-Fläche mit einem Buchstaben wird so schon mal schnell ein Ministeckbild mit haufenweise Artefakten drin. Diese Plattformen scheren sich nicht um gute Darstellung, die sind fürs Eben-mal-Zeigen erfunden worden. Wenn du gute Qualität im netzt zeigen willst, musst du dir schon eine eigene Seite basteln (lassen).

Zur Auflösung: Die Auflösung ist für virtuelle Bilder (Monitore) pupsegal. Das Einzige, was zählt, ist die absolute Anzahl der Pixel, sowie die Qualität beim abspeichern (Artefaktebildung).