アンチエリアスなしのフォントがギザギザになる条件と解決策

PhotoshopやFireworksでデザインをしていて、pタグ等の画像にしないテキスト情報として扱う部分はアンチエリアスなしでデザインするのが一般的だと思います。(まだクライアントがXP主流のため)
CSS3のtext-shadow・box-shadow・border-radiusなども使う機会も増えつつあり、わざわざ画像にしなくてもある程度は見栄えのいいデザインになるので、書き出しなどの手間を省くためにテキストで行っちゃうこともこれから多くなるかと思います。
でも、そんな部分に限ってデザイン段階でフォントがギザギザになっちゃうことがしょっちゅうあります。

なのでここでは、どんな条件の時にフォントがギザギザになるのかとその解決策についてまとめました。

フォントがギザギザになる条件

この画像をご覧になればわかると思いますが、フォントの設定が「17ポイント以上の太字」のテキストがギザギザになります。

でも、実際htmlで同じ設定にしてもギザギザにはなりません。(ScreenShot:WinXP)

デザインするときの解決策としては以下の2つの方法があります。

解決策1.テキストを複製してずらす

まずはテキストのボールドを解除してレイヤーを複製します。
そして複製したレイヤーを1pxだけ左右どちらかにずらすときれいな太字になります。

これはどこかで見つけてずっと実践してましたが、レイヤーが2つに増えてしまってテキストの修正が必要になった場合に二度手間になってしまいます。

解決策2.1pxのドロップシャドウ

よくCSS3のtext-shadowで「0 1px 0 #FFF」なんてやると思うんですが、このヒントを得て思いついた方法がこれ。

■Photoshopの場合
テキストのレイヤーを選択します。

レイヤースタイルの追加→ドロップシャドウで

  • 描画モード:通常
  • 色:テキストと同じ色
  • 不透明度:100%
  • 角度:0度(もしくは180度)
  • 距離:1px
  • スプレッド:100%
  • サイズ:0px

に設定します。

■Fireworksの場合
テキストのレイヤーを選択します。

フィルタの追加→シャドウと光彩→シャドウ(ベタ塗り)で
(※CS3以下はフィルタの追加→シャドウとグロー→ソリッドシャドウ。)

  • 角度:0(もしくは180)
  • 距離:1
  • 色:テキストと同じ色

に設定します。

この方法ならレイヤーも一つで済みますし、Photoshopならスタイルを保存しておけば使い回すことも可能です。
h3・h4など1ページ内で複数使う場合になればなるほど便利になるので、この方法も試してみてください。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ