Font (anti)aliasing in Photoshop

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

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

Sie können Ihren Text in Notepad eingeben, ihn mit einem netten praktischen Werkzeug scannen und ihn mit dem Mischmodus Multiplizieren in Photoshop einfügen (weil es schwarzer Text auf weißem Hintergrund ist). Aber das ist nicht bequem. Bearbeiten: Es kann auch fast unmöglich sein, mit einer anderen Vordergrundfarbe als Schwarz zu arbeiten.

Dieser Typ hat eine Methode zum manuellen Rendern von Subpixeln beschrieben, und in meinen Augen verbessert sie die Schriftschärfe und macht sie näher an ClearType. Aber es verwendet immer noch Photoshops Hinting, also ist es nicht so scharf wie ClearType.

Brauchen Sie wirklich ClearType-Rendering in Photoshop? Wenn Sie Grafiken mit Text zur Verwendung in Ihrem Webdesign exportieren, sollten sie kein Subpixel-Rendering enthalten, da dies für einige Displays (CRT, gedrehtes Telefon) nicht geeignet ist. Und wenn Sie keinen Text exportieren, sondern ihn nur betrachten, scheint das Rendering von Photoshop in Ordnung zu sein.

Photoshop ist kein Webdesign-Programm. Um einen 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/

Größere Schriftarten sind der Punkt, an dem es auf Anti-Aliasing ankommt.

Wenn Sie versuchen, Text mit Text auf einer Seite zusammenzuführen, empfehle ich die Verwendung von CSS-Positionierung, um Ihre Ziele zu erreichen. CSS ermöglicht es Ihnen, Text von Ihrer Webseite über Bildern zu platzieren, und verwendet relative und absolute Positionierung, um die Seite genau so darzustellen, wie Sie es möchten. Hier ist ein Beispiel und Tutorial: http://css-tricks.com/text-blocks-over-image/

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

Der vorgeschlagene Arbeitsablauf sieht möglicherweise so aus, dass Sie Ihr Design in Photoshop erstellen und aufteilen 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, speichern und die Ansicht in Dreamweaver aktualisieren. Fügen Sie die endgültige, echte Kopie in Dreamweaver hinzu. Sie könnten Photoshop auch durch Fireworks ersetzen; oder starten Sie sogar Wireframing in Fireworks → fahren Sie in Photoshop fort → veröffentlichen Sie über Dreamweaver. (Es wird klar, warum die Creative Suite-Editionen normalerweise in Bundles gekauft werden, oder?)

Wenn das Design in der Vorschau von Dreamweaver anders aussieht als in Browser(n), ist das eine andere, unglückliche Sache (und ich spreche nicht nur von der Typografie, sondern vom Rendering als Ganzes). Je früher Sie von Photoshop zur Live-Demo wechseln können – sei es über Dreamweaver oder nicht – desto besser. Ich wünschte , Photoshop hätte Subpixel-Rendering-Fähigkeiten (aber hoffe gleichzeitig, dass es nicht in CS6 eingeführt wird, oder zumindest hoffe, dass ich bis dahin reich sein werde)!

Nur eine Randnotiz: ClearType ist durch etwa 10 Patente geschützt, daher ist genau das gleiche Rendering nicht wahrscheinlich. Es ist auch erwähnenswert, dass OS X standardmäßig ein anderes Rendering (Quartz) verwendet, ebenso wie die grafischen Schnittstellen in Linux-Distributionen.

Design in HTML und CSS. Wenn Sie es wieder in ein PhotoShop-Modell einfügen MÜSSEN, erstellen Sie einen Screenshot aus dem Browser und bringen Sie es dann wieder in Ihr PhotoShop-Dokument.

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

Eine mögliche Problemumgehung könnte darin bestehen, die "scharfe" Anti-Aliasing-Methode zu verwenden und ein inneres Leuchten der Tiefe 0 auf der Textebene festzulegen:

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

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