Adobe XDでページのスクリーンキャプチャ画像から、セクションをカットして切り詰める、またはセクションを挿入する手順を紹介します。
これまで、ページの改修イメージを制作するにあたり、スクリーンキャプチャ画像をPhotoshopで加工して、完成イメージを作成していましたが、
Adobe XDでの画像加工を試してみたところ、いろいろ利点があるため、Adobe XDでのページのイメージを制作することにしました。
この記事では、Adobe XDでページのスクリーンキャプチャ画像からセクションをカットする方法の一つを紹介します。
スクリーンキャプチャーをアートボードにペーストした状態です。
今回、修正指示用の画面イメージを作成する想定です。下図点線部分の広告枠は余計なので、削除したいです。
画像をコピーしペーストして複製します。元の画像の上部の残したい部分を長方形ツールで囲みます。画像と作図した長方形を両方選択し、右クリックし、
ポップアップメニューの[シェイプでマスク]をクリックします。(マスクの詳細な手順はこちらの記事も参照してください。~)
上部だけがトリミングされた状態になります。
右側に複製した図形は下側のみを長方形ツールで囲み、同様に[シェイプでマスク]を実行します。
下側のみがトリミングできました。
画像を移動させて、配置します。広告部分のセクションがカットできました。
セクションを挿入する例です。下図のキャプチャ画像を配置した画面を例にします。
[概要]の見出しの下に新しい枠を挿入した図を作成します。
キャプチャ画像をコピーしてペーストし、複製を作成します。
[概要]の見出しから下を長方形ツールで囲みます。両方のオブジェクトを選択し、右クリックのポップアップメニューの[シェイプでマスク]をクリックします。
下の部分がトリミングできました。
元の画像の[概要]セクションの下から長方形ツールで覆い隠します。
右側のパネルの[線]のチェックボックスのチェックを外して輪郭線が表示されない状態にします。
下側のみをトリミングした画像を移動して配置します。[概要]の見出しの下に空白ができました。
[長方形]ツールや[テキスト]ツールを利用して、新しい枠のイメージを描画します。
上記の手順で、余白を挿入できました。
