PhotoshopとXDの操作比較。ウェブの画面設計をするときのレイアウト作業は、XDを使うとめっちゃ楽でした。★2018年1月31日（水）に、同内容をYoutubeライブ配信します。お楽しみに。情報は、Twitter( https://twitter.com/r360studio )をご覧ください。 【Adobe XD meeting #12】でLTをしたときの資料です。 < https://xd-study.connpass.com/event/76284/ >

1. Photoshop使いにおくる
XDコトはじめ
森和恵

2. ウェブ系インストラクター
Twitter: @r360studio
https://www.youtube.com/r360studio
森和恵

3. XDを使い出してまだ１ヶ月ぐらい
（合計、20時間ぐらい）

4. とにかく、シンプルな使いごごち

5. 簡単に使えたことに、驚きです。

6. XDをはじめて使った感想
• アートボードがないと画面がまっしろに
• Win版も、いまは機能が充実してる
• [終了]メニューがない
• UWPアプリは、とっても軽快
（ユニバーサル Windows プラットフォーム ）

7. PhotoshopとXDで操作を比較

8. ボタンをPhotoshopで作る

9. Photoshopでボタンを作る
• シェイプで四角を描き、
ボタンのベースを作る

10. Photoshopでボタンを作る
• ラベルをテキストで追加
テキストを編集状態に
切り替えるのが面倒！

11. Photoshopでボタンを作る
• ベースの四角形を一括管理するには
「リンクされたアイテム」

12. Photoshopでボタンを作る
• リンクされたアイテムを作るには
1. [スマートオブジェクト変換]
2. [リンクされたアイテムに変換]
• 埋め込まれたpsbファイルで
一括管理する

13. Photoshopでボタンを作る
• テキスの書式を一括管理するには
「段落スタイル」

14. ボタンをXDで作る

15. XDでボタンを作る
• 長方形で四角を描き、
ボタンのベースを作る

16. XDでボタンを作る
<余談>
Photoshopで
レイヤーメニューから
[SVGをコピー]で
XDへペーストできる
※パスオブジェクト

17. XDでボタンを作る
• ラベルをテキストで追加
• ポイントとエリア内切替が自由

18. XDでボタンを作る
• ポイントテキストは、
ドラッグでサイズ変更ができる
• エリア内テキストは、
複数行があつかえる

19. XDでボタンを作る
• カラーやフォントの
一括管理は、[アセット]で
• オブジェクトごとなら、
[シンボル]で一括管理

20. XDでボタンを作る
• XDでは、[シンボル]中のテキストは
個別に書き換えられる

21. PhotoshopとXDで操作を比較して

22. XDは、一括管理がめちゃ便利！

23. テキスト操作は、XDが楽
（Illustrator的な操作）

24. XDは、レイヤーに縛られない
（Illustrator的な操作）

25. XDの操作感は、Illustratorっぽい
（軽量化されたIllustratorの印象）

26. よし！これから積極的にXD使おう！

27. ……というわけで
いつもIllustratorで作る
SNS用画像をXDで作ってみました

28. サイズ違いの画像を作る

29. 写真は、PhotoshopからCCライブラリ経由で
• レイヤーをライブラリにドラッグして登録
カンバスから
はみ出した部分は
マスクをする

30. 写真は、PhotoshopからCCライブラリ経由で
• CCライブラリ経由で、
PhotoshopデータをXDへ
• CCライブラリで一括管理

31. ロゴ部分は、一括管理できなかった
• XDの[シンボル]は、サイズが変えられない

32. ロゴ部分は、一括管理できなかった
• Illustratorから登録した
CCライブラリは
XDで使えない
• XDから
CCライブラリ登録
できない

33. 複雑なグラフィックは
CCライブラリ経由で一括管理がよさそう
（ XDのCCライブラリが、
Illustrator対応するのも間近だそうです ）

34. Thank you!!
ウェブサイトのグラフィック作成。
パーツはPhotoshopやIllustratorで作り
プロトタイプ（モック）作成は
XDを使う！で決まりそうです。