Adobe XDに慣れていない人や使い始めたばかりの人の中には「Adobe XDの中で画像をトリミングしたい！」「そもそもAdobe XDでトリミングはできるの？」と気になっている方も多いのではないでしょうか。
XDで画像をトリミングする方法
- トリミングしたいサイズでシャイプを作成
- シャイプと画像を選択
- マスクでシェイプ
詳しく解説していきます。
ステップ①トリミングしたいサイズでシャイプを作成
まずは、XD上にトリミングしたい画像を配置しましょう。
次に切り抜きたい大きさにシェイプを作成します。今回はわかりやすいようにシェイプを半透明にしてご説明します。
シェイプの位置は、画像の前面でも背面でもどちらでも大丈夫です。
ステップ②シャイプと画像を選択
トリミングしたい幅にシェイプを作成したら「Shift」キーを押しながら、シャイプと画像の両方のオブジェクトを選択しましょう。
ステップ③マスクでシェイプ
最後に選択されているオブジェクトの上で右クリックし、メニュー項目の中から「シェイプでマスク」を選択します。
これで画像のトリミングが完了です！作成したシェイプのサイズでトリミングされているのが確認できると思います。
オブジェクトが選択されている状態から次のショートカットでも「マスクでシェイプ」が適用されます。
- ショートカット
Winの場合）Ctrl + Shift + M
Macの場合）Command + Shift + M
もし位置や大きさを変更したい場合は、トリミングされた画像をダブルクリックすると、作成したシャイプの枠内で画像の位置を調整できます。
先に用意したシャイプに画像を入れる方法
XD上でトリミングする方法も簡単ですが、シーンによっては更に効率的にトリミングできる方法があります。
それは、先にシェイプを作成し、PCのフォルダから画像をドラック＆ドロップして挿入する方法です。
まずは、指定の大きさでシェイプを作成しましょう。
次にWindowsの方はExplorer、Macの方はFinderを立ち上げます。
画像をシェイプの上にドラック&ドロップしましょう。
こうすることでシェイプの大きさに画像が切り抜かれました。
もし位置や画像の大きさを変更したい場合は、XD上で行ったマスクと同様に画像をダブルクリックすれば調整ができます。
ワイヤーフレームに画像をはめ込んだり、複数ある画像を同じ大きさに揃えたいという場面でかなり使えるので覚えておきましょう！
XDで画像を様々な形にトリミングするには？
変形したシャイプでトリミング
前述した方法では、四角形でお伝えしましたが、丸や三角のシャイプ、ペンツールなどで作成したシャイプでも同じ手順でトリミングができます。
XD上では実現できないような複雑なシェイプの場合は、PhotoshopやIllustratorで作成したシャイプをXDに移動して使うことも可能です。
今回は、Illustratorで作成したシャイプ（パス）をXDで使う方法で説明します。
まずは、任意のシェイプをIllustratorで作成しましょう。
シェイプを選択した状態でコピーして、XD側に貼り付けます。
あとは、メニュー項目もしくはショートカットでマスクをかけていきます。
これで以上です！用途や自分がやりやすい方法で試してみましょう！
テキストにマスクをかける
ここまでシェイプでマスクをかける方法をご紹介しましたが、テキストでマスキングすることも可能です。
まずは、任意のテキストを用意しましょう。
次にくり抜きたい画像もしくはシェイプを用意します。
ここまで用意ができたら両方のテキストとオブジェクトを重ねます。このときに、テキストが前面にくるようにしておきましょう。
マスクでシェイプしたときと同様にテキストとオブジェクト両方を選択します。
テキストの場合は、シェイプでマスクではなく、XDのパネルにある「交差」をクリックしましょう。
XDにおける交差とは、前面のオブジェクトに合わせて背面のオブジェクトをクリップすることです。
これでテキストにマスクをかけることができました！
XDでトリミングをしよう！
操作画面上にトリミングアイコンなどはないものの、ここまでの説明でAdobe XDでも簡単にトリミング（マスク）ができることが分かったと思います。
トリミングするためだけにXDを活用したり、普段の作業を更に効率化するためなど、あらゆるシーンで役立つ便利ワザとなるので、今日から実践してみましょう！