MENU
カテゴリー

Figmaで画像をぼかす方法を紹介!

Figmaで画像をぼかす方法を紹介!

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

web制作ではイメージ画像をぼかして使うことがたまにあります。

その際Figmaのぼかし機能を使うことで出来ます。

この記事ではFigmaで画像をぼかす方法を紹介します。

この記事を読むメリット

  • Figmaで画像をぼかす方法がわかる
目次

Figmaで画像をぼかす方法

早速Figmaで画像をぼかす方法を紹介します。

画像をぼかす手順は下記の通りです。

Figmaで画像をぼかす手順

  1. 「レイヤーブラー」を選択する
  2. ぼかし具合を調整する

「レイヤーブラー」を選択する

Figmaのぼかし機能である「レイヤーブラー」を選択します。

ぼかしたい画像を選択した状態でエフェクトの「+」を選択し、プルダウンの中から「レイヤーブラー」を選択します。

ぼかし具合を調整する

続いてぼかしの具合を調整します。

「エフェクトの設定」から「ぼかし範囲」の数字を調整します。

するとぼかし具合が調整されます。

ちなみに画像以外にオブジェクトやテキストも同様にぼかすことが出来ます。

あわせて読みたい
Photoshopで写真をぼかす方法を紹介! ​Photoshopの「ぼかし」機能は、画像編集において非常に重要な役割を果たします。 ​画像全体や一部をぼかすことで、被写体を際立たせたり、情報を隠したり、背景と被写...

画像を部分的にぼかす方法

先ほどは画像全体をぼかす方法を紹介しました。

次は部分的にぼかす方法を紹介します。

Figmaで画像を部分的にぼかす手順

  1. オブジェクトを作る
  2. オブジェクトに「背景のぼかし」を設定する
  3. ぼかし具合を調整する

オブジェクトを作る

始めにぼかしたい形のオブジェクトを作成します。

今回は長方形を作成します。

この際オブジェクトの色は「白」で透明度は「1%」に設定しておきます。

オブジェクトに「背景のぼかし」を設定する

続いてオブジェクトに「背景のぼかし」を設定します。

「エフェクト」→「背景のぼかし」を選択します。

ぼかし具合を調整する

最後にぼかし具合を調整します。

するとオブジェクトが配置されている箇所だけ部分的にぼかしが効きます。

Figmaで画像をぼかすのは簡単

この記事ではFigmaで画像をぼかす方法を紹介しました。

Figmaでは簡単に画像をぼかすことが出来ます。

まだやったことのない人は是非試してみてください。

  • URLをコピーしました!
目次