designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)

【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)

  • 2018.05.21
  • デザイン
  • ワークショップ
Updated: 2018.05.22
久々のデザインワークショップですが、今回は料理写真のレタッチということで、より「シズル感」のある写真を作っていきたいと思います。ちなみにシズル感とは、感覚に訴えかけるような、つまり食欲を刺激するような表現という意味で用いられます。   過去では、人物写真のレタッチなどについてまとめてきましたが、料理写真の場合はまた異なるアプローチが必要になってきます。料理写真のレタッチにはいろんなテクニックがありますが第一回目の今回はPhotoshopを使って色調補正を調整する方法について紹介していきます。 (参考記事) 【デザインワークショップ】vol.2 モデル写真のレタッチ(ベースメイク編) 【デザインワークショップ】vol.3 モデル写真のレタッチ(ポイントメイク編) 【デザインワークショップ】vol.4 モデル写真のレタッチ(ポートレート編) 【デザインワークショップ】vol.12 モデル写真のレタッチ(特殊メイク編)  
食欲をそそる色味を表現する
食欲を刺激するためには、やはり色というのは重要な要素になります。広告デザインにおいては色相によって美味しそうに見える色がある程度決まっています。主に料理写真で使われるのはやはり暖色系が多いのではないでしょうか。逆に寒色系、特にブルー系は食欲を減退させる効果があると言われます。   ここではトーンカーブを使って、赤・緑・青の色みを調整することで、より美味しそうに見える写真に仕上げていきます。今回は次の写真をサンプルに使います。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)  
STEP1. 色みごとのレベルを調整していく
1. 写真のレイヤーをコピーして、色調補正用とベース写真のレイヤーを用意します。ベース写真のレイヤーは非表示にしておき、以降は色調補正の編集用イメージのレイヤーを使っていきます。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   2. クイックマスクモードに切り替え、ブラシツールで「赤色」を強調させる部分をなぞっていきます。ここではお肉とニンジンのところを適用させます。この時ブラシの硬さは50%くらいにしておいた方が境界線が自然になります。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   3. クイックマスクモードでなぞった部分から選択範囲を作成します。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   4. 【色調補正】→【トーンカーブ】で赤色を強調させていきます。適用させる部分は先ほど選択した範囲のみになります。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   5. 再度クイックマスクモードに切り替え、ブラシツールで「緑色」を強調させる部分をなぞっていきます。ここでは野菜のところを適用させます。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   6. 先ほどと同じくクイックマスクモードでなぞった部分から選択範囲を作成します。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   7. 【色調補正】→【トーンカーブ】で緑色を強調させていきます。こちらも適用させる部分は先ほど選択した範囲のみになります。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   8. 最後は、ブラシツールで「青色」を強調させる部分をなぞっていきます。ここでは背景やお皿のところに適用させていきます。こうすることで、赤色と緑色のコントラストがくっきり付くようになります。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   9. 最後も同じくクイックマスクモードでなぞった部分から選択範囲を作成します。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   10. 【色調補正】→【トーンカーブ】で青色を強調させていきます。こちらも適用させる部分は先ほど選択した範囲のみになります。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)  
STEP2. コントラストと透明度の調整で仕上げていく
1. 最後の仕上げに写真全体に対して、トーンカーブでコントラストをつけるようにします。写真が暗い場合は明るめになるようにしておきましょう。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   2. このままでは効果が強すぎて不自然な印象があるので、ベースのイメージレイヤーを表示させて、色調補正用のレイヤーをグループ化して一つにまとめて、透明度を変更しながら自然に見えるくらいまで調整します。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)   これで色調補正を変えた写真が出来上がりました。Beforeの写真と比較してみましょう。今回は、赤・緑・青と三回に分けましたが、クオリティにこだわる場合には、色別にもっと細かく調整してみるといいかもしれませんね。 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編) 【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編)  
  いかがでしょうか、だいたいの写真では部分ごとに写真の持つ色味が異なり、また料理写真の場合には食欲を刺激させるために効果的な色味も差があります。一回で全体に適用させるのではなく、このように色味ごとに分けて調整することがポイントになります。引き続き「【デザインワークショップ】vol.14 料理写真のシズル感を表現してみる(ラップフィルター編)」でも使えるテクニックを紹介していきたいと思います。

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact