HOME > Webデザイン記事 > Webデザイン記事 Photoshop 投稿写真や画像の「縁だけ」をきれいにぼかす方法 2018/09/17 2024/04/23 目 次はじめに WordPressで写真などのふちだけをぼかしたい!1 アドビのフォトショップ(AI)を使います。2 長方形ツールでぼかしたい範囲の外枠を指定3 長方形ツールで2つの枠を作る 4 パズルのような縁だけの選択5 選択したレイヤーマスク部分に黒を塗る(=100%のマスク=透過0%) 6 100%のマスク(真っ黒)で画像が一部消える 7 最大の重要なポイントは「選択を解除」すること8 選択したマスク部分をぼかす9 完成形の比較10 まとめ はじめに WordPressで写真などのふちだけをぼかしたい! WordPressのブログ記事等への投稿で、写真などのふちだけをぼかしたいと思ったことはないでしょうか? パワポなら簡単にできたりする縁のぼかしですが、フォトショップを使うとこれが結構難しいです。この説明で、今後汎用できるよう記載させていただきます。今回の方法を使う場合と使わない場合の比較は下記の左と右です。 1 アドビのフォトショップ(AI)を使います。 AdobeのPhotoshopを使います。まずは、写真と同じレイヤーにレイヤーマスクを作ります。 また、バックレイヤーも白のため、もう一つレイヤーを作っておきます。(注 AdobeのPhotoshopは基本的に有料で、自分もそれを使っていますが、無料版もスキルがあると使えるようです。) 2 長方形ツールでぼかしたい範囲の外枠を指定 長方形ツールでぼかしたい範囲の外枠を指定します。 そして反転させます。このことにより、外側の額縁みたいな枠ができます。 3 長方形ツールで2つの枠を作る 次に、ALTキーを押しながら、ぼかしたい内側の点線を長方形ツールで書きます。(ここでSHIFキーを押して、大きい方の反転ささた範囲を内側の範囲がかぶらないことが重要です。) 4 パズルのような縁だけの選択 そして、さらに選択範囲を反転させます。このことにより点線から点線の間の縁部分だけが作業スペースとして指定されます。 ここが第一関門です。点線から点線間のみがマスク作業できるようになります。 5 選択したレイヤーマスク部分に黒を塗る(=100%のマスク=透過0%) そして、選択範囲を描画色(透明のマスクなので白ではなく真っ黒)でぬりつぶします。 6 100%のマスク(真っ黒)で画像が一部消える するとこのように描画色(真黒=透明のマスク)で指定したマスク部分が消えたようになります。 レイヤーマスクにマスクされた部分が黒枠でなっていれば成功です。 7 最大の重要なポイントは「選択を解除」すること そして、最大の重要なポイントは「選択を解除」することです。 これを行わないと、「選択範囲」でしか、ぼかしが効きません。これでは最初に示した段差のような見栄えの良くないぼかしになってしまいます。要は、もう「マスク」された部分にしかぼかしは適用されない ようになっているのだから、そのぼかしが選択されてない範囲にもぼけが広がって自然になるようにしないといけない訳です。 8 選択したマスク部分をぼかす 次に選択範囲が消えてますが、物理的にマスク部分しかぼけないので、そのマスク部分をぼかしていきます。 「フィルター」ー「ぼかし」ー「ぼかし(ガウス)」でぼかしていきます。 9 完成形の比較 半径を指定してくとこのように自然なぼかしになります。(図1) これができないと(図2)例のように外枠がなんとなく不自然なぼかしになり、かっこ悪く、つかえない感じになります。 図1 自然なぼけ方(〇) 図2 不自然なぼけ方(×)縁がカクカクしている。 10 まとめ この方法は、他の写真をぼかしたい場合でも使えます。非常に役立つ方法だと思うので、是非マスターしたいものです。 WordPress(ホームページ)制作及びWebマーケティングを実践中小企業診断士「weber 」でした。本日は以上です。最後までお読みいただきありがとうございました。 -Webデザイン記事 Twitter Facebook LINE