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

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

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

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

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

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

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

 

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

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

人物を選択

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

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

選択範囲を反転

選択範囲を反転

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

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

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

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

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

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

ウィンドウ

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

 

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

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

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

テキストを打った場合

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

テキストのレイヤー

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

ウィンドウ

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

レイヤースタイルの光彩

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

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

設定の変更

設定の変更

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

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

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

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

距離を0で設定

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

 

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

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

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

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

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

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

ウィンドウ

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

変換を押した結果

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

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

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

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

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

写真のレイヤーを選択

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

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

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

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

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

ウィンドウ

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

 

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

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

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

 

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

Webサイト制作の一連の流れを理解!

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

ワイヤーフレームの作成からコードに落とし込むまで、Webデザインに挑戦したい人が一気通貫して学べる

明日、企画を通したいかた必見!

〜デザイナーの頭の中、大公開〜 企画を「1枚の紙」で、伝えきる。
〜デザイナーの頭の中、大公開〜 企画を「1枚の紙」で、伝えきる。

アイディアを形にし、企画を1枚の紙にまとめる力が身につく!

クオリティの高い動画を制作

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

初心者からワンランク上の動画クリエイターを目指す人向け、PremierePro最新版コース!