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

1. Creators MeetUp
Photoshopによる
Web制作 – 初期設定編
いまから始める

2. Yuu ( Yuji Tsukaguchi )
Freelance Web Designer / PAKUTASO Engineer
@regret_raym
今から始めるPhotoshopによるWebデザイン制作

3. 今から始めるPhotoshopによるWebデザイン制作

4. 今から始めるPhotoshopによるWebデザイン制作

5. agenda
1. ワークフローのおさらい
2. 初期設定
3. アクション設定
4. JSXの設定
今から始めるPhotoshopによるWebデザイン制作

6. 今から始めるPhotoshopによるWebデザイン制作
ワークフローのおさらい

7. 従来のワークフロー
情報
設計
画面
設計
デザイン
カンプ
実装 テスト
ディレクター デザイナー コーダー
今から始めるPhotoshopによるWebデザイン制作

8. マルチデバイス対応
今から始めるPhotoshopによるWebデザイン制作
Source: A Respo‘n1s3e.0 t5o.1 ‘9R Wesepbo Dnesviveelo
Wpeerb S eDleecstiigonn is Not the Future’

9. 情報
設計
画面
設計
デザイン
カンプ
実装 テスト
ディレクター デザイナー コーダー
問題
発生
修正 修正 修正
従来のワークフロー
数百種類あるデバイスの
デザインカンプは作れない
今から始めるPhotoshopによるWebデザイン制作

10. 今から始めるPhotoshopによるWebデザイン制作

11. ワークフローの改善
プロト
タイプ
調整 テスト
Bootstrap
foundation
Edge Inspect
About responsivepx
Semantic
VIEWPORT RESIZER
SDK
今から始めるPhotoshopによるWebデザイン制作

12. Progressive Enhancement
Graceful Degradation
Pixel Perfect
今から始めるPhotoshopによるWebデザイン制作

13. Designing in the browser
今から始めるPhotoshopによるWebデザイン制作

14. 制作ツールの選択肢
今から始めるPhotoshopによるWebデザイン制作

15. Sketch
http://www.bohemiancoding.com/sketch/
今から始めるPhotoshopによるWebデザイン制作

16. ひとつのツールで全部を作る必要はない
得意なコトは得意なモノで
自分の効率の良さを追求する
今から始めるPhotoshopによるWebデザイン制作

17. 出来ることに越したことはない
実際使用するとき、困らないようにするために
今から始めるPhotoshopによるWebデザイン制作

18. 今から始めるPhotoshopによるWebデザイン制作
初期設定

19. 単位の設定
[編集] → [環境設定] → [単位・定規]
単位をpixelに
今から始めるPhotoshopによるWebデザイン制作

20. グリッドの設定
[編集] → [環境設定] → [ガイド・グリッド・スライス]
スタイルを「点線」、グリッド線「pixel」、分割数「100」
今から始めるPhotoshopによるWebデザイン制作

21. 自動選択ツールの設定
自動選択にチェック、レイヤーを選択
今から始めるPhotoshopによるWebデザイン制作

22. レイヤー名称のコピー解除
右上のメニューから[パネルオプション]
今から始めるPhotoshopによるWebデザイン制作

23. レイヤー名称のコピー解除
チェックを解除
今から始めるPhotoshopによるWebデザイン制作

24. 今から始めるPhotoshopによるWebデザイン制作
アクションの設定

25. アクションとは？
Photoshopで操作した動作を記録・再生できる
今から始めるPhotoshopによるWebデザイン制作

26. 写真を自動で加工
http://howicopewithlife.deviantart.com/art/Li
ght-Leaks-Photoshop-Actions-free-361385964
今から始めるPhotoshopによるWebデザイン制作

27. たとえば
1.レイヤーの格納グループ作成
2.トリミングを使ったスライス
今から始めるPhotoshopによるWebデザイン制作

28. 今から始めるPhotoshopによるWebデザイン制作
レイヤーをコンテンツごとに
格納するグループを作成
レイヤーの格納グループ作成
1. 新規アクション
2. グループ作成
3. 記録終了

29. 今から始めるPhotoshopによるWebデザイン制作
ロゴだけスライスする
トリミングを利用したスライス
1. 新規アクション
2. 新規ファイルに
レイヤーを複製
3. トリミング
4. 保存
5. 記録終了

30. DEMO
今から始めるPhotoshopによるWebデザイン制作

31. 繰り返し行う作業は、
アクションを作成して効率化できる
今から始めるPhotoshopによるWebデザイン制作

32. 今から始めるPhotoshopによるWebデザイン制作
アプリ、JSXなど

33. スライスは、数が多いと処理が面倒…
ガイドを引くのが面倒…
レイヤー機能を拡張したい…
今から始めるPhotoshopによるWebデザイン制作

34. アプリ、プラグインをうまく使う
今から始めるPhotoshopによるWebデザイン制作

35. Cut&Slice me
http://www.cutandslice.me/#jp

36. 今から始めるPhotoshopによるWebデザイン制作
Slicy
http://macrabbit.com/slicy/

37. GUIDEGUIDE
http://guideguide.me/
今から始めるPhotoshopによるWebデザイン制作

38. Pixel Dropr
http://pixeldropr.com/
今から始めるPhotoshopによるWebデザイン制作

39. Tych Panel 2
http://lumens.se/tychpanel/
今から始めるPhotoshopによるWebデザイン制作

40. 12 New Photoshop Tools for CS6
http://dmonzon.com/freebies/12-photoshop-
tools-cs6/
今から始めるPhotoshopによるWebデザイン制作

41. 参考サイト
 柔軟なワークフロー（Design Spice）
 初めてPhotoshopでWeb制作する前に
やっておくといい設定8(CS6含む)
（Design Color）
今から始めるPhotoshopによるWebデザイン制作

42. Photo by
http://www.pakutaso.com/
今から始めるPhotoshopによるWebデザイン制作

43. ありがとうございました