【adobe XD】画像をマスクする方法
青木隆之
2021/01/06
お疲れ様です、どうもアオキタカユキです。
今回はXDで画像をマスクする方法をご紹介します。アカウントのプロフィール写真やギャラリー系のUIを作成するさいによく画像をマスクして配置しますよね。あとはサイトのトップ部分なんかでも使います。
とにかくウェブデザインとマスクは切ってもきれない関係です。
XDでは簡易的ではありますがもちろんマスクすることができます。簡易的と言ったのは透明度の調整なんかができないからです。ですがある程度は画像をマスクするだけで済んでしまうので問題なしです！
まずはこのような画像をご用意。
画像をUIのアイコンとして表現したいので、この画像を丸くマスクします。
次にマスク用の丸いシェイプを配置。
右クリックをして「シェイプでマスク」を選択
するとどうでしょう、画像をマスクすることができました。
画像の大きさを変えたいなど、画像の調整をしたい場合はオブジェクトをダブルクリックすると編集することができます。
マスクをやめたい場合は、右クリックして「マスクをグループ化解除」を選択すればマスクを解除できます。
XDはUIに特化したツールなのでこういう機能も用意してくれてます！効率的にUIを作成してスピーディーにアウトプットしていきましょう！
