WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： デザイン >Photoshop

淡色の背景に白色のテキストを使用したいけど、そのままだと読めなくなってしまうと困ったことはありませんか？
今回はPhotoshopを使用して「淡色の背景でも白色のテキストを違和感なく読みやすくする方法」をご紹介します。

制作方法

テキストを背景の上に配置

淡い背景の上に白色のテキストを配置します。

ここまでの手順でこの画像のようになります。
そのまま配置しただけなのでとても読みにくいです。

ドロップシャドウを付ける

レイヤースタイル（レイヤーをダブルクリック）でドロップシャドウを付けます。

このままだと影を付けた感が強くて違和感を感じます。

違和感をなくすためにこのように背景色をスポイトで拾ってきます。

拾ってきた色の色味はそのまま色を濃くします。

ドロップシャドウの不透明度やサイズなどを調整します。

ここまでの手順でこの画像のようになります。
最初と比べると読みやすくなりました。

文字の下の背景を少し濃く（暗く）する

文字の下の背景を少し濃くしていきます。

新規レイヤーを追加

テキストレイヤーの下に新規レイヤーを追加し、描写モードを「乗算」にします。（画像右下部分）

ブラシツールを設定する

使用するブラシの設定を行います。（画像左上部分）
【ブラシ設定】
ブラシサイズ：200px（大きめに設定する）
ブラシの硬さ：0px
不透明度、流量：10px程度
カラー：ドロップシャドウで使用した色

ブラシツールで塗る

追加したレイヤーを設定したブラシで重ね塗りをしていきます。
（※ブラシで濃さを調整した後、「レイヤーの不透明度」や「レイヤーの複製」でも調整可能です。）

完成

こちらが完成したものになります。
before（元画像）

after（加工を加えた画像）

まとめ

今回はPhotoshopを使用した「淡色の背景でも白色のテキストを違和感なく読みやすくする方法」をご紹介しました。
少し手順が多いですが、慣れてしまえば応用もできると思うのでチャレンジしてみてください。