(Anti) Aliasing von Schriftarten in Photoshop

Ich verwende Photoshop zum Entwerfen von Websites. Wenn ich ein Photoshop-Design mit der Live-Browservorschau vergleiche, werden die Schriftarten anders gerendert.

Grundsätzlich wirkt der Text bei jeder Anti-Aliasing-Methode, die ich in Photoshop auswähle, immer fett . Daher muss ich Antialiasing immer deaktivieren (für normalen 12px / 14px-Text).

Gibt es eine Methode, mit der ich in Photoshop die gleiche Art der Schriftwiedergabe erzielen kann wie in Windows mit ClearType?

Wenn nicht, gibt es Schriftarten, die besser aussehen als Arial, wenn Anti-Aliasing deaktiviert ist?

Es gibt zwei Gründe, warum ClearType-Text so scharf ist.

1. Es wird Subpixel-Rendering verwendet . Ich glaube nicht, dass Photoshop das unterstützt.
2. Es werden aggressive Hinweise verwendet, um Linien in das Pixelraster einzufügen

Sie können Ihren Text in den Editor eingeben, einen Screenshot mit einem praktischen Tool erstellen und ihn im Mischmodus „Multiplizieren“ in Photoshop einfügen (da es sich um schwarzen Text auf weißem Hintergrund handelt). Aber das ist nicht bequem. Bearbeiten: Es kann auch fast unmöglich sein, eine andere Vordergrundfarbe als Schwarz zu verwenden.

Dieser Typ hat eine Methode zum manuellen Rendern von Subpixeln beschrieben, die meiner Meinung nach die Schriftschärfe verbessert und ClearType näher bringt. Es werden jedoch immer noch Photoshop-Hinweise verwendet, sodass es nicht so scharf ist wie ClearType.

Benötigen Sie wirklich ein Rendering im ClearType-Stil in Photoshop? Wenn Sie Grafiken exportieren, die Text zur Verwendung in Ihrem Webdesign enthalten, sollten diese kein Subpixel-Rendering enthalten, da dies für einige Bildschirme (CRT, gedrehtes Telefon) nicht geeignet ist. Wenn Sie keinen Text exportieren, sondern nur anzeigen, ist das Rendering von Photoshop in Ordnung.

Photoshop ist kein Webdesign-Programm. Um Text zu erhalten, der in einem Browser genauso aussieht wie in einer Grafik (jpg, gif usw.), müssen Sie in beiden Programmen dieselbe Schriftart verwenden. Einige Schriftarten werden nicht von allen Browsern verwendet.

Abhängig von der Größe Ihres Textes könnte eine gute mittelgroße Schriftart Tahoma, Helvetica, Trebuchet oder Georgia sein. Auf dieser Website finden Sie einige gute Ideen: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

Bei größeren Schriftarten spielt Anti-Aliasing eine wichtige Rolle.

Wenn Sie versuchen, Text mit Text auf einer Seite zusammenzuführen, empfehle ich die Verwendung der CSS-Positionierung, um Ihre Ziele zu erreichen. Mit CSS können Sie Text von Ihrer Webseite über Bilder setzen und die Seite mithilfe der relativen und absoluten Positionierung genau so rendern, wie Sie es möchten. Hier ist ein Beispiel und Tutorial: http://css-tricks.com/text-blocks-over-image/

Leider unterstützt Photoshop keine Art von Subpixel-Rendering. Auch keine andere Adobe-Software - mit Ausnahme von Dreamweaver . (Nun, es ist nicht gerade Dreamweavers Technologie, da sie nur den HTML-Code rendert und dann den Text für das zu rendernde Betriebssystem übergibt.)

Der vorgeschlagene Arbeitsablauf besteht möglicherweise darin, dass Sie Ihr Design in Photoshop erstellen und in Scheiben schneiden und es dann in Dreamweaver öffnen. Wenn das Design weitere Korrekturen benötigt, können Sie die Datei gleichzeitig in Photoshop öffnen, die Änderungen vornehmen, die Ansicht in Dreamweaver speichern und aktualisieren. Fügen Sie die endgültige, echte Kopie in Dreamweaver hinzu. Sie können auch Photoshop durch Fireworks ersetzen. oder starten Sie das Drahtmodell in Fireworks → fahren Sie mit Photoshop fort → veröffentlichen Sie es in Dreamweaver. (Es wird klar, warum die Creative Suite-Editionen normalerweise in Paketen gekauft werden, nicht wahr?)

Wenn das Design in der Vorschau von Dreamweaver anders aussieht als in den Browsern, ist dies eine andere, unglückliche Angelegenheit (und ich spreche nicht nur über die Typografie, sondern über das Rendering als Ganzes). Je früher Sie von Photoshop zu einer Live-Demo aufsteigen können - ob über Dreamweaver oder nicht - desto besser. Ich tue Wunsch Photoshop würde Subpixel - Rendering Befugnisse (aber zugleich Hoffnung wird es nicht in CS6 eingeführt werden, oder zumindest die Hoffnung werde ich reich sein bis dahin)!

Nur eine Randnotiz: ClearType ist mit etwa 10 Patenten geschützt, sodass genau das gleiche Rendering nicht wahrscheinlich ist. Beachten Sie auch, dass OS X standardmäßig ein anderes Rendering (Quartz) verwendet, ebenso wie die grafischen Oberflächen in Linux-Distributionen.

Design in HTML und CSS. Wenn Sie es wieder in ein PhotoShop-Modell aufnehmen MÜSSEN, schießen Sie es aus dem Browser auf den Bildschirm und bringen Sie es dann wieder in Ihr PhotoShop-Dokument.

Das Festlegen des Typs in PhotoShop ist im Allgemeinen ein Problem.

Ein möglicher Workaround könnte darin bestehen, die "scharfe" Antialiasing-Methode zu verwenden und einen 0-tiefen inneren Glanz auf der Textebene zu setzen:

Für dieses Beispiel habe ich weiße Farbe, 85% Deckkraft, "Bildschirm" -Mischmodus, 0 Drossel, 0 Größe verwendet. Nicht so gut wie Frau Klartyp, aber es sieht weniger kühn aus ...

(erste Zeile = kein Anti-Aliasing, letzte Zeile = scharfes Anti-Aliasing ohne inneres Leuchten)