(Anti) Aliasing von Schriftarten in Photoshop

20

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

arial

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?

Alex
quelle
5
Ich habe dieses Problem auf der offiziellen Photoshop-Feedback-Website unter feedback.photoshop.com/photoshop_family/topics/… pliz vote gestellt.

Antworten:

18

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.

Stefan Monov
quelle
Die CRT-Bevölkerung ist viel zu niedrig, um für sie zu sorgen .....
Pacerier
13

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/

Psyborg
quelle
1
"Photoshop ist kein Webdesign-Programm." Ja wirklich????
Farray
3
@ Farray: Wirklich. Es ist ein Raster-Grafik-Editor. Nur weil Sie damit auch Webdesign betreiben können, heißt das noch lange nicht, dass es ursprünglich dafür entwickelt wurde. Sie können auch auf der Autobahn einen Traktor fahren, aber das macht es nicht zu einem Auto.
Ilmari Karonen
@IlmariKaronen Photoshop ist ein gutes Tool zum Entwerfen einer Website. Es wird nur nicht zum Erstellen der Website verwendet. Ich hatte keine Webdesigns, bei denen keine Rastergrafiken bearbeitet wurden ...
Farray
2
Das ist eine der unglücklichsten Meinungen, die ich in letzter Zeit gelesen habe. Wenn Photohop nicht zum Gestalten von Websites (und vielen anderen Dingen) gedacht ist, womit gestaltest du sie dann? Sie sollten sich einige seriöse Webdesign-Blogs und -Seiten ansehen, jeder verwendet Photoshop, um seine Websites zu gestalten.
José Tomás Tocino
@ TheOm3ga - eigentlich stimmt das wirklich nicht. Einige bevorzugen Fireworks wegen seines besseren Workflows (obwohl die Textwiedergabe von FW schrecklich ist ), andere bestehen auf HTML-Prototypen. Aber Photoshop ist keineswegs die universelle Wahl.
Jimmy Breck-McKye
6

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.

Jari Keinänen
quelle
5

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.

DA01
quelle
5

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:

Bildbeschreibung hier eingeben

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)

ein Trickpony
quelle
Ziemlich interessanter Ansatz! Hält auch den Text bearbeitbar.
Kontur
@onetrickpony, Was ist das Styling für die zweite Zeile?
Pacerier