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

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

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

サイトのキャプチャ

Site

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

文字周りの実寸大

Site -実寸大画像

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

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

  • アンチエイリアスの種類は「鮮明(Crisp)」
  • 配置する際は1px未満の端数は削除

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

Photoshopのキャプチャ

「鮮明」に

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

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

Photoshopのキャプチャ

文字を配置

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

Photoshopのキャプチャ

自由変形に

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

Photoshopのキャプチャ

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

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

Photoshopのキャプチャ

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

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

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

基準点を変更してみた:500%拡大

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

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

実寸大は、こちら。

基準点を変更してみた:実寸大

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

via: Fonts : Round Values or Snap to Pixels ?

top of page

©2017 coliss