design
【Photoshop】思わずよだれが! 料理写真をより美味しそうに見せる3つのポイント
飲食店のサイトにおいて、写真の印象はとても重要です。料理の写真が美味しそうか否かで、ユーザーへの訴求力は大きく変わってきます。 そこで今回は、料理写真の魅力をさらにアップさせるためのポイントと、Photoshopを使った簡単な補正方法をご紹介します。
“美味しそう!”を決定する「明るさ」「色」「温度」
料理写真の補正で意識するポイントは
- 明るさ
- 色
- 温度
です。明度、彩度をほどよく上げることで「新鮮さ」や「温かみ」などを表現することができます。 また、温かい料理は温かく、冷たい料理は冷たく見せるといった「温度感」も意識してみると、より食欲のそそられる写真になると思います。
明るさについて
暗い料理の写真は、食材の色がくすんでしまい、美味しそうに見えません。
レベル補正機能で明るさを調節
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/9c1c9ba8136d4202be943b1b9b6690bd/tkg.jpg)
たまごかけご飯です。写真が薄暗いせいで新鮮さが感じられませんよね…。
この写真をレベル補正機能を使って調節していきます。明るい食卓は作れる!
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/24b779645146481999488a2d5a9d429e/akarusa02_03.jpg)
レイヤーパネルの「色調補正」ボタンをクリック。レベル補正を選択し、調整レイヤーを作成します。 黒いギザギザは「ヒストグラム」といい、画像内の明るさを示したものです。山が右側に近づくほど明るく、左側に近づくほど暗いと判断する指標にもなります。 この画像の場合、ヒストグラムが左に寄っているため、暗めということがわかります。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a0fe72f1bb26476dae4dbfdef85a942f/akarusa04.jpg)
白いスライダーを左へ動かします。右端の白いスライダーは画像内の暗い箇所を明るくする役割があります。 ヒストグラムの端辺りに白いスライダーを持ってくると、自然な明るさになります。 そして、全体的に少し明るくしたかったので、画像全体の明暗を調整する真ん中の灰色のスライダーを少しだけ左へ移動させました。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d4bf1af2519d4712b547eb4e600c1a10/tkg_a.jpg)
完成
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/0572d6ee1a0749b6b5ef2a072e187771/ba.jpg)
明るさを調節しただけでぐっと卵の新鮮さが感じられるようになり、美味しそうになりましたよね。 ちなみに、ネギとめんつゆをお好み、ごま油1~2滴をたらすのが私のお気に入りの食べ方です。ぜひ試してみてください。
色について
料理の写真を美味しく見せる色は、大体において赤や黄といった暖色系です。 青は食欲減退色のため、青みが強い写真は料理が美味しそうに見えません。また、せっかくのほかほかご飯の写真も青みがかっていては冷めた印象になってしまいます。
カラーバランス機能で色を調整
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e15df088e10b44c9b1f7410d9595c0ad/tako.jpg)
たこ焼き(ネギ多め)の写真です。写真全体が青みがかっていて少し冷めた印象です。
カラーバランス機能を使って調整していきましょう!
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/127ea40016064ab393d7810c2242ba81/iro02.jpg)
レイヤーパネルの色調補正から「カラーバランス」を選択。すると調整パネルが出てくるので、写真を確認しながらスライダーを左右に動かし調整します。ここでは赤色と黄色を強調させ、青みを引いています。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/db969afbbdeb42b7bfbafc0212253a0d/takoa.jpg)
ついでに明るさも少し上げて完成です。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/3c010fc476a0451b920d8db5818b5248/ba02.jpg)
鰹節が踊り出しました。
部分的に補正する
上記のカラーバランスパネルを使って色調補正するやり方がシンプルで個人的には一番やりやすいのですが、明るさについてで紹介したレベル補正も、明暗だけではなく、レッド・グリーン・ブルーそれぞれの色の強弱を調整することができます。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/58f0c9124bc2445caf4d382c92d44caa/niku01.jpg)
レベル補正パネルを開き、プルダウンをクリック。レッド・グリーン・ブルーそれぞれのスライダーを動かすと画像内におけるその色の強弱を調整できます。カラーバランス機能より少しコツがいるかもしれないので、お好みでどうぞ。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/130caa1431ff4d5b8660b5a557d5765e/niku3.jpg)
この写真でひとつ注意したいのが、緑色の植物・野菜に暖色を足しすぎると枯れたような印象になってしまうこと。画像の一部分のみ色を変えたい場合は、補正レイヤーにマスクをかけ部分的に補正します。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/726155554e324a42b2c9d8d6a9bb3268/ba3.jpg)
緑色はそのままに、肉の赤みを強調させ新鮮さをアップ。
暖色系は食欲を増進させてくれる色ですが、強調しすぎると、被写体によっては古っぽい印象になってしまいます。水やスポーツ飲料なども、赤みや黄みを足してしまうと「清涼感」「冷たい」「爽やか」といった印象がなくなるので気をつけましょう。
温度について
冒頭でも書きましたが、温かい料理は温かさを、冷たい料理は冷たさを強調させることがポイントです。冷たい飲み物には水滴を、温かい料理には湯気を加えるなどで温度感を表現できます。
今回は湯気を追加してアツアツ感をプラスします。
湯気を追加する
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/09a4cca7003b4cea9d487686645fc59b/yabai.jpg)
すでに美味しそう度100%ですが、温かみをプラスして120%まで引き上げたいと思います。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/75b8862a145e47688d0127b61001c52c/yabai01.jpg)
1.新規レイヤーを作成します
2.作成したレイヤーの描写モードをスクリーンに設定します
3.背景色を白に設定します
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a01741d261474468b8388c6c8c422388/yabai02.jpg)
[フィルター]→[描画]→[雲模様1]を選択。このように白いもやがかかります。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/dfd134b7a99e4527a3607fa55d7f1888/yabai03.png)
[フィルター]→[変形]→[波形]を選択し、大体これくらいの数値にします。
OKを押すと白いもやがゆらめいているように波形に変形します。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/5e63407fc6984ef7b4cfa443319f752c/yabai04.jpg)
1.なげなわツールを選択し、画面右上のぼかしの数値を20pxに変更します。
2.湯気を出したい箇所を選択します
3.ベクトルマスクを追加をクリックします
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/468ce9c147954781bd5e6e62d0b45f61/yabai05.jpg)
不透明度を調整します。この画像では70%にしました。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/fff4729e45c04365871c4f768aee240d/yabaia.jpg)
ブラシツールで湯気の形を調整したあと、同じ要領で周りにも20%程度の薄い湯気を作成しました。こうすることで湯気にも遠近感が出ます。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/3722e3e222094c1f9c2307e4b1078f24/ba4.jpg)
最初の画像と比較すると、まるでできたてのような温度感が伝わってきませんか?
最後に
「明るさ」「色」「温度感」を意識してみると、“美味しそう”の基準が客観的に、より明確になると思います。 WEB制作に限らず、SNSなどに料理の写真をアップする際にも覚えていて損はありませんので、ぜひ活用してみてください。
【参考サイト】
【Photoshop】食べ物をおいしく見せるためのレタッチ方法
http://www.ar-ch.org/mt/archives/2011/12/post-3.html
Photoshop:「明るさ・コントラスト」なんて使っちゃダメだ!
http://daredemopc.blog51.fc2.com/blog-entry-838.html
シズル感演出!食品から湯気を出す画像加工方法
http://sitebk.com/photoshop/steam/