ビジネスとIT活用に役立つブログBlog


伝わりやすいバナーをデザインする ポイント(写真のレタッチ編)

この記事をシェアする:

前回、伝わりやすいバナーデザインのポイントを文字の組み方をメインに紹介させて頂きました。
さらに魅力的なバナーにするために、今回は写真のレタッチ(写真データの加工・修正)についてご紹介したいと思います。
視覚的にイメージを伝えることができる写真は、レタッチの方法によってバナーの雰囲気が変わってきます。食品の写真を使用する場合は、ユーザーに「おいしそう」と思われるように自然物は鮮やかに瑞々しさを強調するなど、それぞれの魅力を引き出すために被写体に見合ったレタッチが必要です。

名称未設定-1

今回は「食品」 「人物」 「自然」3種類の被写体を題材にしたレタッチ方法をご紹介したいと思います。
使用ツールはAdobe PhotoshopCS6です。

食品のレタッチ

食品のレタッチには何より「シズル感」が大事になってきます。
被写体が持つ「おいしそうな感じ」を引き出すための色合いの調整がポイントになります。
では、例としてソーセージと目玉焼きの画像をレタッチしていきます。

「シズル感」 とは?
食欲や購買意欲を刺激するような食品の活きの良さや瑞々しさと言った「おいしそうな感じ」のこと。引用元:はてなキーワード

001

1)全体の明るさ、陰影を調整

写真全体が暗いので、トーンカーブ等で明るさを調整し、陰影を濃くして立体感を強調します。

001

補整前

002

補整後

2)被写体ごとに色味を調整

瑞々しさを強調するために鮮やかさをプラスしますが、ソーセージや目玉焼きなど被写体はそれぞれ色味が違うので調整の度合いが変わってきます。
そこでそれぞれ個別に調整をかけていきます。

ソーセージの色味を調整

ソーセージ

ソーセージは色相・彩度パネルで彩度を上げて鮮やかにしました。

目玉焼きの色味を調整

目玉焼き

目玉焼きの黄身はソーセージと同様に彩度を上げて明るい色味に調整しました。
白身には分かりにくいですが少し青味がかかっているのでカラーバランスで暖色に修正します。

食品の色味を調整する際のポイント!
食品の写真は暖色系に寄せた方がよりシズル感が出るので、少し赤味を足すと効果的です。 試しに青味のかかった画像(寒色系の色合い)を作成してみましたが、やはり暖色系の色合いの方が美味しそうに見えるかと思います。

004

寒色系の色合いにした場合

005

暖色系の色合いにした場合

3)最後にもうひと手間

最後にさらにシズル感を強調するために湯気を足してみました。

006

完成形

001

元画像

人物のレタッチ

人物の写真がメインの場合は表情が大切になってきます。そこで顔のレタッチをメインにご紹介します。
例として親子の画像をレタッチしていきます。

001

1)全体の明るさ、コントラスト、彩度を調整

元の画像は少しグレーがかかったような色味なので、明るさを調整し、彩度を上げて鮮やかな画像に修正します。

明るさ調整後

明るさ調整後

彩度調整後

彩度調整後

2)人物の顔色を明るくする

逆光なので、人物の顔が周りの植物に比べて少し暗く見えてしまいます。
そこで、顔のみレタッチを加えていきます。手順は以下の通りです。

草原で遊ぶ親子

  1. 全体の明るさを調整します
  2. 顔のみ少し明るくします
  3. 顔が白っぽくなってしまったので、頬に赤味を加えます
  4. 顔全体の血色をよくするために、彩度を上げます

3)人物の表情に少し手を加える

人物の顔のしわを少し薄くし、口角をあげました。
なるべく素材を生かすことが望ましいですが、ツールを使用するとこういった調整も可能です。

005

左:元の画像  右:補正後の画像

明るい表情の親子のバナーができました。

006

完成形

001

元画像

自然物のレタッチ

今回は千葉の房総半島の写真を使用して、観光PRバナーを作成してみます。
ユーザーに「ここに行きたい!」と思わせるような鮮やかで美しい写真にしていきたいと思います。

001

1)写真全体を明るくする

これまでの例題同様、全体の明るさを調整します。

001

明るさ調整前

002

明るさ調整後

2)被写体ごとに鮮やかさを調整

山の緑に黄色味がかかってしまっているので色相を調整して鮮やかな緑にしました。
海は色相の調整とさらに彩度をあげて明るくしています。

003

調整後

3)最後にもうひと手間

背景と文字の色のコントラストが弱いと文字が読みにくくなってしまいます。
そこで背景に少し濃い青を敷き、文字には縁取りを加えました。

左:加工後  右:加工前

左:加工後  右:加工前

鮮やかで美しいバナーができました。

006

完成形

001

元画像

さいごに

被写体ごとのレタッチの仕方についてご紹介しました。
1枚の写真に映り込んでいる被写体はさまざまで、被写体ごとにより魅力的に見えるようなレタッチが必要です。
少しでも参考になれば幸いです。

 

The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!