画像の書き出し - Adobe XDのチュートリアル

このレッスンでは、 画像の書き出しについて説明します。 教材として exercise ファイルの フォルダにある 09 フォルダの中の 09_06 フォルダの中のファイルを使います。 09_06.xd を開いておきましょう。 レイヤーパネルを表示しておきます。 １枚目のアートボードにある オブジェクトを選択します。 レイヤーパネルでレイヤー名が icon_airplane であることと、 プロパティインスペクターで 横幅 200、高さ 200 ピクセルであることを 確認しておきます。 オブジェクトを選択した状態で、 XD のメニューバーの 「ファイル」から「書き出し」 「選択したオブジェクト」を クリックします。 「場所」は下向きのアイコンをクリックして 09_06 フォルダの中の 01_design フォルダを選択し、 「フォーマット」は PNG、SVG、PDF、JPG から 選択できますが、 今回は PNG を選択します。 「書き出し先」を「デザイン」とした状態で 「書き出し」をクリックします。 フォルダを確認すると、 01_design フォルダの中に レイヤー名が反映された icon_airplane.png が書き出されています。 サイズは等倍の 200ｘ200 ピクセルです。 XD に戻り、もう一度 同じオブジェクトを書き出します。 オブジェクトを選択している状態で 「ファイル」から「書き出し」 「選択したオブジェクト」を クリックします。 今度は 09_06 の中の 02_web を書き出し先に設定しておきます。 「フォーマット」は PNG で 「書き出し先」を Web に変更しましょう。 右下の「書き出し」ボタンを クリックします。 フォルダを確認すると、 02_web の中に画像が２枚 書き出されていて、 先ほどと同じ等倍のサイズのものと Retina ディスプレイでの表示を想定した ２倍サイズ、400x400 ピクセルの ２倍サイズの画像も 一緒に書き出されています。 続いて、アートボード 02 にある 一番上の画像を選択します。 cat_a という画像です。 プロパティインスペクターの 「書き出し対象にする」に チェックを入れます。 ここにチェックを入れると、 レイヤーパネル上も アイコンが付きます。 Artboard 03 の上の…