WordPress Make&サポート中小企業診断士「Weber」電話問い合わせバナー 問い合わせメール

Web中小企業診断士

~WordPressとWebマーケティングにご興味がある方向けのサイトです~

Webデザイン記事

写真に合成で湯気を入れる方法

2024/04/16

はじめに 実施のきっかけ

webコンテンツの制作スキルには、

1 html、cssなどのコーディング系
2 Photoshopによる画像処理系
3 Illustratorによるロゴ系
4 Jqueryによるアニメーション系
に分けらて捉えられると思いますが、今回はphotoshopによる画像処理系です。

湯気の写真と弁当を合成して、あたかもお弁当から湯気が出ているようにしてみたいと思います。
このきっかけは、コロナ禍でダメージを受ける、とあるレストラン様からのご要望でした。

合成で弁当から湯気を出す

1 準備するもの

素材は、プロが撮影した弁当の写真と、有料写真提供サイト今回は、(photoAC)から探してきた、湯気の写真です。

2 湯気の大きさを写真に合うように調整する

ブラシツールで、余分な煙部分を消していきます。その為に、ブラシツールの詳細設定をします。①大きさ(消す際に大きすぎず、小さ過ぎず)、②硬度(ブラシの濃さ)を適当な数値に設定します。そして塗りを黒色に設定します。黒で白色を消すイメージです。

スクリーンモード

3 レイヤーモードをスクリーンモード(スクリーントーン)で白黒合成する

次に写真と写真を重ね合わせ、合成していきます。その際には、湯気のレイヤーを上に持ってきた際に、レイヤーモードをスクリーンにします。スクリーンとは、スクリーントーンのこと(=白・黒の画像で黒色を透過させる) 

4 合成後の再調整

画像に煙が馴染むようにさらに、ブラシ(黒色)で消していきます。

カンパスサイズで調整

5 画像のサイズ変更でも調整する

画像が大きすぎれば 操作パネルの「イメージ」- 「カンパスサイズ」で小さく設定します。

レイヤーをスクリーンモード

6 まとめ

今回は、クライアントから、「お弁当が美味しそうに見えるように、湯気を出してくれないか?」というご要望に対する対処方法でした。photoshopでの写真合成には、色々な方法がありますが、今回のポイントは 1 ブラシツール(黒色)で余計な湯気(白色)を消すということと、2 合成の際のレイヤーの重ね合わせにスクリーン(トーン)を使うことかと思います。以上です。

-Webデザイン記事