PhotoshopとAdobe XDを組み合わせてクリエイティブを加速する！

© 2020 Adobe. All Rights
Reserved.
PhotoshopとAdobe XDを組み合わせて
クリエイティブを加速する！
浅野桜｜タガス代表取締役 / デザイナー

Reserved.© 2020 Adobe. All Rights Reserved.2
はじめに

資料・最新情報
https://tagas.co.jp/adobemax2020

“ なんでもできる Photoshop ”
§ リッチなグラフィック表現
§ グラフィックを作りながらレイアウト
§ 豊富なアセット（画像）の書き出し

§ 動作が重い…
§ ⾒た⽬の変化をわかりやすく⾒せたい
§ レスポンシブデザインを作るのが⼤変
§ 余⽩をもっと簡単に設定・移動したい
§ ⾃分のスマートフォンで確認したい
Photoshop は万能？

Photoshop はスクリーンの
デザイン専⽤アプリではない

&

2つの選択肢
Photoshopで作ったデータをXDで引き継ぐ
CCライブラリを使ったアセット管理
A
B
&

Photoshopで作ったデータをXDで引き継ぐA
XDでのPSDデータの再現性
「縦書き」や「レイヤーマスク」など
⼀部再現できない部分もあるので
データを開いたあとには確認を

画像の書き出しについて
XDではカラープロファイルの埋め込みが
できないので、写真などの画像の書き出しは
Photoshopからおこなうのがおすすめ

引き継ぐ上での注意点
スマートフォン向けのカンプの場合、
Photoshopは2倍〜3倍のピクセルの場合も
あるのでサイズについて確認する

iPhoneX：375pixel×812pixel

iPhoneX：1125pixel×2436pixel【3倍】

完成しているトップページのデザインカンプ
§ 下層ページを作る
§ 更新⽤のデータを作る（過去の資産を活かす）
§ 別のサイズのページを作る

完成しているトップページのデザインカンプ
① 下層ページを作成する
③ 異なる幅のデザインを作成する
② コンテンツを変更する

DEMO

データを再編集するには
CCライブラリを使ったアセット管理B

さらなる強化が期待されるCCライブラリ

の便利な機能はこちらでも
Adobe XD 加速
B の詳細や
https://blogs.adobe.com/japan/serialization/cc-web-xd-for-photoshop-users/

Reserved.
Thank you.
@chaca21911浅野桜

Recommended