Web制作ナビWeb制作ナビWeb制作に役立つ情報やサービスを紹介。その他プライバシーポリシーお問い合わせ写真に重ねた文字を見やすくデザインする9つのコツPhotoshopチュートリアル写真に重ねた文字を見やすくデザインするコツを紹介します。PhotoshopやIllustratorでのデザインに活用できます。Photoshopで作業する際のサンプルも掲載しています。サンプルは簡単に再現できるようにシンプルな設定で表現しています。グラデーションをかけるBeforeAfter写真にグラデーションをかけます。文字を配置するエリアの背景を暗めにすることで、文字を読みやすくします。サンプルでは、Photoshopを使って、写真に黒から透明のグラデーションを不透明度を40%で設定しました。写真をぼかすBeforeAfter写真をぼかすことで手前に配置した文字にピントをあわせることができます。サンプルでは、ぼかしの「半径」を5に設定しました。見せたい部分以外をぼかすBeforeAfter写真で、見せたい部分以外をぼかします。文字はぼかしたエリアの上に配置します。「半径」を5に設定して、ぼかしをかけました。次に、上のレイヤーにレイヤーマスクを追加し、人物のエリアをブラシツールを使って黒く塗ることで、その部分だけぼかしていない下のレイヤーが見えるようにしました。写真を暗くするBeforeAfterあえて写真全体を暗くすることで、重ねた文字を読みやすくします。サンプルでは、Photoshopで写真にグラデーションレイヤーを重ねました。設定は、「グラデーション」を描画色(黒色)から透明色にして、「スクエア」を円形、「角度」を90度、「比率」を200%にして、「逆方向」にチェックを入れました。写真に色を重ねるBeforeAfter写真にあえてカラフルな色を重ねることで文字を読みやすくします。サンプルで、「べた塗り」レイヤーを重ねて、「色」を#477838、「不透明度」を60%に設定しました。文字と写真の間に帯を置くBeforeAfter写真と文字の間に色付きの帯を配置します。長方形の帯は写真とのバランスが取りやすいので使いやすい手法です。サンプルでは、長方形ツールで「塗り」をオレンジ色(#e59100)にして帯を配置し、レイヤーの不透明度を80%に設定しました。文字と写真の間にブロックを置くBeforeAfter写真と文字の間にブロックを配置します。丸や正方形など、デザインに合わせたブロックを配置することで、全体のバランスを取ることができます。サンプルでは、「楕円形ツール」で円を描き、「塗り」の色を青色(#797fab)にして、不透明度を80%に設定しました。文字の上下にラインをつけるBeforeAfter文字の上下にラインを配置することで、文字に視線を誘導します。文字にドロップシャドウをつけるBeforeAfter文字にドロップシャドウをかけることで、読みやすくします。サンプルでのドロップシャドウの設定値は次のとおりです。「描画モード」を乗算、カラーを黒(#000000)、「不透明度」を33%、「角度」を30度、「包括光源を使用」にチェックを入れて、「距離」を3px、「スプレッド」を11%、「サイズ」を10pxに設定しました。サンプル画像の写真素材はUnsplashから利用させていただきました。2019.03.24Top。