イメージ画像のテキスト作成のポイント〜Photoshop

イメージ画像にテキストを置く場合、可読性が問題になります。
せっかく良い画像を用意したけれども、テキストの可読性が悪いためしっくりとこない場合も多いです。

簡単なパターンを試してみました。サンプルにした写真は東南アジアのある町の風景です。これに「Life」というテキストを入れて試します。

テキストカラーについて

イメージにテキストを入れる場合の基本的なテキストカラーには、黒、白、赤がありますが、もっとも使いやすく効果的なものは白です。
白、赤、青、黒と入れ替えてみました。

白は比較的読みやすくその他の色は何か意図的な意味合いを含んでいるようにも見えます。黒は少し見づらい感じがします。

白は無難に使用できそうですが、明るい写真では可読性が悪くなります。

白文字の可読性を高める

半透明黒のレイヤーを使用

写真の上に半透明黒のレイヤーを入れる方法があります。Photoshopで使用するにはレイヤースタイルのカラーオーバーレイを使用するとよいです。

可読性が上がり良い感じになります。
透明度はテキストと画像の重要度の兼ね合いで調整すれば良いでしょう。読んでもらいたいのか見てもらいたいのかです。

他の色をレイヤーに入れても良いですが、やはり意図的なものが感じられます。

白半透明レイヤーも効果的です。

一部分のみ半透明黒レイヤーを使用する方法

画像はできるでけオリジナルのものを見せたい場合は上の方法は使用できません。
この場合はテキスト部分のみに半透明レイヤーにしてみると良いです。

背景の一部分のみぼかしを使用する方法

背景に半透明のレイヤーを入れる方法と同じ考え方ですが、背景をぼかす方法もあります。
このサンプルでは白のテキストがより見にくい右下に移動しています。

その他の効果

テキストに境界線を入れる事は容易に考えられますが、テキストのイメージが大きく変わることに注意しなければいけません。

テキストに対してレイヤースタイルの光彩（外側）、色はグレー系を設定して描画モードを乗算に設定するとテキストのイメージを壊さずに可読性を上げることができます。