写真を使ったバナー作成の機会は、ネットショップや商品販売サイトなどでは多いのではないでしょうか。

写真と文字を重ねるだけだと、素人っぽくなりがちだったりして見栄えの良さにかけます。

また、写真、文字、背景色と要素の数が複数あるので、それぞれの大きさやバランスに時間がかかってしまう事も解消したい問題ですね。

そこで、今回は背景写真と文字を使った基本的なバナー画像の作り方をご紹介いたします。

写真バナー作り方のポイント

写真の事前加工

使いたい写真は、あらかじめ余分な部分を切り取っておくと配置しやすくなります。windowsをお使いであれば、標準で搭載されている「ペイント」ソフトなどで、トリミングができます。

画像作成ソフトでバナー作成をする際には、大きさは微調整するだけで、基本的には配置をするだけで作成できるように頭の中でバナー完成のイメージを描いておくとやりやすいです。

今回の写真の場合も、下に1行のテキストを入れ、その上にイチゴがたくさん並んでいる写真を大きめに配置するというイメージを決めてから制作に取り掛かりました。

写真と背景色の色のバランス

写真の中で主に使われている色とバランスが取れるように背景色を選びましょう。

今回の写真ははほとんど赤という非常に分かりやすいものですので、背景色も同系色の赤でまとめました。

人物や様々な色が使われている場合も、その写真の印象から「色」という観念に絞って配色バランスがとれているかどうかを気にしてみると、全体的なまとまりがでてきます。

写真の上に文字を置く時の注意事項

写真は細かく異なる色の集合体でもあります。そのため、上にテキストを配置した時に、読みやすい部分と読みにくい部分ができてしまう事がよくあります。それを回避するために、文字にふちどりを付けたり影を付けて読みやすくなるように工夫をする事が必要です。

テキストにアレンジを加えなくても読める配置を探すのではなく、読みやすくするために文字に加工をしましょう。

バナー全体のバランスとして、メッセージの伝わりやすさを考えたテキスト配置を優先にして、文字の加工は部分的に入れてもよいです。