画像の配置とマスク - Adobe XDのチュートリアル

このレッスンでは 画像の配置とマスクについて紹介します。 教材としてエクスサイズファイルの フォルダーにある 03 フォルダーの中の 03_08 フォルダーの中の ファイルを使います。 まず最初に 03_08.xd を開いておきましょう。 まず画像の配置について紹介します。 XD の中に画像を読み込む方法を ２つ紹介します。 １つ目は Mac は メインメニューの「ファイル」から、 Windows はハンバーガーアイコンから 「読み込み」を選択する方法です。 「読み込み」をクリックします。 03_08 フォルダーの中の images フォルダーの中の 01.jpeg を選択し、 「読み込み」をクリックします。 JPEG 形式の画像を 配置することができました。 ２つ目の方法は フォルダーから直接 ドラッグする方法です。 フォルダーを開いて、 images フォルダーの中の 先ほどと同じ 01.jpeg を直接ドラッグします。 この方法でも同じように JPEG 形式の画像を配置することが できました。 どちらの方法で読み込んだ画像も リンクではなく、 埋め込みの状態になっており、 元の画像データとは 独立していますので、 Photoshop などで 元の画像を編集しても XD ドキュメントでは変更されません。 フォルダーを開き、 他の２つの画像も ドラッグ＆ドロップで配置してみましょう。 PING 形式や SVG 形式の 画像も配置することができました。 続いてマスクについて紹介します。 マスクとはコンテンツを 部分的に隠す機能です。 XD で画像をマスクするには、 ２つの方法があります。 １つ目はシェイプでマスクする方法、 ２つ目は画像をシェイプに ドラッグする方法です。 シェイプでマスクする方法から 見ていきます。 ここに用意しているのは、 画像と シェイプです。 このシェイプは楕円形ツールで 描画したものを用意しています。 画像の上に シェイプを配置し、 ２つのオブジェクトを選択して、 Mac は control クリック、 Windows は右クリックをして、 「シェイプでマスク」をクリックします。 これでシェイプの外側の部分が マスクされ、 丸い形に画像をマスクすることが できました。 マスク後の仕上がりには、 元々のシェイプの塗りの色や…