小さい文字の処理と微細な縁取り

ロゴタイプを作るとき、フォントサイズが大きいと問題なくても小さい画像だと作るのが難しくありませんか?
ゴシック系の垂直と水平で構成される部分が多いフォントならまだしも、イタリック(斜体)などの小さめの文字の曲線を見易い画像にするのはかなり難しいことだと思います。
曲線はアンチエイリアスを掛けないと境界が荒くなり、普通に掛けるとぼんやりとした感じになる・・。
どちらの場合も綺麗に見えなくて困りものですが、これを何とかしてみましょう。

このコンテンツでは文字ツールのアンチエイリアスの設定が「あり」と「なし」の2種類しか出てきませんが、これはこのコンテンツを作った当時は Photoshop 4.0 を使用していた為です。現在の Photoshop では文字ツールでのアンチエイリアスは「なし」「鮮明」 「強く」 「滑らかに」といくつかの設定が出来る様になっているので、単純なロゴタイプでではあまり使うことは無いかもしれませんが、この手法はレイヤー機能が使えれば Photoshop 以外のグラフィックソフトでも使えますし、微細な縁取りやイラストなどの主線をもうちょっと鮮明にしたいなんて時にも応用することも出来るので、ちょっとした小技ではありますが結構重宝すると思います。でもやり方は本当に滅茶苦茶簡単なんです。


素材はこれです
今回のサンプル(大) ここではフォントは FutureLight をボールド(太字)掛けて黒地に白で使ってみます。
ちなみにこのサンプルのフォントサイズは 60 ポイント、アンチエイリアスありです。
元々このフォントはややイタリックっぽく、縦線が右に傾いているのが判るでしょう?
しかし、このサイズなら別に難しい事は何もありませんよね。

素材を小さいものにしてみます

それではもっと小さいフォントで作ってみましょう。最初と同じように黒の背景色に白い文字を入れますが、フォントのサイズは 10point と小さくしてみました。文字が小さくなると文字同士がくっついてしまったので字間を僅かに開ける設定にしてありますが、使うフォントとボールドの設定はそのままです。

小さい文字でロゴタイプを作ると [ Drifting ] の文字だけでは画像全体の大きさも小さく、比較し難くなるので文字を少し足して [ Drifting Web New Action ] として見比べ易くしてあります。
では、アンチエイリアスあり、なしの2つの設定で比較してみましょう。

アンチエイリアスなし アンチエイリアスあり
アンチエイリアスなしこれはアンチエイリアスなし。
文字は読めるけど、かなり荒いし、
フォントのイタリックっぽさが消えてしまって
これではまるでゴシックの様です。
このフォントを使う意味が有りませんよね。
アンチエイリアスありこれはアンチエイリアスあり。
イタリックっぽさは出ているみたいですが、
文字自体が薄く、はっきり読めません。
すでにボールドを指定していますから、後ちょっとだけ
文字を太くすると言うのは無理ですよね。


どちらも今ひとつですねぇ・・・あ、あれ?

アンチエイリアス「あり」「なし」どちらもフォントの特徴が出て、かつ、くっきりとは見えませんでした。アンチエイリアス「なし」では文字自体はくっきりとしていますがフォントの特徴が出ず、アンチエイリアス「あり」ではフォントの特徴は出ていますが、ぼんやりと薄い文字になってしまっています。

・・・・アンチエイリアスの強さがこの2つの例の中間位で有ればちょうど良いのでしょうが・・・(^_^;

さて、ここで思い出して欲しいのはアンチエイリアスとレイヤーのことです。
アンチエイリアス部分は黒と白の中間色である灰色に見えてはいますが、ここまでの行程では灰色なんて使用していませんよね。背景のレイヤーだけ見れば黒1色、文字のレイヤーは白1色でしょう?
それなのに何故灰色に見えるのかと言えば、文字のレイヤーの白の不透明度が 0 〜 100 %の間での合成されているので、白が 100 %では無い部分では背景の黒が透けて見えるので灰色に見えるのです。
次にアンチエイリアスありの画像は何故文字がはっきりしなかったのか?を考えてみます。
アンチエイリアスはエッジ部分の透明度を加減してジャギを消し、滑らかに見せる手法です。しかし、今回の場合は文字が細いために文字の殆どがアンチエイリアスの対象になってしまい、全体の透明度が低下してしまい細く薄い文字にしか見えなくなって居るのです。

この作例の「アンチエイリアスあり」で作った画像を細かく見ていくと、文字の白が 100 %になっている部分は殆ど無くなっています。これでは文字がはっきりしないのも当たり前です。
でも、拡大して見ると判りますが白が 10 %の部分や 30 %の部分など、不透明度が低い部分はしっかり存在しています。これらの部分の不透明度をもっと上げられたら、もっとくっきりとした文字になるでしょう?
そう、不透明度が低いなら重ねてしまえば不透明度が上がり、もっとはっきりしてくるはずです。
重ねるのは簡単。文字をまた入れるのではなく、文字の入っているレイヤーをコピーしてしまえば良いのです。

ブレイクスルー!・・と言うわけで早速作業にかかりましょう

レイヤーパレットの中の文字の入っているレイヤーを「紙のマーク」の上にドラッグ&ドロップします。
これでコピーが作られ、ズレる事もなく重なったはずです。どうですか?文字がちょっとはっきりしてきましたね?それでもまだ文字が薄いようなら何回か文字のレイヤーをこの方法でコピーします。今回は3回コピーして合計4枚のレイヤーにしてみました。
ただし、あまりコピーし過ぎるとアンチエイリアスなしの画像に近づいてきて荒くなってしまいますので注意して下さい。

4枚じゃちょっと薄いし、5枚じゃ濃いと言う場合は微調整する事もできます。
文字のレイヤーのうちの1つの不透明度をスライダを使って調整してみて下さい。
4枚で 400 %、5枚で 500 %とすると、そのうちの1枚のレイヤーの不透明度を調整することで 400 〜 500 %の間で細かく調整することが出来るはずです。

希望の濃さに出来たら、ずれたり間違って1枚だけ加工しないようにコピーした文字のレイヤー群だけを統合してしまいましょう。
ブラシマークは文字のレイヤーに付いていますね?他の文字のレイヤーの同じ部分をクリックし、リンクさせます。
ブラシマークの付いているレイヤーにリンクしているレイヤーにはのリンクマークが付いていますね?
文字以外のレイヤーにリンクマークが付いていないことを確認したら、レイヤーパレットの右上の黒い三角マークを
クリックし、メニューの中から「リンクと結合」を選択します。
これで幾つもあった文字のレイヤーは1つのレイヤーに統合されましたね?

で、効果のほどは?

では先ほどの2種類と今作った物を3つ並べて比べてみましょう。

アンチエイリアスなし レイヤーを重ねたもの アンチエイリアスあり
アンチエイリアスなし レイヤーを重ねたもの アンチエイリアスあり

若干荒いかもしれませんが、このフォントの大きさやモニタの表示の限界を考えればまずまずの出来だと思います。
局所的に不満な点があり、もっと完璧にしたい場合は消しゴムや鉛筆ツールで1ドットの大きさのブラシを使い、その適用量を 5 %程度まで落とした状態で少しずつ修正してみて下さい。

また、この方法を応用してコピーレイヤーの色を他の色にすることで選択範囲の拡張では作り出すことの出来ない非常に微細な縁取りを作ることもできます。

STEP 1)

レイヤーを1回コピーしたら下になっているオリジナルレイヤーの [ 透明部分の保護 ] にチェックを入れて、縁取りにしたい色で塗り潰して縁取り用にします。

STEP 2)

その縁取り用レイヤーを何回かコピーすると、不透明度が低かったアンチエイリアス部分がレイヤーを重ねることでくっきり見えてきて微妙な縁取りになります。

STEP 3)

複数枚になっているレイヤーだけを統合します。縁取りの色を修正する必要があれば [ イメージ ] - [ 色調補正 ] - [ 色相・彩度 ] で調整します。
一番上にあるレイヤーの文字自体はくっきりさせることは出来ませんが、縁取りがあることで文字の可読率は高くなっているはずです。



このレイヤーを重ねてエッジの強さを変える手法を使うとフォントだけでなく、ぼかしの入ったブラシで描いた線などでも同じ効果を作り出すことが出来ます。
リンクバナーなどはキャンバスサイズが小さいですから、使える文字サイズも小さく、ボケがちになりますからその様な画像を作る際に試してみてはどうでしょう?


戻る
戻る