masaca（@masaca_dApps）です。
Webデザインのメインビジュアルやバナーで、写真の上に文字を乗せる表現はよく使います。
写真の上の文字が見づらかったり、文字が読めない状態はデザイン初心者によくある失敗です。
写真の上に文字を乗せるときにPhotoshopでちょっとした効果をテキストや、写真にかけることで見やすさを向上させることができます。
今回はカンタンで、しかもずっと使えるテクニックを紹介します。どんな風に作っているのか参考になるようにpsdデータもDL可能にしました。
masaca
目次
ドロップシャドウを使う
Before
文字の中心部が読みづらい状態になっています。どんなに素敵なキャッチコピーも見づらければ機能しません。
After
ドロップシャドウのレイヤー効果をかけて、文字の視認性を高めました。不自然にならない程度に抑えることがポイントです。
光彩を使う
After
光彩のレイヤー効果をかけて、文字の視認性を高めました。色は草の部分からスポイトで取ることで写真に馴染みます。
うすく広範囲にかけることで写真のやわらかいイメージと合っています。
masaca
境界線を使う
Before
白い文字を乗せた場合、まったく文字が読めない状態になってしまいました。
After
境界線のレイヤー効果をかけることで、文字がくっきり読めるようになりました。
境界線の色は写真からスポイトで取りました。
文字の背景にボックスを配置する
Before
文字の一部が読みづらい状態になっています。
After
文字の下にボックスを配置し、視認性を上げました。スポーティやデジタルなイメージの表現とよく合います。
ボックスはベタ塗りでも良いですが、少し透明にして使ったりします。
画像を暗くする
Before
全体的に文字が読みづらい状態になっています。
After
カラーオーバーレイのレイヤー効果をかけることで、文字の視認性が高まりました。
黒のカラーオーバーレイを薄くかける方法はいろんな場面で使えます。
画像にパターンオーバーレイを使う
After
パターンオーバーレイのレイヤー効果をかけることで、文字の視認性を高めることと質感を出すことができます。
やや見づらかったので、光彩のレイヤー効果も併用しました。
画像をぼかす
Before
読めないことはありませんが、もう少し読みやすくしたいですね。
After
「フィルター」→「ぼかしギャラリー」→「虹彩絞りぼかし」をつかって画像の一部をぼかしました。
画像全体をぼかして文字を乗せることもありますが、主題をぼかしたくない場合は画像の一部のみぼかしをかけます。
psdデータのダウンロード
今回紹介したすべてのサンプルデータのpsdをダウンロード可能にしました。（再配布可能なpixabayの写真素材を使っています。）
レイヤー効果の使い方の参考にしてくださいね。
まとめ
写真の上に文字をのせるときは、はっきりと見える状態にしていなければ機能しません。
紹介した方法を使うだけで、文字の視認性を確保することができますのでデザインのテイストにあわせて手法を使い分けてくださいね。
masaca
【永久保存版】Webデザイン初心者でもわかる！フォントの選び方を5つの事例で解説
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す