Schriften in Photoshop CS4 anders als auf einer html-Seite?

Question

Hi,

ich hab hier gerade ein kleineres Problem.

Ich bekomme es einfach nicht hin, dass Schriften in Photoshop einigermaßen so aussehen wie auf Webseiten.

Das liegt einmal an der Größenangabe in pt in Photoshop, was ja auf den meisten Webseiten in px angegeben ist. Das ist aber glaube ich nicht das wirkliche Problem.

Mir sieht es eher so aus als würde Photoshop die Buchstaben anders rendern. Auf der Webseite sehen die auch sehr dünn sehr "glatt" aus in Photohop ist dünn gleich "pixelig" und wenn man dann "scharf" einstellt werden die Ränder zwar glatter aber die Buchstaben immer noch nicht so schön wie auf einer normalen Webseite mit css-formatierter Schrift.

Deckungsgleich bekomme ich keine Schrift hin, egal welcher Font egal welche Dicke, Schärfe...

Ums mal platt zu sagen, die Schriften auf Webseiten sehen sehr viel besser aus als in Photoshop, woran liegt das, hab ich ne falsche Einstellung in Photoshop oder ist das ein Systemfehler?

Als Versuch hab ich einfach einige Fonteinstellungen von verschiedenen Webseiten aus dem css-File rausgekramt und einfach 1:1 (bis auf die Größe) in Photoshop eingegeben und mit einem Screenshot der Webseite verglichen, da sah immer die Schrift auf der Webseite sehr viel besser aus.

Das ist jetzt kein Riesenproblem, mich wundert das nur und es stört natürlich beim Design von Webseiten, da man das Endergebnis immer erst in html/css umsetzten muss um zu sehen wie es dann wirklich aussieht.

Über Hilfe würde ich mich sehr freuen

Gruß Fabian

PS: Firefox 3.5.7, Photoshop CS 4 und Windows 7

Answer 1

Ich denke mal es liegt daran, daß Photoshop einen anderen Kantenglättungsalgorithmus verwendet als der Browser bzw. das verwendete Betriebssystem.

Answer 2

Hi Supermax,

das mag sein, ärgerlich ist es trotzdem.

Gibt es vielleicht irgendeinen Trick wie man das in Photoshop angleichen könnte?

Gruß Fabian

Answer 3

Hallo Fabian,

versuche mal ob das Ergebnis besser wird, wenn du

- die Auflösung der Photoshop-Datei so einstellst, dass sie der deines Monitors entspricht, z.B. 96 statt ggf. voreingestellter 72 dpi

- nur Schriftgrößen verwendest, welche in den Fonts-Typen auch hinterlegt sind, damit die nicht von einer ähnlichen Größe umgerechnet werden müssen (i.d.R. 12, 18, 24, 36, 48, 60, 72)

Gruß
Kalle

Answer 4

Spätestens wenn du ein anderes Betriebssystem verwendest, ist die mühsam erzwungene "Angleichung" ohnehin für die Katz', da selbst identische Fonts nich auf allen Systemen (Windows / Linux / MacOS / ...) exakt gleich gerendert werden.

Auf dem (TFT)-Bildschirm werden die Zeichen mittels "Sub-Pixel Rendering" (unter Windows heißt das "Cleartype") noch weiter geglättet. Photoshop kann nicht auf solche Tricks zurückgreifen, da die Resultate für andere Ausgabemedien (z.B. Druck) dann undefiniert oder schlicht unansehnlich werden.

Aber vielleicht beschreibst du mal, was genau du eigentlich vorhast.

Answer 5

Hi,

was ich eigentlich vor habe ist ein Design für eine Webseite zu machen und das dann, wenn es fertig ist, in html/css umzusetzen.

Solche Sachen gehen meiner Meinung nach viel schneller in Photoshop zum Ausprobieren als es immer gleich in html und css zu machen.

Wenn jetzt aber die Schriften partout nicht übereinstimmen wollen ist das mit dem Design nicht ganz so einfach.

Das mit den dpi versuche ich mal, denke aber dann wird das Ergebniss nur kleiner dargestellt.

Gruß Fabian