【Adobe XD】簡単!ぼかし効果を使う二つの方法

xdでぼかしを使う方法

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

近年Webデザインでトレンドとされたグラスモーフィズムは聞いたことありますか?

背景をすりガラスのようなぼかしが効いているのが特徴です。このような効果をAdobe XDで再現することが可能です。

今回はAdobe XDの「オブジェクトのぼかし」「背景のぼかし」の使い方を紹介します。

ぼかし効果を使う方法

左:オブジェクトのぼかし 右:背景のぼかし

操作画面右の「効果」から「オブジェクトのぼかし」または「背景のぼかし」にチェックを入れます。

オブジェクトのぼかし:選択対象の輪郭、シルエットをぼかすことができます。(上画像左参照)

背景のぼかし:選択対象そのものをぼかすのではなく、前のレイヤーに配置することでぼかせます。(上画像右参照)

各効果の使い方について、作りながら紹介します!

合わせて読みたい

AdobeXD Tipsまとめ 【Adobe XD】保存版これだけ見とけば大丈夫!今から使えるTipsまとめ

手順説明

今回はこの上画像のようにデザインを作っていきます。

以下手順を紹介します。

作成手順
  1. 画像の用意
  2. 画像を配置
  3. デザインを作成
  4. 背景のぼかし
  5. オブジェクトのぼかし
STEP.1
画像の用意

背景用の画像を用意します。フリー画像のサイトからお好きな画像を選んでください。

STEP.2
画像の配置

アートボードに画像を最背面に配置します。

この画像の上に重ねていきます。

STEP.3
デザインを作成

先程の背景画像の上にデザインを作成します。

画像上は青色にデザインしてますが、ぼかしは白色のほうが綺麗に見えます。

使用フォント:KENOKY

STEP.4
背景のぼかし

ぼかし効果をかけるレイヤーを選択。画面右から「背景のぼかし」にチェック。

その後、効果の値を変更します。

ぼかし量:ぼかし効果の強度

明るさ:明度

効果の不透明度:ぼかした上での不透明度

STEP.5
オブジェクトのぼかし

白文字のため文字や文章が見にくいと思います。文字の下にオブジェクトを配置し見やすくします。(画像参照)

 

「オブジェクトのぼかし」を適用します。

ぼかしたいレイヤーを選択した状態で、先程「背景のぼかし」同様に画面右下の「オブジェクトのぼかし」にチェックをいれます。(プルダウンで表示)

最後にぼかし量の値を調節して完成です。お疲れさまでした。

まとめ

今回の記事では以下について紹介しました。

  • 背景のぼかし:選択対象そのものをぼかすのではなく、前のレイヤーに配置することでぼかしが効く。
    ぼかし量:ぼかし効果の強度
    明るさ:明度
    効果の不透明度:ぼかした上での不透明度
  • オブジェクトのぼかし:選択対象の輪郭、シルエットをぼかす。ぼかし量を調節することで値が変更可能。

トレンドと言われたグラスモーフィズムあまり見かけないですね。。

今回紹介したぼかし効果の使い方以外にも使いみちはたくさんあるので是非使ってみてください。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

参考 XD でぼかし効果をあたえるAdobe

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA