【adobe XD】画像をマスクする方法 | Dev Driven 開発・デザインチーム 【adobe XD】画像をマスクする方法 – 働くひとと組織の健康を創る iCARE

BLOG

【adobe XD】画像をマスクする方法

青木隆之
2021/01/06

画像をマスクする方法

お疲れ様です、どうもアオキタカユキです。

今回はXDで画像をマスクする方法をご紹介します。アカウントのプロフィール写真やギャラリー系のUIを作成するさいによく画像をマスクして配置しますよね。あとはサイトのトップ部分なんかでも使います。

とにかくウェブデザインとマスクは切ってもきれない関係です。

XDでは簡易的ではありますがもちろんマスクすることができます。簡易的と言ったのは透明度の調整なんかができないからです。ですがある程度は画像をマスクするだけで済んでしまうので問題なしです!

まずはこのような画像をご用意。
画像をUIのアイコンとして表現したいので、この画像を丸くマスクします。

画像をマスクする方法

次にマスク用の丸いシェイプを配置。
画像をマスクする方法

右クリックをして「シェイプでマスク」を選択
画像をマスクする方法

するとどうでしょう、画像をマスクすることができました。
画像をマスクする方法

画像の大きさを変えたいなど、画像の調整をしたい場合はオブジェクトをダブルクリックすると編集することができます。
画像をマスクする方法

マスクをやめたい場合は、右クリックして「マスクをグループ化解除」を選択すればマスクを解除できます。
画像をマスクする方法

XDはUIに特化したツールなのでこういう機能も用意してくれてます!効率的にUIを作成してスピーディーにアウトプットしていきましょう!