Photoshopとの連携 - Adobe XDのチュートリアル

このレッスンでは、 Photoshop との連携について 説明します。 教材として エクササイズファイルのフォルダーにある 12 フォルダーの中の 12_01 フォルダーの中のファイルを 使います。 まず最初に 12_01.xd を開いておきましょう。 XD に Photoshop のデータを 取り込む方法を ３つ紹介します。 まず１つ目の方法は、 XD の「ファイル」から 「コンピューターから開く」 をクリックします。 12_01 フォルダーの中の banner.psd を選択し、 「開く」をクリックします。 そうすると XD で直接 Photoshop のファイルを 開くことができます。 レイヤーパネルで確認すると、 Canvas というアートボードが 自動的に作られていて、 その中には Photoshop でのレイヤーが しっかりと反映されています。 XD の「ウィンドウ」から 12_01.xd ファイルに戻ります。 ２つ目の方法です。 XD の「ファイル」から 「読み込み」をクリックします。 12_01 フォルダーの中の banner.psd を選択し、 「読み込み」をクリックします。 そうすると XD の中に Photoshop のファイルが 埋め込まれました。 レイヤーパネルで確認すると Photoshop のレイヤーが しっかりと反映されています。 続いて３つ目の方法です。 Photoshop で 12_01 フォルダーの中の banner.psd を開きます。 Photoshop の メニューバーの「選択範囲」 の中の 「すべてを選択」をクリックします。 Photoshop のメニューバーの 「編集」から 「結合部分をコピー」をクリックします。 この状態で XD に戻ります。 XD で Mac の方は command V Windows の方は Ctrl V を押します。 そうすると XD に Photoshop のデザインが 埋め込まれました。 ただし３つ目の方法は ビットマップ画像となっていて、 １枚になっています。 XD でレイヤーごとに 変更を加えるということは できませんのでご注意ください。 ３つの方法を 用途に応じて使い分けてみてください。 このレッスンでは Photoshop との連携について 説明しました。