商品の切り抜き画像の物体にPhotoshopでボワっと影を付ける方法（初心者）

Webページのコーディング用に支給された画像が商品の切り抜き画像で物体にちょっと影を付ける加工が必要だったので、Photoshopで自己流ですがやってみました。自分の場合、多分１年に１回くらいしかやらない作業で、やり方を忘れてしまうだろうから、ここに手順の詳細を残しておきます。動作環境はPhotoshop CC2019 ／ macOS Mojaveです。
作りたい影のイメージはこんな感じです。
![sample_w200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/9be1ffbc-e686-b577-31c2-3c44f83631a1.png)
本記事に使用した化粧品チューブの画像は、こちらのサイトからダウンロードしたモックアップ素材です。
[Cosmetics Bottle Mockup](https://mrmockup.com/psd-mockups/cosmetics-bottle-mockup/)

## Step 1. 切り抜き画像の読み込み
物体の背景を透明にした切り抜き画像を用意しPhotoshopに読み込みます。レイヤ名を「**元の画像**」としました。
![010_w450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/2144a6c6-d705-f5f0-10d3-7bdd212351de.png)
チューブの右下に影を付けたいので、メニューからイメージ／**カンバスサイズ**をクリックし、**基準位置**を左側に設定してカンバスを右側に広げます。作業しやすいよう高さも増やします。
![020_w500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/46c23e5e-f0b8-c350-efd1-ece2efd98602.png)
レイヤーパネルから**新規レイヤー**を追加し、**元の画像レイヤー**の下に配置します。レイヤー名を「**背景白**」に変更します。編集／**塗つぶし**で**背景白**レイヤーを「ホワイト」で塗りつぶします。このレイヤーは、これから作る影を見やすくするためのものです。
![030_w600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/1de34028-bec9-61c6-9580-a1f817f81b5e.png)

**元の画像**レイヤーを複製し、その名前を「**影の形状**」に変更します。**元の画像**レイヤーはロックしておきましょう。
![040_w300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/ac104a4c-bb60-be69-490a-ef5cc7df0cf4.png)

## Step 2. 影の形状の作成
**影の形状**レイヤーの画像を変形して影の輪郭を作ります。ここでは遠近法で変形してみます。編集／変形／**遠近法**を選択します。
![050_edit_trim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/164070ef-8b60-537d-3ff4-1c2f5a2927b4.png)
**基準点の位置**を左下に設定し、バウンディングボックスの周囲に表示される四角いハンドルをドラッグしながら変形していきます。図のように、**縦横比を固定**のリンクを解除して高さHを20%くらいまでペシャンコにすると影っぽい形になります。
![052_edit_clip_w500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/b7f74655-bb57-54e7-782f-14675ead97ab.png)
**影の形状レイヤ**を選択した状態で、選択範囲／**選択範囲を読み込む**をクリックします。チャンネルが「**影の形状 透明部分**」になっていることを確認し「OK」をクリックします。
![061_w500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/e0a2ab26-4e8b-d255-7a41-b5efbd23e947.png)
選択範囲／**選択とマスク**をクリックします。「ぼかし」を20px、「出力先」を「レイヤーマスク」に設定して「OK」をクリックします。
![063_edit_w600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/ccd7a3be-4d3e-db7a-fbd0-0137c5079813.png)
**影と形状**レイヤーにレイヤーマスクが設定されました。このレイヤーもロックしておきましょう。
![064_w300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/0b8458d7-4fe6-c935-0667-ae691493c95f.png)

## Step 3. 影の作成
レイヤーパネルから**新規レイヤー**を追加し、**元の画像レイヤー**の下に配置します。レイヤー名を「**影**」に変更します。
![070_w300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/c81f3da2-c9cf-1b6e-49f0-c9903fc025a0.png)
先ほどと同様に**影の形状**レイヤーを選択し、選択範囲／**選択範囲を読み込む**をクリック、「**影の形状マスク**」チャネルから選択範囲を読み込みます。
![071_w600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/843d9545-3614-cfd9-a5f5-40f771908f82.png)
再び**影**レイヤーを選択し「レイヤーマスクを追加」をクリックして、上で読み込んだ選択範囲をレイヤーマスクに出力します。
![072_w300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/f7b38bb4-cb17-9c35-1570-97951ea712b7.png)
影の先端部分の位置にガイドをクロスさせて目印にします。
![073_w400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/0e0dd9ab-3115-98ec-7b5b-42951096f86e.png)
以後、**影の形状**レイヤーは邪魔なので非表示にします。
![074_w300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/a8ed367c-2aca-f8ad-b963-42ab599a374c.png)
次はいよいよ影の色を付けます。影の濃淡や広がり方を確認しやすくするため、一旦、**影レイヤー**のマスクを適用しない状態にしてみます。レイヤーマスクサムネール（右側）をクリックし、属性パネルで“目玉”をクリックするとサムネールにバツ印が付きます。
![075_edit_w600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/f3fad077-9117-21e8-8417-84c4557de8de.png)
レイヤーサムネール（左側）をクリックします。
![076_w300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/eed4968a-cebd-5687-97a5-a346c6983938.png)
グラデーションツールに持ち替え、グラデーションエディターを開きます。「プリセット」は**描画色から透明に**を選択、他のパラメーターはデフォルトのままでよく「OK」で閉じます。オプションバーに並んでいるグラデーションの種類は**円形グラデーション**を選択します。
![080-081_edit_w500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/9d58e722-683e-0d82-3509-69f6ccd5b1e1.png)
十字のマウスカーソルを化粧品チューブの左端くらいに置いてグラデーションの開始点とします。そこからマウスを押したまま、ガイドのクロス位置目がけてドラッグします。
![082_w400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/76c98881-d05f-8ec7-e0e8-d4ea36234dbe.png)
影の“素”ができました。
![083_w500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/9745e410-d288-dcab-9bcd-42549d0da078.png)
レイヤーマスクサムネールをクリックしてマスクを適用すれば影が完成です！
![084_w500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/b07c5734-7d74-1910-1e5c-2324007f7797.png)
影のグラデーションを作り直したい時は、**影レイヤー**のレイヤーサムネール（左側）をクリックし、

1. Command+Aで全選択
1. DELETEキー押下
1. Command+Dで選択解除

によりピクセルデータを全部消去してから描き直します。グラデーションの開始点を変えることで、影の濃淡を調整できます。開始点がガイドのクロス位置に近付ければ影が濃くなります。

## 画像の差し替えへの対応
支給された切り抜き画像に後日、色味の調整などによる修正が発生した場合、画像を差し替える方法です。

**元の画像**レイヤーのロックを解除し「スマートオブジェクトに変換」します。
![A010_w300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/4163a94d-0812-48c9-c074-5d26fbeeb1d7.png)
レイヤー／スマートオブジェクト／**ファイルに再リンク**から差し替え用の画像ファイルを選択し、「配置」をクリックします。
![A011_edit_w450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/fd11f736-d697-7111-b968-14000d33a647.png)
スマートオブジェクトのリンク先が更新され、画像が差し替えられました。
![A012_w500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/8b0120fd-c5b4-29b1-3d1f-dbd181a4c1a4.png)