写真に文字を乗せる画像作成時のデザインバリエーション

1. 写真と文字のコントラストに気をつける

まずはじめに気をつけたいことは、文字が載っている写真の場合、文字を読ませつつ伝わる写真にしなければいけません。要は「文字」と「写真」両方の要素を共存させなければいけないということです。

例えば下の比較写真のように、左側は写真の色味と同じような文字の色では文字が読みづらく、共存していないですよね。

たまに「あえて」明るめの写真の上に白い文字を乗せたりする広告などもありますが、あえてそういう風に見せるにはそれ相応のネームバリューが必要になってくるので、基本を知ることも含め、できるだけコントラストは意識しましょう。

コントラストとは？

コントラストとは直訳すると「対比」という意味で、デザインのコントラストでいうと色やトーン、形などの差違のことをいいます。

今回のわかりやすい例ですが、暗い写真の場合は白などの明るい文字色にし、明るい写真の場合は黒などの暗い文字色にすると写真と文字のコントラストが高くなり、文字と写真が共存しやすくなります。

このように、写真の上に文字を乗せる場合はまずコントラストを意識しましょう。

2. フォントを写真の雰囲気に合わせて選ぶ

デザインのコントラストのことはなんとなく理解できましたね。

文字を読ませるためのコントラストと同じくらい大事なのは、乗せる文字のフォント選びです。フォントにはしっかりしたフォントや手描きフォント、柔らかみのあるフォントなどいろんな種類のフォントがあり、どんなフォントを使うかによって写真の持つ雰囲気がガラッと変わります。

フォントの選び方が難しい！という方は、画像を作成するときにまず「何をどう伝えたいか？」を考えるとおのずとフォントを選べるようになります。

3. 写真の上に黒のレイヤーを乗せる

使用する写真によってはどうしてもいろんなものが載っていて描写が細かいものや、明るすぎる空の写真だったり、文字を乗せるために色味を加工するにも限界があったりしますよね。そんなときは写真の上にレイヤーを重ねる方法もあります。

photoshopの場合の方法ですが、

という方法です。
ちなみにボクはけっこうこの方法で画像作成しています。

写真を無理やり暗くするので文字は乗せやすくなりますが、画像が全体的に暗くなりがちなので、黒のレイヤーの透明度は10から20くらいがオススメです。

webサイトのタイトル画像などで使用する場合は暗くなりすぎるとイメージに関わるので、できるだけ明るくなるようにバランスに気をつけて透明度を設定しましょう。

4. 文字にシャドウをつける

写真を暗くするのはちょっと・・という方は、文字にシャドウ（影）をつけて文字の可読性を上げる方法もあります。

photoshopでのシャドウの付け方ですが、

といった方法です。
シャドウがあるものとないもので比較画像をつくってみました。こんな感じです。

文字に影をつけるので、設定次第では文字まわりが黒くなりすぎることもあるので、できるだけ自然に読みやすくするのがコツです。

5. 写真をモノクロに加工する

最後は手っ取り早く文字を乗せる方法を・・それは写真をモノクロ加工するやり方です。

写真をモノクロにしてしまうとカラーを気にする必要がなくなるので画像をつくりやすく、かつクールかつおしゃれな雰囲気を出すことができます。

photoshopで写真をモノクロにする方法はいくつかあって、写真をグレースケールモードにすることでモノクロになりますし、色調補正から「白黒」を選択することでモノクロにすることもできます。

自分に合った加工方法を見つけてもらえたらと思います。