Photoshop画像のテキストが「ぼやけて」見える

Photoshop CS5でウェブサイトのヘッダーを作成していますが、それを見るとテキストが非常にぼやけており、なぜかわかりません。

私はWebプリセットを使用します。最もシャープで最良の結果を得るために何をお勧めしますか？

これが現在のモックアップです：

デフォルトでは、Photoshopはテキストレイヤーにアンチエイリアスを適用します。アレックスは別の質問で素晴らしい比較を提供しています：

アンチエイリアスオプションは、ツールバーとCharacterウィンドウで使用できます。

注意：最終製品でテキストレイヤーを通常の（HTML）テキストとして使用する場合は、ブラウザーがPhotoshopとは異なる方法でテキストをレンダリングする可能性があります。この詳細については、「Photoshopのフォント（アンチ）エイリアシング」と同じ質問で見つけることができます。

タグのheightおよびwidth属性（またはCSS）imgが画像の実際のサイズと一致していることを確認してください。そうしないと、Webブラウザーによって再スケーリングされ、多くのWebブラウザーがこれを醜い方法で行います。比較的上手くできるものでも、画像が多少ぼやけることがあります。

正しく見えるようにする場合は、ピクセルを1：1に保ちます。

アクセシビリティと検索エンジンの問題につながるため、テキストを画像として表示しません。

ただし、テキストを画像として表示したい場合は、jpeg圧縮のため、pngまたはgif画像の方がjpg画像よりも良い結果が得られます。画像を圧縮しなくても、Opera mobileやインターネットの「アクセラレータ」のようなブラウザは圧縮するかもしれません。

解像度を上げるために、テキストを透明なPNGファイルとして作成します。別の方法は、スタイルとSEOの両方にsIFRを使用することです。sIFRは基本的にフォントをFlashとして埋め込みますが、100％検索エンジンに対応しています。たとえば3d-photomontage.comでいくつかの例をご覧ください。

あなたのデザインで画像テキストを使用する必要は絶対にないということを指摘しておきます。本文のコピーに非Webフォントを使用しないでください。-私は彼らがデザインで見栄えが良いのを知っていますが、あなたはその価値よりもHTMLでより多くのトラブルを経験します-

テキストをぼかしたくない場合は、PSのアンチエイリアスオプションから[なし]を選択してください。HTMLバージョンでは、OSまたはブラウザに応じてテキストのレンダリングが常に異なるため、できることはそれほど多くありません。

これも見てください。PSではなくHTMLのテキストレンダリングの問題を解決するのに役立ちます。

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

私は常に 'Crisp' antia-aliasedオプションを選択して設計し、HTMLのテキストがとにかく違って見えるという事実を認識しています！