1. トップ
  2. フォトショップ
  3. フォトショップのぼかし!便利な3つの技を画像で解説!初心者でも即理解

フォトショップのぼかし!便利な3つの技を画像で解説!初心者でも即理解

フォトショップで、画像の背景をぼかしたい、文字をぼかしたい、境界線をぼかして画像を切り取りたい!と感じたことはありませんか?

本記事では、Webデザイナーの筆者が、フォトショップで画像の背景をぼかす方法・文字をぼかす方法・境界線をぼかして画像を切り取る方法の3つについて解説します。

※フォトショップで画像を切り取る方法については、フォトショップでの切り抜きについて解説した記事をご覧ください。

見やすい画像を使ってフォトショップのぼかしについて解説しているので、フォトショップ初心者でも学びやすい内容です!

ぜひ最後まで読んで、フォトショップのぼかしをマスターしてください。

 

フォトョップで背景をぼかす方法

クイック選択ツールで、人物を選択します。

人物を選択

※人物の切り抜き方法が理解わからない人は、フォトショップでの切り抜きについて解説した記事をご覧ください。

選択したら、ダブルクリックから 選択範囲を反転 を選択します。

選択範囲を反転

選択範囲を反転

以上のように表示されます。

フィルター>ぼかし>ぼかし(ガウス)を選択

フィルター>ぼかし>ぼかし(ガウス)を選択します。

背景にぼかしが入りました。

背景にぼかしが入った場合

レイヤーからぼかしをダブルクリックすると、ウィンドウが出てきます。

ウィンドウ

ここでプレビューを見ながら、最適なぼかしにしましょう。

 

フォトショップで文字の周りにぼかしを入れる方法

次に文字の周りをぼかす方法をお教えします。

まず、テキストを打ちます。

テキストを打った場合

次に、レイヤーウィンドウからテキストのレイヤーをダブルクリックします。

テキストのレイヤー

すると以下のようなウィンドウが出てきます。

ウィンドウ

このレイヤースタイルの光彩(外側)にチェックを入れます。

レイヤースタイルの光彩

以上の設定を、プレビューを見ながら変更します。

今回はこのように設定を変更しました。

設定の変更

設定の変更

以上のようになりました。ぼかしが見えにくいので背景をいれてあります。

もっとはっきりとした縁が作りたい場合はドロップシャドウで作成するのもおすすめです。

ドロップシャドウで作成する場合

その場合、距離は0で設定してください。

距離を0で設定

以上のような仕上がりになります。

 

フォトショップで境界線をぼかして画像を切り抜く方法

まず、切り抜きたいオブジェクトと写真を用意します。今回は正円を用意しました。

切り抜きたいオブジェクトと写真

この正方形のレイヤーを選択し、フィルター>ぼかしギャラリー>フィールドを選択します。

フィルター>ぼかしギャラリー>フィールドを選択

すると、以下のようなウィンドウが出てきました。

ウィンドウ

今回はフィルターをかけたいので変換を押しましょう。

変換を押した結果

以上のようなウィンドウがでてきます。

ここでフィールドの境界線のpxを調整します。後から変更も可能ですのでここではなんとなくこんなかんじかな?程度でも大丈夫です。

これを適応したら、レイヤーを切り抜きたいほうを「下」にしましょう。

イラストレーターを使用している人は反対で混乱するかもしれませんが、フォトショップでクリッピングマスクは下のオブジェクトで切り抜かれます。

そして、写真のレイヤーを選択します。

写真のレイヤーを選択

レイヤー>クリッピングマスクを作成を選択すれば完成です。

レイヤー>クリッピングマスクを作成を選択

レイヤー>クリッピングマスクを作成を選択

以上のようにぼかされた境界線でクリッピングマスクが適応されました。

これを変更する場合は、レイヤーのぼかしギャラリーをダブルクリックし、ふたたびウィンドウを立ち上げます。

ウィンドウ

このように写真をみながら調節できるので細かい調節に向いています。

 

いかがでしたか?フォトショップのぼかしについて理解できましたか?

本記事では、フォトショップで、画像の背景をぼかす、文字をぼかす、境界線をぼかして画像を切り取る方法について解説しました。

どれもよく使うフォトショップのスキルなので、ぜひ理解しておいてください!

 

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。

イラレの基本~実践的なテクニックを学ぶ

【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?

最新のAdobe XDを最短でマスター

【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ

機能の紹介や単なる操作方法の説明に終わらせず、実践的な作品制作をしながら機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!

動画編集をマスターしよう!

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。