こんにちはrey( @reydesign8376) です
フォトショップの合成技をやっていきます〜
↑上の画像はその合成した画像になります
では早速!
ここで使える合成技
- 自社ECサイトやAmazon、楽天に使用する画像で使える。
- 0から写真を撮らなくても良い感じの物撮り風画像ができる。
私はECサイト運営をしているのでその際に使ってます
俗にいうフォトショ職人、(クソコラ…)笑です
用意する画像
背景となる画像、商品画像(合成したい物の画像)
背景となる画像は無料でもOK※商用利用には各サービスの利用規約をご確認ください。
今回は机の上にサプリの袋が置いてある感じの画像を作っていきます
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-19.42.02-1024x654.png)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-19.58.06-741x1024.png)
無料画像ならここが便利
イラストAC
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-19.38.02.png)
![](https://jp.static.photo-ac.com/assets/img/open_grap.png)
オーダン
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-19.23.48.png)
![](https://o-dan.net/assets/img/jy992j_7gus-clem-onojeghuo-og.png)
合成方法
では合成していきます
サイズはお好みの任意サイズで制作してください。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.01.17.png)
画像を埋め込みます
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.04.43-1-1024x930.png)
自分で撮った画像を背景の明るさに合わせます(またはその逆でもOK)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.05.11.png)
⌘Y>「被写体を選択」で画像を切り抜き周りを消します。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.05.33.png)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.09.47.png)
パッケージが少し黄色味なので周りの色に合わせて彩度を下げていきます。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.10.06.png)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.10.24.png)
パッケージの下に影を作ります。
元々ある周りのものに合わせて影作ると自然に馴染みますが
パッケージに注目されたいので少し影を濃くします。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.13.19.png)
レイヤースタイルでも影はできますが、自由に2段階の影を作りたいので
パッケージの形に合わせた塗りつぶしレイヤーをぼかして影にしていきます。
次にパッケージにできた影を利用して光を作っていきます
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.14.15.png)
レイヤーを黒で塗りつぶし
フィルター>描画>逆光 で光を作ります
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.14.44.png)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.15.20.png)
逆光の設定ができたら
画像に合わせて、「比較(明)」〜「カラー比較(明)」の間でレイヤーの加工を変えます
今回は「スクリーン」で設定しました。
これでだいぶ背景画像と自分で撮影した画像が馴染んできました。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.16.17.png)
別撮りしたパッケージの中身なども加えてあげるとさらに馴染んでいきます。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.17.28.png)
最後に乗算をかけて完成となります。
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-08-20.53.32.png)
はい!大体20〜30分で出来上がりました。
いかがでしょうか?意外と簡単に出来上がりました〜ぜひweb制作にお役立てくださいませ!
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/img_gumi.png)
コメント