Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり

Post on:2013年7月30日

sponsors

dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。

簡単に意訳すると、
ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの？」
オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」
という感じです。

テクニックの紹介の前に、まずは文字周りを実寸大にしたものから。

カラーのコントラストとしては決して見やすい組み合わせではないですが、文字は非常にくっきり見やすくデザインされています。

で、デザインする際のポイントは2点。

一つ目のアンチエイリアスの種類は、「鮮明」を選択します。

「鮮明」に

二つ目の配置する際は1px未満の端数は削除は、手順を追って説明します。

文字ツールで文字を普通に配置します。

文字を配置

文字のレイヤーを選択し、自由変形（Cmd+T）にします。

自由変形に

基準点のポジションを確認します。

ポジションがX:112.50px、Y:130.12px

文字をピクセルにフィットさせるため、小数点以下の端数は削除します。

Xを112px、Yを130pxに修正

あとはリターンキーを押して、自由変形を確定させて完了です。

実際に見栄えが異なるかどうか試してみました。
実寸だと差が分かりにくいので、500%拡大です。

上：基準点の小数点以下を削除、下：小数点以下あり

上の小数点以下を削除した方は無駄なピクセルがないですね。
cとoの間、oとlの間が繋がってないので、キレイに見えます。

実寸大は、こちら。

フォントによって違ったり、サイズによって違ったりもするのかな。