Adobe XDで画像をトリミングする手順を紹介します。
こちらの記事では、Adobe XDのキャンバスに画像を配置する手順を紹介しました。
多くの場合、画像を加工した後でAdobe XDに配置するため、配置した画像をそのまま使いますが、
画像エディタでの修正を事前にしない場合や、
入手した画像をそのままAdobe XDに配置した場合、配置した画像をトリミングしたい場合が出てきます。
この記事では、Adobe XDで配置した画像をトリミングして画像の一部のみを切り抜く手順を紹介します。
Adobe XDでは画像の「トリミング」という機能はなく、画像と図形(シェイプ)のマスクを作成する方法でトリミングを実現します。
Adobe XDを起動し、キャンバスを作成しアートボードに画像を配置します。画像の配置手順はこちらの記事を参照してください。
トリミングしたい範囲を長方形ツールで囲みます。
[Shift]キーを押しながら配置した画像と作成した長方形をクリックし、両方のオブジェクトを選択します。
両方の図形が選択された状態で右クリックします。下図のポップアップメニューが表示されます。
メニューの[シェイプでマスク]の項目をクリックします。
2つのオブジェクトの重なる部分がトリミングされて抜き出されます。
画像の一部をトリミングできました。
下図のようにシェイプの図形が画像の背面にある場合に同様の操作を実行します。
画像と長方形が両方重なる部分がマスクされて画面に表示されます。
長方形以外の図形でマスクすることもできます。下図は[楕円形]ツールで描画した円形でマスクする例です。
2つのオブジェクトを選択した状態で[シェイプでマスク]を実行すると、円形でトリミングできます。
複雑な図形でマスクする場合は、[ペン]ツールで作図した図形でマスクすることもできます。
別の方法として、Illustratorで閉じた図形のパスを作成し、Adobe XDに配置して画像に重ねます。
先ほどの手順と同様に[シェイプでマスク]を実行します。複雑な図形でのマスクもできます。
