Adobe Photoshopで文字をはっきり、くっきりさせる方法

Adobe Photoshopでかなり前から試行錯誤していることがあります。文字がどうしてもぼやけるというか、滲んでいるように見えてしまう場合があるのです。なんとかはっきり、くっきりさせられないかと色々試してみた結果、それなりに満足できる結果が得られたのでまとめておきます。

ラスタライズが前提であれば、フィルタなどで調整できる可能性はありますが、後から文字を変更したい場合に面倒なので、できればラスタライズしないでなんとか綺麗に見える方法がないかと試行錯誤してみました。使用しているのはCS2なので、バージョンによっては微妙な違いがあるかもしれません。

Photoshopの文字ツールの設定

まずは基本中の基本です。Photoshopの文字ツールは、注意しておかないと、すぐに文字のアンチエイリアスのかかり方が変わってしまいます。どういった場合にそうなるかというと、既に入力済みの文字を「文字ツール」を使って移動した場合です。

試してみたところ、(フォントや文字・段落の設定にもよるかもしれませんが)「アンチエイリアスの種類」が「シャープ」、「鮮明」ではフォントサイズが31px以下の場合、「強く」、「滑らかに」ではフォントサイズにかかわらず、「文字ツール」で文字を移動するとアンチエイリアスのかかり方が変わりました。

  • 画像: 「文字ツール」を使ってテキストを移動した場合

既に入力済みの文字を移動する場合には、「移動ツール」を使うようにすると、文字ごとにアンチエイリアスのかかり方が変わることがなくなります。

また、「文字パレット」のメニューから「文字幅を調整」のチェックをはずすと、少しだけ綺麗になる場合があります。

Photoshopのアンチエイリアスの種類

以下は、Photoshopで選べる「アンチエイリアスの種類」をそれぞれ変えて作成した文字です。上から「なし」、「シャープ」、「鮮明」、「強く」、「滑らかに」です。

  • 画像: Photoshop標準の「アンチエイリアスの種類」

はっきり、くっきりさせたい場合には、「強く」は文字が明らかに太るので論外です。「シャープ」も僅かながらに文字が太ります。「鮮明」、「滑らか」の違いはほとんどわからないのですが、「滑らかに」の方が綺麗に見えることが多いような気がします。ただ、やはりどこか滲んでるような感じがしますね。

ClearType処理

Photoshopで文字をClearType処理したものを紹介しておきます。仕組み的には「ロゴとか作るときに使える地味なテクニック」で紹介されているものと同じものです。

「アンチエイリアスの種類」を「なし」にして文字を作成し、「イメージ」→「画像解像度」で拡大、レッドチャンネルとブルーチャンネルをずらした後、再び「画像解像度」で元のサイズに戻します。詳しい手順は「ClearType - Wikipedia」を参照してみてください。

  • 画像: PhotoshopでClearType処理をした結果

ClearType処理はぱっと見は綺麗なのですが、赤と青が混じっているため、使いすぎるとちらついたり、かえって汚く見えたりする場合があります。

また、この方法にはいくつか問題があります。まず、テキストをラスタライズしなければならないので、文字を編集できなくなります。レイヤーの統合や解像度の変更によるリサンプリングを挟む必要があるため、背景が1色以外の場合にも使えません。単色の背景で作成したものを他の画像に重ね合わせる方法も考えられますが、面倒な上にあまり上手くいきません。そもそも、この方法は、チャンネルを左右それぞれ1ピクセルづつずらさなくてはならないので、最終的に元の画像から数ピクセルの誤差が生じます。

テキストをシェイプに変換

Photoshopによるアンチエイリアシングを避けて、「アンチエイリアスの種類」を「なし」にした状態でテキストをシェイプに変換してみました。テキストレイヤーを選択して、メニューから「レイヤー」→「テキスト」→「シェイプに変換」とします。

  • 画像: Photoshop標準の「アンチエイリアスの種類」+テキストを「シェイプに変換」した結果

一番下がテキストをシェイプに変換したものです。なかなか綺麗になったのではないでしょうか。文字の編集はできなくなってしまいますが、サイズの変更は劣化なくできますし、ラスタライズしてしまうよりはマシな気がします。

レイヤースタイルを利用する

少し毛色が違う方法ですが、レイヤースタイルを利用する方法もあります。背景が中間色や複雑な場合に特に効果的です。

まず、テキストレイヤーのレイヤースタイルから「境界線」を選びます。「サイズ」を「1」、「位置」を「外側」、「塗りつぶしタイプ」を「カラー」、「カラー」を白か黒にします。「描画モード」は、「カラー」を白にした場合は「スクリーン」、「覆い焼きカラー」、「覆い焼き(リニア)」など、黒にした場合は「乗算」、「焼き込みカラー」、「焼き込み(リニア)」などにします。「不透明度」は綺麗に見えるようなパーセントに調整します。

  • 画像: レイヤースタイルの「境界線」の設定

「光彩(外側)」で、「エレメント」の「テクニック」を「精細」、「ソース」を「エッジ」、「チョーク」を「0」、「サイズ」を「1」(残りは「境界線」の場合と同様)にしても同じようなことができます。

  • 画像: レイヤースタイルを適用した結果

上が通常の「滑らかに」、下が「滑らかに」にレイヤースタイルを適用したものです。背景の種類によってはあまり上手い方法ではありませんが、文字をラスタライズすることなく、手軽にくっきり、はっきりさせられるという点では使えると思います。

テキストをシェイプに変換+レイヤースタイルを利用する

ついでに、「シェイプに変換」とレイヤースタイルの複合技もやってみました。

  • 画像: 「シェイプに変換」+レイヤースタイルを適用した結果

一番下が「シェイプに変換」したものにレイヤースタイルを適用したものです。少しくどい気もしますが、かなり、はっきり、くっきりしたのではないでしょうか。

その他、あれこれやってみた結果、(使っているフォントにもよると思いますが)テキストをシェイプに変換する方法が綺麗に見えることが多いという結論になりました。レイヤースタイルを利用する方法と使い分け、あるいは組み合わせることで、ほとんどの場合において、ほぼ満足できる結果が得られました。

Illustratorとかなら、きっと、もっと簡単に綺麗な文字を作ることができるのでしょうね。Photoshopでなんだか文字がはっきりしないという場合は、一手間かけてみる価値はありますよ。

コメント (0)

この記事へのコメントはまだありません。

コメントフォーム

トラックバック (1)

Photoshopで文字を綺麗に入れる方法

フォトショップでバナーなどを制作していると、文字がにじむということがありますが、
下記のサイトでは、様々な方法を検証していました。

この記事のトラックバックURI
http://dxd8.com/archives/90/trackback/
この記事のURI
http://dxd8.com/archives/90/