Adobe XDをもっと使いこなすヒント! 第8回 ぼかしマスク

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、ぼかしマスクに関連する機能をテーマに、5つのツイートを取り上げます。

Tip 1. 基本シェイプをマスクとして使う

オブジェクトを選択して、プロパティインスペクターの「背景ぼかし」オプションを選択すると、オブジェクトをぼかしマスクとして使えます。上のビデオのように、他のオブジェクトの上に移動すれば、ぼかし効果を実現できます。

Tip 2. ぼかしマスクの見た目を操作する

デフォルトでは、背景をぼかしたときの不透明度は0、つまり完全に透明な状態です。プロパティインスペクター内のスライダーを操作してこの数字を大きくすることで、ぼかしマスクにオブジェクトの背景色が反映されるようになります。

この色を変更したい場合は、マスクオブジェクトを選択して、プロパティインスペクター内の「塗り」をカラーパレットから指定します。

ぼかし具合を変えてみたいときには、「適用量」のスライダーを操作して、ぼかしの程度を制御できます。上のビデオでその様子が確認できます。

他にも、マスクの明度を調整できるスライダーが用意されています。マスク領域を明るくしたり暗くしたりしたい場合に利用できます。

Tip 3. 画像をマスクオブジェクトとして使用する

画像に「背景ぼかし」オプションを適用すると、画像のテクスチャを活かしたぼかしマスクとして使用できます。上のビデオでは、すりガラスの画像を使ったマスクの例が確認できます。

Tip 4. オブジェクト自体をぼかす

もちろん、背景ではなく、オブジェクト自体をぼかすこともできます。上のビデオのように、プロパティインスペクターの「オブジェクトのぼかし」を選択して、適用量のスライダーを操作すれば、好みのぼかし効果をオブジェクトに適用することが可能です。

あくまで効果なので、ぼかしを消すのは簡単です。ぼかし効果を非表示にするには、「オブジェクトのぼかし」の横のチェックボックスをオフにします。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2018.09.6

Products Featured

  • Adobe XD

Tags

タグはありません