ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/234/room ーーーーーーーーーーーーーーーーーーーーーーー

2. Webデザインにおける、
Photoshopの作業速度
向上テクニック
eater
schoo - http://schoo.jp/class/234
2013.10.7
黒葛原 道

3. 黒葛原 道（つづらはらとおる）
大阪出身、宮崎在住
デザイン事務所 eater
後藤修と黒葛原道のデザインユニット。
http://29eater.com/
ポートフォリオ
http://29eater.com/portfolio
eater

4. 「Photoshop」ってなに？？
質問！

5. Webデザインに特化したソフトではない
もともとはカメラマン用の画像補正ソフト
写真、Web、グラフィックも、時には
3Dや映像まで

6. Web デザイン専用ソフトではないため
適切な使い方を覚えることで
よりパフォーマンスを発揮できる！

7. Webデザインを取り巻く
環境も刻々と変化

8. マルチデバイス（スマホやタブレット）
ディスプレイの高密度化
ワークフローの多様化
新しい技術（HTML5、CSS3、jQuery...）

9. Webデザインにおける、
Photoshopの作業速度
向上テクニック
eater
schoo - http://schoo.jp/class/234
2013.10.7
黒葛原 道

10. 準備編
フォーマット編
デザイン・レイアウト編
スライス・書き出し編
コーディング補助編
質問など
本日の流れ

11. 準備編

12. まずはPhotoshopをWebに適した状態で
使うための設定をしておこう。
ピクセルベースできちんとレイアウト、
描画ができるようにするためです。

13. ［環境設定］＞［一般］＞
［ベクトルツールと変形を
ピクセルグリッドにスナップ］
※CS6 以降
［環境設定］＞［単位］＞［ピクセル］

14. フォーマット編

15. 新規書類作成時には［プリセット］を
［Web］にする。
用紙サイズ、解像度の設定が Web に
適した状態に
プリセットを保存しておくと便利！

16. パネルの項目名をクリックで数値を
全選択できる。
パネルの項目名上でドラッグすると
スライダーが現れる
optionキーで［キャンセル］を［初期化］
パネル・ダイアログ操作の Tips

17. カンバスサイズは背景領域も考え
コンテンツ幅 + 背景領域で作業する

18. 960px など
両サイドにガイドを引いておく
その後背景領域も考えカンバスサイズを
左右 +100 程度広げる
必要に応じて他のガイドも引く

19. 選択範囲ツールを定規代わりに使うと便利！

20. エクステンションの Guide Guide を
使えば複数のガイドも一気に引ける！
http://guideguide.me/

21. 質問！
エクステンションを知ってますか？
利用したことはありますか？

22. エクステンションとはPhotoshopの
機能を拡張するためのもの
（他にもあります）

23. デザイン・レイアウト編

24. ツール選択のテクニック
キーボードショートカットを活用する

25. ［V］キーで［移動ツール］
［C］キーで［スライスツール］
［B］キーで［ブラシツール］
［M］キーで［選択範囲ツール］
［D］キーで描画色と背景色をデフォルトに
［X］キーで描画色と背景色の入れ替え
ツール選択のテクニック

26. shift キーを併用することで、
ツールパネルの非アクティブなツールを
順番に切り替えができる

27. 右クリックを活用する
移動ツールでカンバス上のオブジェクトを
クリックする。
※［移動ツール］のオプション［自動選択］は
あまり使用しない。
もしくは必要に応じて使用・不使用を切り替える。
レイヤー選択のテクニック

28. キーボードショートカットを活用する
レイヤー選択のテクニック
［option］+［ ] ］で一つ上のレイヤーに移動
［option］+［ [ ］で一つ下のレイヤーに移動
［command］+［G］でレイヤーのグループ化
など…

29. 簡単にブラシの設定を
変更するTips

30. 右クリックでブラシプリセット
［option］キーでスポイト
[option]+[control] を押しながら
上下にドラッグするとブラシの硬さ、
左右にドラッグするとサイズの変更
[ ]+[option]+［control］で
カラーピッカーの表示

31. 変形の Tips

32. 属性パネルから角丸の変更やサイズの
変更ができる
属性パネルでぼかすことができる
自由変形の繰り返し
→ +shift+T
→ +option+shift+T で
複製しながら繰り返し

33. テキスト関連の Tips

34. 文字をIllustrator のアウトライン化の
ようにパス（シェイプに）する
［書式］メニュー＞［シェイプに変換］

35. 文字組みを早くするショートカット
カーニング ［option］+［←］［→］
トラッキング テキストを全選択し
［option］+［←］［→］
行送り ［option］+［↑］［↓］
ベースライン［option］+［shift］+［↑］［↓］
編集を確定 ［ ］+［return］
テンキーの場合は［enter］

36. 対応するショートカットがない
場合は自分で作る
［編集］メニュー＞［キーボードショートカット］

37. マスク

38. レイヤーマスク
クリッピングマスク

39. レイヤーマスク
レイヤーマスクを［白］で塗ると表示
［黒］で塗ると非表示
［白］［黒］の 2 色だけでなく白∼黒の
階調も利用できる

40. ［ ］+［delete］背景色で塗りつぶし
［option］+［delete］描画色で塗りつぶし
［shift］+［delete］塗りつぶしのダイアログ
塗りつぶしのショートカットを
覚えておくと便利

41. 白、黒で塗り分けが出来ればいいので…

42. グラデーションツールを使う
ブラシツールを使う
その他、白・黒で塗り分けできれば何でも

43. クリッピングマスク
図形（シェイプ）などのレイヤーを用いた
マスク
イラストレーターのクリッピングマスク
に近いイメージ

44. マスクとして利用したい図形等のレイヤー
の上にマスクをかけたいレイヤーを配置
［option］キーを押しながらレイヤー間を
クリック

45. パーツの使い回し

46. スマートオブジェクトを使えば
グラフィックパーツの使い回しができる
一つのオブジェクトを編集すると関連する
オブジェクトすべてが変更される
スマートオブジェクトの利用

47. 複数ページ・デザインの管理

48. PhotoshopにはないIllustratorの
リンク機能と同じような機能を
エクステンションを利用して実現する
PSDファイルをリンクする

49. エクステンションの利用
CanLinkIt
http://www.canlinkit.com

50. レイヤーカンプを使えばデザインの
バリエーションを 1 つのファイルで
管理できる

51. トップページと下層ページのデザインを
一つのファイルで管理
複数のデザインバリエーションを一つの
ファイルで管理

52. 変数を使って決まったレイアウトの
デザインを複数作る

53. こんなの

54. スライス・書き出し編

55. 質問！
画像の書き出しは
どのようにしてますか？

56. スライスツールでスライスして
［Web 用保存］で書き出し
レイヤーをファイルで書きだし保存

57. 便利なスライス方法

58. レイヤーを選択し［レイヤー］メニュー＞
［レイヤーに基づく新規スライス］を実行
レイヤーから自動でスライスする

59. ショートカットを割り当てると便利
作成されたスライスは自動的にレイヤー
とリンクされるので、レイヤーの変形を
おこなえば動的にスライスも変形される。

60. レイヤー名をスライス名にし
［レイヤーに基づく新規スライス］を
実行できるようにする。
また、グループレイヤーもスライス
できるようにする

61. スクリプトを利用する

62. sliceGroup_Set.jsx
http://develo.org/2010/06/10/0154.html

63. 質問！
スクリプトを知ってますか？

64. Photoshop をはじめ Adobe のアプリを
JavaScript で制御する仕組み

65. stocker.jp
作り方や便利なスクリプトの紹介など
http://stocker.jp/diary/photoshop-jsx/
バシャログ
PSD 内のテキストを .txt ファイルに抜き出すスクリプト
http://c-brains.jp/blog/wsg/12/02/23-234937.php
Open Space
http://www.openspc2.org/book/PhotoshopCS6/

66. 他のアプリ、機能でスライスする。
スライス機能は使わない方法

67. CC（Ver14.1）から利用できる画像アセット
［環境設定］＞［プラグイン］＞
［Generator］を有効にする
［ファイル］メニュー＞［生成］＞
［画像アセット］
Photoshop 標準機能

68. CC（Ver14.1）から利用できる画像アセット
［環境設定］＞［プラグイン］
＞［Generator］を有効にする
Photoshop 標準機能

69. エクステンションの利用
Cut&Slice me
http://www.cutandslice.me/

70. 専用アプリの利用
Slicy
http://macrabbit.com/slicy/

71. コーディング補助編

72. サイズの取得

73. 選択範囲ツールで選択、もしくは
レイヤーを ＋クリックして選択範囲を
読み込み情報パネルでサイズ等を確認
（Win の場合は Ctrl+ クリック）

74. スポイトツール右クリックでカラーの
16 進コードを取得

75. CSS の書き出し

76. レイヤーを右クリック＞CSS をコピー
エクステンションの利用
・CSS Hat
・CSS3Ps
Photoshop 標準機能

77. CSS3のプロパティが書き出せる
とくにPhotoshopで作った図形や
スタイルをCSS3に変換できるのが便利

78. まとめ

79. まずはピクセルベースできっちり作る！
足りない機能は拡張するかカスタマイズ
メニュー等に記載されていないショート
カットもあるので探してみよう
いろんな機能を組み合わせてみよう
画像の書き出しは生産性が低いので
出来るだけ早くできるよう工夫しよう
まとめ

80. ありがとうございました。
Webデザインにおける、
Photoshopの作業速度
向上テクニック
eater
schoo - http://schoo.jp/class/234
2013.10.7
黒葛原 道