Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Photoshop使いにおくるXDコトはじめ

1,206 views

Published on

PhotoshopとXDの操作比較。ウェブの画面設計をするときのレイアウト作業は、XDを使うとめっちゃ楽でした。★2018年1月31日(水)に、同内容をYoutubeライブ配信します。お楽しみに。情報は、Twitter( https://twitter.com/r360studio )をご覧ください。

【Adobe XD meeting #12】でLTをしたときの資料です。
< https://xd-study.connpass.com/event/76284/ >

Published in: Education
  • Be the first to comment

  • Be the first to like this

Photoshop使いにおくるXDコトはじめ

  1. 1. Photoshop使いにおくる XDコトはじめ 森和恵
  2. 2. ウェブ系インストラクター Twitter: @r360studio https://www.youtube.com/r360studio 森和恵
  3. 3. XDを使い出してまだ1ヶ月ぐらい (合計、20時間ぐらい)
  4. 4. とにかく、シンプルな使いごごち
  5. 5. 簡単に使えたことに、驚きです。
  6. 6. XDをはじめて使った感想 • アートボードがないと画面がまっしろに • Win版も、いまは機能が充実してる • [終了]メニューがない • UWPアプリは、とっても軽快 (ユニバーサル Windows プラットフォーム )
  7. 7. PhotoshopとXDで操作を比較
  8. 8. ボタンをPhotoshopで作る
  9. 9. Photoshopでボタンを作る • シェイプで四角を描き、 ボタンのベースを作る
  10. 10. Photoshopでボタンを作る • ラベルをテキストで追加 テキストを編集状態に 切り替えるのが面倒!
  11. 11. Photoshopでボタンを作る • ベースの四角形を一括管理するには 「リンクされたアイテム」
  12. 12. Photoshopでボタンを作る • リンクされたアイテムを作るには 1. [スマートオブジェクト変換] 2. [リンクされたアイテムに変換] • 埋め込まれたpsbファイルで 一括管理する
  13. 13. Photoshopでボタンを作る • テキスの書式を一括管理するには 「段落スタイル」
  14. 14. ボタンをXDで作る
  15. 15. XDでボタンを作る • 長方形で四角を描き、 ボタンのベースを作る
  16. 16. XDでボタンを作る <余談> Photoshopで レイヤーメニューから [SVGをコピー]で XDへペーストできる ※パスオブジェクト
  17. 17. XDでボタンを作る • ラベルをテキストで追加 • ポイントとエリア内切替が自由
  18. 18. XDでボタンを作る • ポイントテキストは、 ドラッグでサイズ変更ができる • エリア内テキストは、 複数行があつかえる
  19. 19. XDでボタンを作る • カラーやフォントの 一括管理は、[アセット]で • オブジェクトごとなら、 [シンボル]で一括管理
  20. 20. XDでボタンを作る • XDでは、[シンボル]中のテキストは 個別に書き換えられる
  21. 21. PhotoshopとXDで操作を比較して
  22. 22. XDは、一括管理がめちゃ便利!
  23. 23. テキスト操作は、XDが楽 (Illustrator的な操作)
  24. 24. XDは、レイヤーに縛られない (Illustrator的な操作)
  25. 25. XDの操作感は、Illustratorっぽい (軽量化されたIllustratorの印象)
  26. 26. よし!これから積極的にXD使おう!
  27. 27. ……というわけで いつもIllustratorで作る SNS用画像をXDで作ってみました
  28. 28. サイズ違いの画像を作る
  29. 29. 写真は、PhotoshopからCCライブラリ経由で • レイヤーをライブラリにドラッグして登録 カンバスから はみ出した部分は マスクをする
  30. 30. 写真は、PhotoshopからCCライブラリ経由で • CCライブラリ経由で、 PhotoshopデータをXDへ • CCライブラリで一括管理
  31. 31. ロゴ部分は、一括管理できなかった • XDの[シンボル]は、サイズが変えられない
  32. 32. ロゴ部分は、一括管理できなかった • Illustratorから登録した CCライブラリは XDで使えない • XDから CCライブラリ登録 できない
  33. 33. 複雑なグラフィックは CCライブラリ経由で一括管理がよさそう ( XDのCCライブラリが、 Illustrator対応するのも間近だそうです )
  34. 34. Thank you!! ウェブサイトのグラフィック作成。 パーツはPhotoshopやIllustratorで作り プロトタイプ(モック)作成は XDを使う!で決まりそうです。

×