Wie kann ich meinen Photoshop-Text so anzeigen lassen, wie er im Web angezeigt wird?


11

Muss ich wirklich alles in Photoshop mit Anti-Aliasing auf "Keine" entwerfen? Ich bin sicher, es gibt einen besseren Weg.

Ich möchte eine Einstellung haben, damit ich bei der Auswahl eines einfachen Web-Safes (wie Tahoma) in Photoshop sehen kann, wie er im Web tatsächlich aussieht.

Beispiel: Der Unterschied zwischen Tahoma mit Anti-Aliasing, das in Photoshop auf "scharf" eingestellt ist, und der Darstellung in Firefox ist erheblich. In Photoshop sieht es gut und flüssig aus und sieht aus wie Mist im Web.

Gibt es eine Anti-Aliasing-Option, mit der Sie am besten beginnen können (die das ähnlichste Ergebnis erzielt), wenn Sie planen, den Inhalt live im Web zu veröffentlichen?


1
Wie eine Schriftart im Web aussieht, hängt vollständig vom Browser, den Browsereinstellungen, dem Betriebssystem und den Betriebssystemeinstellungen ab. Mit anderen Worten, es sieht für verschiedene Menschen unterschiedlich aus.
DA01

Antworten:


10

Die meisten Betriebssysteme und Browser rendern mit Antialiasing oder Subpixel-Antialiasing. Subpixel-Antialiasing ist auf Desktop-Plattformen wie Windows (mit ClearType) und OS X üblich. Standard-Monochrom-Antialiasing ist auf mobilen Plattformen üblich, auf denen sich die Subpixel-Reihenfolge des Geräts mit der Geräteorientierung ändern kann und auf denen Subpixel-Rendering nicht möglich ist. Dies ist von entscheidender Bedeutung, da sie häufig Anzeigen mit höherer Pixeldichte aufweisen.

Alias-Text-Rendering ist unter Windows XP üblich, wo ClearType standardmäßig deaktiviert ist. In Windows Vista und neueren Versionen ist ClearType standardmäßig aktiviert.


Das Rendern in Photoshop gegen Windows gegen OS X gegen iOS gegen Android gegen WebKit gegen Firefox (Gecko) ist normalerweise unterschiedlich. Es gibt also absolut keine Möglichkeit, etwas in Photoshop zu erstellen und zu wissen, dass die Textwiedergabe identisch ist, es sei denn, Sie machen einen Screenshot und fügen ihn Ihrem Dokument als Bitmap-Ebene hinzu.


2
Seit der Beantwortung dieser Frage hat Adobe Photoshop die Optionen "Mac" und "Mac LCD" hinzugefügt (plus Entsprechungen unter Windows), die das Rendern von Systemschriftarten verwenden. Es ist jetzt oft sehr nah oder identisch mit Safari.
Marc Edwards

8

Nein. Der neue Gedankengang besteht darin, Photoshop für das Layout- und Typografie-Design zu vermeiden und so früh wie möglich im Browser zu starten.

Indem Sie dem Client eine tatsächliche URL im Gegensatz zu einer Photoshop-Komposition übergeben, vermeiden Sie, dass die Erwartungen des Kunden beeinträchtigt werden, wenn sich das Endprodukt in dem Browser seiner Wahl geringfügig von den Photoshop-Kompositionen unterscheidet.

Letztendlich liegt es in unserer Verantwortung, den Kunden zu informieren und ihn auf die unvermeidbaren typografischen Diskrepanzen aufmerksam zu machen, die zwischen Browsern und Betriebssystemen auftreten.


1
In meinem Unternehmen erstelle ich Entwürfe und übergebe sie einem Front-End-Entwickler. Ich berühre niemals Code. Vor diesem Hintergrund benötige ich eine Lösung, bei der die Webseite nicht erstellt wird, um zu sehen, wie der Text aussieht.
jonn_g

2

In Photoshop CC haben wir neue Aliasing-Modi für Ihre Schriftarten hinzugefügt. Versuchen Sie statt "knackig" oder "stark" das neue "Mac LCD". Sie erhalten ein 100% web-sicheres Design.


1
Es gibt kein "100% web-sicheres Design", da es keine 100% ige Konsistenz zwischen Browsern, Schriftarten und Betriebssystemen gibt.
DA01

1

Kurze Antwort: Das kannst du nicht.

Photoshop ist nicht nur nie ideal, um zu wissen, wie Ihre Schriften außerhalb von Photoshop gerendert werden, es ist auch nicht ideal für die Arbeit mit Schriftarten im Allgemeinen. (Als ich in einer Designfirma / Druckerei arbeitete, musste alles, was in PS entworfen wurde, aus demselben Grund als PDF exportiert werden.) Dann kommt das Problem des Webs, der Browser und des Betriebssystems, auf dem diese Browser ausgeführt werden. Soweit mir bekannt ist, ist OS X das beste, um Schriftarten angemessen zu rendern, während Linux an zweiter Stelle steht und Windows natürlich an letzter Stelle steht. Die Realität ist, dass alle unterschiedliche Algorithmen zum Rendern von Schriftarten verwenden und Sie nicht überall das gleiche Ergebnis erzielen. Wenn es eine Lösung gäbe, würden wir alle zu Linux oder Mac wechseln oder warten, bis Microsoft das nächste Mal mit Windows Metro erfolgreich ist (Entschuldigung, ich hasse es, es Windows 8 zu nennen) oder es total in die Luft jagt.

Nur meine 2 Cent,

Patch


0

Meines Erachtens liegt das Rendern in einem Browser irgendwo zwischen "Sharp" und "Crisp" von Photoshop auf einem Mac und zwischen "Crisp" und "Strong" unter Windows. Ich schlage den Grafikdesignern, mit denen ich zusammenarbeite, vor, "Crisp" für Live-Text zu verwenden. Die Standardeinstellung "Stark" bereitet sie immer auf Enttäuschung vor. ;)

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.