文字の縁取り
文字の縁取り

暗い背景色に文字を入れる場合、明るい色で文字を入れると見易くなります。
右の例を見ても判るとおり、文字色が背景色と明度が近い(コントラストの低い)色になればなるほど文字が見辛くなります。
例えば HTML の背景色を黒にした場合、body タグでリンク色指定していない場合、エディタが自動生成したままの状態などの場合では、リンクの文字列の色が青、もしくは深い青なのでとても見辛いですよね。 ぎくっ!とした方、HTML の link , vlink alink の設定を見直しましょう(笑)
HTML ではこの様な場合に見易くするには色を変更するしか方法はありません。

しかし、タイトル画像などはページ全体のイメージに大きな影響がある為にどうしても背景色と近い色や明度で文字を入れたい場合があるかと思います。

このような場合、文字の周りにコントラストの高い色で縁取ることで文字をくっきり見せることが出来る様になります。
今回は黒い背景に青い文字を入れてみたいと思います。普通ならば文字がかなり見づらい配色です。

-Color Sample-

DRIFTING WEB
DRIFTING WEB
DRIFTING WEB
DRIFTING WEB
DRIFTING WEB
DRIFTING WEB
DRIFTING WEB

-Color Sample-



それでは作業開始
では早速始めましょう。 [ファイル] - [新規] で画面を開きます。縦横のピクセルサイズを決めましょう。
ここでは背景色は透明を選択してあります。今回は背景を透明にしてありますので背景色にしたい黒で塗りつぶします。
背景色は入れましたが、とりあえずレイヤー1 ( 背景色のレイヤー ) は非表示にしておきましょう。・・・・だって黒の背景に青の文字じゃ、作業するのにも見づらいですから(笑)
では描画色を青に設定して、文字を入力します。

文字のサイズは画像のぎりぎり一杯のサイズにしたい所ですが、縁取りをするためには上下左右にちょっと余裕が必要です。
文字を入力する際は「アンチエイリアス」を使うと文字のギザギザが目立たなくなりますので綺麗に仕上げたい時は積極的に利用しましょう。( 最近のバージョンでは適用具合が選べます )

縁取りになる部分を作る
縁取り部分を作ります。同じレイヤーに描き加えても良いのですが、後で縁取りの色を変更したいときなどに融通が効かないので、文字とは別のレイヤーを作って縁取り専用のレイヤーを作ります。
レイヤーパレットの [ レイヤー2 ] をドラッグして、レイヤーパレットの下の方にある [ 紙のマーク ] 部分にドロップします。

レイヤーをコピーこれで「レイヤー2」のコピーが作られます。レイヤーの名前も「レイヤー2 のコピー」になっていますね?
これでレイヤー1,レイヤー2,レイヤー2のコピーと、3つのレイヤーが出来ました。この後、どのレイヤーがどの役割なのかを把握しやすくするためにレイヤーにちゃんとした名前を付けましょう。
名前を付けておけば制作を中断した時などに各レイヤーの内容をいちいち確認しなくて済みますし、作業効率がかなり変わってきます。
パレットの「レイヤー2コピー」の部分をダブルクリックしてレイヤーオプションを出し、「文字」と言う名前にしましょう。
同様に「レイヤー2」は「縁取り」、レイヤー1は「背景」と言う名前にしましょうか。



バージョン違いでの追加作業とここまでの確認
さて、[ 縁取り ] のレイヤーには の文字は入ってますか? Ver.5.5 や 6 など、新しめの Photoshop ( 製品版 ) には入っているはずです。
これは、文字がベクタ形式になっている事を意味しています。この状態ですと文字を回転させても劣化しないなどの便利な点はあるのですが、この先の加工が出来ません。
の部分を右クリックして出てくるメニューの中の [ レイヤーをラスタライズ ] を選択してください。Photoshop でもが入っていない場合やその他のソフトの場合は何もする必要はありません。

では、ここまでの作業でのレイヤー状態を確認してみます。レイヤーの状態は上から
[ 文字 ]
[ 縁取り ]
[ 背景色 ] ( 非表示 )

となっていますね?なっていなかったらこの状態にして下さい。
それを確認したら次の作業に入ります。


作業再開
では加工を再開します。レイヤーパレットの「縁取り」をシングルクリックします。
ブラシマークが移動し、アクティブレイヤーは「縁取り」に移動しましたね?

「縁取り」レイヤーの文字の部分だけを範囲選択します。 [範囲選択] - [選択範囲の読み込み] を選択します。
そうすると[選択範囲の読み込み] ダイアログボックスが開きます。
この状態では書類名は「名称未設定1」、チャンネルは「縁取り/透明部分」、選択範囲は「新規選択範囲」に
なっているはずです。確認できましたら[OK]をクリックします。
そうすると文字の周りに選択範囲が存在する事を表す点線が現れます。

[範囲選択] - [選択範囲の変更] - [拡張] を選び、縁取りの太さを設定します。ここでは2ピクセルにしてみました。選択範囲を表す点線が文字より外側に移動しましたね?

さて、縁取る色で塗ります。塗る色が白、黒、グレー以外の場合はカラーパレットの描画色に塗りたい色を設定しておきしましょう。
[編集] - [塗りつぶし] で塗りつぶします。描画色、背景色、白、黒、グレーの他にもあらかじめ登録しておいた画像でも塗りつぶす事が出来ますが、ここでは背景色が黒なのでその正反対の白を選択しました。
どんな色にしたら良いか判らない場合はとりあえず適当な色を選べば OK 。縁取りの色は [ 縁取り ] レイヤーを色調の変更や違う色で塗りつぶすだけで簡単に変更することが出来ます。

それでは塗りつぶされたら [範囲選択] - [選択範囲の解除] を選択し、非表示にしてあった背景を表示します。

これで完成です。黒の背景に青の文字をそのまま入れるだけでは見づらく目立たないものですが、白の縁取りを入れることで文字が引き立つ様になりました。
「縁取り」レイヤーを表示非表示を切り替えてその効果を見比べてみて下さい。

この程度ではロゴ「デザイン」なんて段階ではありませんが、こうしたちょっとした工夫で見易いページになり、ページ全体の印象も変わってきます。



戻る
戻る