動画の内容はテキストで読むこともできます

XDユーザーズガイドのテキストを読みながら学ぶとより理解できます

公式テキストを読む

Tutorial

ぼかし効果の適用

この動画のサンプルファイル

ui-design-background-blur.zip (37 MB)

Adobe XDでは、オブジェクト全体をぼかしたり、オブジェクトにぼかしマスクを追加することができます。

オブジェクト全体をぼかすには、ぼかしたいオブジェクトを選択してから、プロパティインスペクターで「オブジェクトのぼかし」を選択し、その横のチェックボックスをオンにします。その際、スライダーを調整して、ぼかしの程度を制御できます。

ぼかしマスクを作成して、その背景の領域をぼかすには、ぼかしたい領域にシェイプを描画し、プロパティインスペクターで「背景ぼかし」を選択し、その横のチェックボックスをオンにします。

背景のぼかしでは、スライダーを調整して、3種類の値を制御できます。

  • 適用量:ぼかしの程度を制御します。
  • 明るさ:ぼかしマスクの明るさを制御します。
  • 不透明度:ぼかしマスクの不透明度を制御します。

ぼかしマスクのシェイプは自由に変形できます。