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

Web中小企業診断士

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

Webデザイン記事

Photoshop 投稿写真や画像の「縁だけ」をきれいにぼかす方法

2024/04/23

はじめに WordPressで写真などのふちだけをぼかしたい!

WordPressのブログ記事等への投稿で、写真などのふちだけをぼかしたいと思ったことはないでしょうか? 
パワポなら簡単にできたりする縁のぼかしですが、フォトショップを使うとこれが結構難しいです。
この説明で、今後汎用できるよう記載させていただきます。
今回の方法を使う場合と使わない場合の比較は下記の左と右です。

図1 制作の技 Photoshop ぼかしの挿入イラスト
制作の技 Photoshop ぼかしの挿入イラスト図2  

1 アドビのフォトショップ(AI)を使います。

 AdobeのPhotoshopを使います。まずは、写真と同じレイヤーにレイヤーマスクを作ります。
 また、バックレイヤーも白のため、もう一つレイヤーを作っておきます。
(注 AdobeのPhotoshopは基本的に有料で、自分もそれを使っていますが、無料版もスキルがあると使えるようです。)

WordPress制作の技 Photoshop ぼかしの挿入イラスト 図3

2 長方形ツールでぼかしたい範囲の外枠を指定

 長方形ツールでぼかしたい範囲の外枠を指定します。
 そして反転させます。このことにより、外側の額縁みたいな枠ができます。

WordPress制作の技 Photoshop ぼかしの挿入イラスト 図4

3 長方形ツールで2つの枠を作る 

次に、ALTキーを押しながら、ぼかしたい内側の点線を長方形ツールで書きます。(ここでSHIFキーを押して、大きい方の反転ささた範囲を内側の範囲がかぶらないことが重要です。)

WordPress制作の技 Photoshop ぼかしの挿入イラスト 図6

4 パズルのような縁だけの選択

 そして、さらに選択範囲を反転させます。このことにより点線から点線の間の縁部分だけが作業スペースとして指定されます。
 ここが第一関門です。点線から点線間のみがマスク作業できるようになります。

 Photoshop ぼかしの挿入イラスト図7

5 選択したレイヤーマスク部分に黒を塗る(=100%のマスク=透過0%)  

 そして、選択範囲を描画色(透明のマスクなので白ではなく真っ黒)でぬりつぶします。

WordPress制作の技 Photoshop ぼかしの挿入イラスト図8

6 100%のマスク(真っ黒)で画像が一部消える 

 するとこのように描画色(真黒=透明のマスク)で指定したマスク部分が消えたようになります。
 レイヤーマスクにマスクされた部分が黒枠でなっていれば成功です。

WordPress)制作の技 Photoshop ぼかしの挿入イラスト図9

7 最大の重要なポイント「選択を解除」すること

そして、最大の重要なポイント「選択を解除」することです。 
これを行わないと、「選択範囲」でしか、ぼかしが効きません。これでは最初に示した段差のような見栄えの良くないぼかしになってしまいます。
要は、もう「マスク」された部分にしかぼかしは適用されない ようになっているのだから、そのぼかしが選択されてない範囲にもぼけが広がって自然になるようにしないといけない訳です。

WordPress 制作の技 Photoshop ぼかしの挿入イラスト図10

8 選択したマスク部分をぼかす

次に選択範囲が消えてますが、物理的にマスク部分しかぼけないので、そのマスク部分をぼかしていきます。

「フィルター」ー「ぼかし」ー「ぼかし(ガウス)」でぼかしていきます。

WordPress制作の技 Photoshop ぼかしの挿入イラスト 図11

9 完成形の比較

 半径を指定してくとこのように自然なぼかしになります。(図1)
 これができないと(図2)例のように外枠がなんとなく不自然なぼかしになり、かっこ悪く、つかえない感じになります。

制作の技 Photoshop ぼかしの挿入イラスト 図12
図1 自然なぼけ方(〇)
図2 不自然なぼけ方(×)縁がカクカクしている。

10 まとめ

この方法は、他の写真をぼかしたい場合でも使えます。非常に役立つ方法だと思うので、是非マスターしたいものです。 
WordPress(ホームページ)制作及びWebマーケティングを実践中小企業診断士「weber 」でした。
本日は以上です。最後までお読みいただきありがとうございました。

-Webデザイン記事