Photoshopのフォント（アンチ）エイリアス

私はPhotoshopを使用してWebサイトをデザインしていますが、Photoshopのデザインとライブブラウザーのプレビューを比較するたびに、フォントが異なってレンダリングされているように見えます。

基本的に、Photoshopで選択したアンチエイリアス方法は、テキストは常に大胆なテキストの印象を与えます。そのため、（通常の12px / 14pxテキストの場合）アンチエイリアスを常にオフにする必要があります。

Windowsがcleartypeで使用するような、Photoshopで同じ種類のフォントレンダリングを実現できる方法はありますか？

そうでない場合、アンチエイリアスがオフのときにArialよりも見栄えの良いフォントがありますか？

ClearTypeテキストが非常に鮮明である理由は2つあります。

1. サブピクセルレンダリングを使用します。Photoshopがそれをサポートしているとは思わない。
2. 積極的なヒントを使用して、行をピクセルグリッドに合わせます。

メモ帳でテキストを入力し、便利なツールでスクリーンショットを作成し、ブレンドモードMultiplyでPhotoshopに貼り付けることができます（白い背景に黒いテキストがあるため）。しかし、それは便利ではありません。編集：また、黒以外の前景色で行うことはほとんど不可能かもしれません。

この男は、手動のサブピクセルレンダリングを行う方法を説明しましたが、私の目には、フォントの鮮明度が向上し、ClearTypeに近くなります。ただし、Photoshopのヒントを引き続き使用するため、ClearTypeほどシャープではありません。

PhotoshopでClearTypeスタイルのレンダリングが本当に必要ですか？Webデザインで使用するテキストを含むグラフィックをエクスポートする場合、一部のディスプレイ（CRT、回転した電話）に適さないため、サブピクセルレンダリングを含めるべきではありません。また、テキストをエクスポートせずに見ているだけであれば、Photoshopのレンダリングは問題ないようです。

PhotoshopはWebデザインプログラムではありません。ブラウザでグラフィック（jpg、gifなど）と同じように見えるテキストを取得するには、両方のプログラムで同じフォントを使用する必要があります。一部のフォントはすべてのブラウザーで使用されているわけではありません。

テキストのサイズに応じて、適切な中サイズのフォントは、Tahoma、Helvetica、Trebuchet、またはGeorgiaです。いくつかの良いアイデアについては、このWebサイトをご覧ください：http : //www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

大きいフォントは、アンチエイリアスの問題になり始める場所です。

テキストをページ上のテキストにマージしようとしている場合、CSSポジショニングを使用して目標を達成することをお勧めします。CSSを使用すると、Webページのテキストを画像の上に重ねることができ、相対的および絶対的な配置を使用して、ページを思いどおりにレンダリングできます。次に例を示します。チュートリアル：http : //css-tricks.com/text-blocks-over-image/

残念ながら、Photoshopはサブピクセルレンダリングをサポートしていません。Dreamweaverを除く他のAdobeソフトウェアも同様です。（まあ、まさにHTMLをレンダリングしてから、レンダリングするオペレーティングシステムのテキストを渡すため、Dreamweaverの技術とはまったく異なります。）

推奨されるワークフローは、Photoshopでデザインを作成してスライスし、Dreamweaverで開くことです。デザインでさらに修正が必要な場合は、Photoshopでファイルを同時に開き、変更を加え、Dreamweaverでビューを保存して更新することができます。Dreamweaverで最終的な実際のコピーを追加します。PhotoshopをFireworksに置き換えることもできます。または、Fireworksでワイヤーフレームを開始する→Photoshopで続行する→Dreamweaverで公開する。（Creative Suiteエディションが通常バンドルで購入される理由は明らかですよね？）

Dreamweaverのプレビューでブラウザとデザインが異なるように見える場合、それは別の不幸な問題です（そして、タイポグラフィだけでなく、レンダリング全体について話しているのです）。Photoshopからライブデモへの昇格が早ければ早いほど（Dreamweaverを使用するかどうかに関係なく）優れています。私がやる願いPhotoshopはサブピクセルレンダリングパワーを持っているでしょう（ただし、同時に希望で、それはCS6で導入されることはありません、または少なくとも希望で、私はそれまでに豊かになります）！

ちょっとした注意：ClearTypeは10個程度の特許で保護されているため、まったく同じレンダリングは行われない可能性があります。また、OS Xはデフォルトで異なるレンダリング（Quartz）を使用するため、Linuxディストリビューションのグラフィカルインターフェイスも使用することに注意してください。

HTMLおよびCSSで設計します。PhotoShopモックアップに戻す必要がある場合は、ブラウザからスクリーンショットを撮影してから、PhotoShopドキュメントに戻します。

一般に、PhotoShopでタイプを設定するのは面倒です。

考えられる回避策は、「シャープ」なアンチエイリアス方法を使用して、テキストレイヤーに深さ0の内部グローを設定することです。

このサンプルでは、​​白色、不透明度85％、「スクリーン」ブレンドモード、チョーク0、サイズ0を使用しました。Msクリアタイプほど良くはありませんが、それほど大胆に見えません...

（最初の行=アンチエイリアシングなし、最後の行=内側の輝きのないシャープなアンチエイリアシング）