Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

Photoshop(フォトショップ)のグラデーションツールで画像の境界線をぼかす方法

Photoshop(フォトショップ)のグラデーションツールで画像の境界線・縁をぼかす方法

Photoshopのグラデーションツールを使って、画像の境界線をぼかす方法を紹介します。
画像の境界線にぼかしを入れることによって、画像にやわらかい印象を与えることができます。

Photoshopを操作したことがない人でも、このページの内容に沿って操作すれば簡単にできる内容なので、ぜひ挑戦してみてください。

目次

完成イメージ

Photoshop(フォトショップ)のグラデーションツールで画像の境界線をぼかす方法

こちらが完成イメージです。
画像の境界線に白いぼかしが入るように加工してきます。 それでは順番に説明していきます。

1. Photoshopで画像を開きます。

フォトショップで画像を開く

まずは境界線にぼかしを入れたい画像をPhotoshopで開きます。

2. レイヤーパネルで画像を「背景」から「レイヤー」に変更する。

フォトショップのレイヤーパネルで背景からレイヤーに変更

レイヤーパネルで「背景」になっている画像を「レイヤー」に変更します。
そして長方形ツールで画像と同じサイズの長方形を作ります。
この時画像の色は「白」にしておきましょう。

3. 画像を選択した状態で「ベクトルマスクを追加」をクリックする。

フォトショップのベクトルマスクを追加をクリックする

画像を選択した状態で、レイヤーパネル下部の「ベクトルマスクを追加」をクリックします。
ベクトルマスクが追加されるとレイヤーパネルの画像の右側にベクトルマスクが表示されます。

4. ベクトルマスクを選択されている状態で、グラデーションツールを開きます。

ベクトルマスクを選択した状態でグラデーションツールを開く

※この時、「描画色の色を#000000」に「背景色の色を#FFFFFF」に設定しておきましょう。
グラデーションツールを開いたら、グラデーションパネルで下記のようにグラデーションを設定。

フォトショップのグラデーションツールで色を設定

① 色:#000000 位置:0%
② 色:#FFFFFF 位置:10%
③ 色:#FFFFFF 位置:90%
④ 色:#000000 位置:100%

5. 画像の左から右へグラデーションをかけていきます。

画像の境界線から境界線までグラデーションをかける

グラデーションパネルで色の設定が完了したら、画像の左側から右側にグラデーションを引いていきます。

6. 画像の左右にぼかしが入りました!

画像の境界線にぼかし入りました

画像の左縁と右縁にぼかしが入りました。
続けて上下にもぼかしを入れたい場合はさらに手を加えていきます。

7. 背景レイヤーを複製して、画像レイヤーと背景レイヤーの間に配置。

背景レイヤーを複製する

8. 画像レイヤーを選択した状態で、「クリッピングマスクを作成」をクリック。

画像レイヤーを選択した状態でクリッピングマスクを作成

画像を選択した状態で「右クリック」→「クリッピングマスクを作成」を選択します。

画像を選択した状態でクリッピングマスクを作成する

クリッピングマスクが作成されました。

9. 複製したレイヤーを選択した状態で「ベクトルマスクを追加」をクリック。

複製したレイヤーを選択した状態でベクトルマスクを追加をクリック

先ほど複製したレイヤーを選択した状態で「ベクトルマスクを追加」をクリックします。

10. グラデーションツールでぼかしをいれていく。

グラデーションツールで上下の境界線にぼかしを入れていく

グラデーションツールを選択して、先程のグラデーション設定のまま、今度は猫ちゃん画像の上から下へグラデーションを入れていきます。

【完成】上下左右にぼかしが入りました。

画像の境界線にぼかしが入りました。

いかがでしょうか。Photoshop初心者の方でもグラデーションツールを使って簡単に画像の境界線にぼかしを入れることができます。