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によるWeb制作-初期設定編

14,371 views

Published on

第4回 Creators MeetUpで発表したスライドです。

  • Login to see the comments

今から始めるPhotoshopによるWeb制作-初期設定編

  1. 1. Creators MeetUpPhotoshopによるWeb制作 – 初期設定編いまから始める
  2. 2. Yuu ( Yuji Tsukaguchi )Freelance Web Designer / PAKUTASO Engineer@regret_raym今から始めるPhotoshopによるWebデザイン制作
  3. 3. 今から始めるPhotoshopによるWebデザイン制作
  4. 4. 今から始めるPhotoshopによるWebデザイン制作
  5. 5. agenda1. ワークフローのおさらい2. 初期設定3. アクション設定4. JSXの設定今から始めるPhotoshopによるWebデザイン制作
  6. 6. 今から始めるPhotoshopによるWebデザイン制作ワークフローのおさらい
  7. 7. 従来のワークフロー情報設計画面設計デザインカンプ実装 テストディレクター デザイナー コーダー今から始めるPhotoshopによるWebデザイン制作
  8. 8. マルチデバイス対応今から始めるPhotoshopによるWebデザイン制作Source: A Respo‘n1s3e.0 t5o.1 ‘9R Wesepbo DnesviveeloWpeerb S eDleecstiigonn is Not the Future’
  9. 9. 情報設計画面設計デザインカンプ実装 テストディレクター デザイナー コーダー問題発生修正 修正 修正従来のワークフロー数百種類あるデバイスのデザインカンプは作れない今から始めるPhotoshopによるWebデザイン制作
  10. 10. 今から始めるPhotoshopによるWebデザイン制作
  11. 11. ワークフローの改善プロトタイプ調整 テストBootstrapfoundationEdge InspectAbout responsivepxSemanticVIEWPORT RESIZERSDK今から始めるPhotoshopによるWebデザイン制作
  12. 12. Progressive EnhancementGraceful DegradationPixel Perfect今から始めるPhotoshopによるWebデザイン制作
  13. 13. Designing in the browser今から始めるPhotoshopによるWebデザイン制作
  14. 14. 制作ツールの選択肢今から始めるPhotoshopによるWebデザイン制作
  15. 15. Sketchhttp://www.bohemiancoding.com/sketch/今から始めるPhotoshopによるWebデザイン制作
  16. 16. ひとつのツールで全部を作る必要はない得意なコトは得意なモノで自分の効率の良さを追求する今から始めるPhotoshopによるWebデザイン制作
  17. 17. 出来ることに越したことはない実際使用するとき、困らないようにするために今から始めるPhotoshopによるWebデザイン制作
  18. 18. 今から始めるPhotoshopによるWebデザイン制作初期設定
  19. 19. 単位の設定[編集] → [環境設定] → [単位・定規]単位をpixelに今から始めるPhotoshopによるWebデザイン制作
  20. 20. グリッドの設定[編集] → [環境設定] → [ガイド・グリッド・スライス]スタイルを「点線」、グリッド線「pixel」、分割数「100」今から始めるPhotoshopによるWebデザイン制作
  21. 21. 自動選択ツールの設定自動選択にチェック、レイヤーを選択今から始めるPhotoshopによるWebデザイン制作
  22. 22. レイヤー名称のコピー解除右上のメニューから[パネルオプション]今から始めるPhotoshopによるWebデザイン制作
  23. 23. レイヤー名称のコピー解除チェックを解除今から始めるPhotoshopによるWebデザイン制作
  24. 24. 今から始めるPhotoshopによるWebデザイン制作アクションの設定
  25. 25. アクションとは?Photoshopで操作した動作を記録・再生できる今から始めるPhotoshopによるWebデザイン制作
  26. 26. 写真を自動で加工http://howicopewithlife.deviantart.com/art/Light-Leaks-Photoshop-Actions-free-361385964今から始めるPhotoshopによるWebデザイン制作
  27. 27. たとえば1.レイヤーの格納グループ作成2.トリミングを使ったスライス今から始めるPhotoshopによるWebデザイン制作
  28. 28. 今から始めるPhotoshopによるWebデザイン制作レイヤーをコンテンツごとに格納するグループを作成レイヤーの格納グループ作成1. 新規アクション2. グループ作成3. 記録終了
  29. 29. 今から始めるPhotoshopによるWebデザイン制作ロゴだけスライスするトリミングを利用したスライス1. 新規アクション2. 新規ファイルにレイヤーを複製3. トリミング4. 保存5. 記録終了
  30. 30. DEMO今から始めるPhotoshopによるWebデザイン制作
  31. 31. 繰り返し行う作業は、アクションを作成して効率化できる今から始めるPhotoshopによるWebデザイン制作
  32. 32. 今から始めるPhotoshopによるWebデザイン制作アプリ、JSXなど
  33. 33. スライスは、数が多いと処理が面倒…ガイドを引くのが面倒…レイヤー機能を拡張したい…今から始めるPhotoshopによるWebデザイン制作
  34. 34. アプリ、プラグインをうまく使う今から始めるPhotoshopによるWebデザイン制作
  35. 35. Cut&Slice mehttp://www.cutandslice.me/#jp
  36. 36. 今から始めるPhotoshopによるWebデザイン制作Slicyhttp://macrabbit.com/slicy/
  37. 37. GUIDEGUIDEhttp://guideguide.me/今から始めるPhotoshopによるWebデザイン制作
  38. 38. Pixel Droprhttp://pixeldropr.com/今から始めるPhotoshopによるWebデザイン制作
  39. 39. Tych Panel 2http://lumens.se/tychpanel/今から始めるPhotoshopによるWebデザイン制作
  40. 40. 12 New Photoshop Tools for CS6http://dmonzon.com/freebies/12-photoshop-tools-cs6/今から始めるPhotoshopによるWebデザイン制作
  41. 41. 参考サイト 柔軟なワークフロー(Design Spice) 初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む)(Design Color)今から始めるPhotoshopによるWebデザイン制作
  42. 42. Photo byhttp://www.pakutaso.com/今から始めるPhotoshopによるWebデザイン制作
  43. 43. ありがとうございました

×