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

Adobe XDをもっと使いこなすヒント！

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

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

#adobexd #protip Select any object and select the “Background Blur” from the property inspector to turn it into a blur mask. @adobexd pic.twitter.com/xOGTi3rtaT

— Elaine Chao (@elainecchao) May 8, 2018

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

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

#adobexd #protip Want to add some tint to your blur mask? Set the color in the property inspector and increase the opacity of the mask. @adobexd pic.twitter.com/NFZMTEdd11

— Elaine Chao (@elainecchao) May 9, 2018

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

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

#adobexd #protip While our default blur of 30 is quite useful, don’t forget you can actually adjust the blur radius directly in the property inspector. @adobexd pic.twitter.com/g1MXa3GH6Q

— Elaine Chao (@elainecchao) May 10, 2018

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

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

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

#adobexd #protip You can also set a textured image as a blur mask for a frosted-glass effect. @adobexd HT @CoreyDotCom pic.twitter.com/vx9WXUXdMj

— Elaine Chao (@elainecchao) May 11, 2018

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

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

In addition to background blurs, you can also blur objects, like images, right from @AdobeXD. pic.twitter.com/3CZNgvSr5t

— Howard Pinsky (@Pinsky) August 21, 2018

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

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

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