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.

WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道

19,724 views

Published on

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

Published in: Business
  • Be the first to comment

WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道

  1. 1. Webデザインにおける、 Photoshopの作業速度 向上テクニック eater schoo - http://schoo.jp/class/234 2013.10.7 黒葛原 道
  2. 2. 黒葛原 道(つづらはらとおる) 大阪出身、宮崎在住 デザイン事務所 eater 後藤修と黒葛原道のデザインユニット。 http://29eater.com/ ポートフォリオ http://29eater.com/portfolio eater
  3. 3. 「Photoshop」ってなに?? 質問!
  4. 4. Webデザインに特化したソフトではない もともとはカメラマン用の画像補正ソフト 写真、Web、グラフィックも、時には 3Dや映像まで
  5. 5. Web デザイン専用ソフトではないため 適切な使い方を覚えることで よりパフォーマンスを発揮できる!
  6. 6. Webデザインを取り巻く 環境も刻々と変化
  7. 7. マルチデバイス(スマホやタブレット) ディスプレイの高密度化 ワークフローの多様化 新しい技術(HTML5、CSS3、jQuery...)
  8. 8. Webデザインにおける、 Photoshopの作業速度 向上テクニック eater schoo - http://schoo.jp/class/234 2013.10.7 黒葛原 道
  9. 9. 準備編 フォーマット編 デザイン・レイアウト編 スライス・書き出し編 コーディング補助編 質問など 本日の流れ
  10. 10. 準備編
  11. 11. まずはPhotoshopをWebに適した状態で 使うための設定をしておこう。 ピクセルベースできちんとレイアウト、 描画ができるようにするためです。
  12. 12. [環境設定]>[一般]> [ベクトルツールと変形を ピクセルグリッドにスナップ] ※CS6 以降 [環境設定]>[単位]>[ピクセル]
  13. 13. フォーマット編
  14. 14. 新規書類作成時には[プリセット]を [Web]にする。 用紙サイズ、解像度の設定が Web に 適した状態に プリセットを保存しておくと便利!
  15. 15. パネルの項目名をクリックで数値を 全選択できる。 パネルの項目名上でドラッグすると スライダーが現れる optionキーで[キャンセル]を[初期化] パネル・ダイアログ操作の Tips
  16. 16. カンバスサイズは背景領域も考え コンテンツ幅 + 背景領域で作業する
  17. 17. 960px など 両サイドにガイドを引いておく その後背景領域も考えカンバスサイズを 左右 +100 程度広げる 必要に応じて他のガイドも引く
  18. 18. 選択範囲ツールを定規代わりに使うと便利!
  19. 19. エクステンションの Guide Guide を 使えば複数のガイドも一気に引ける! http://guideguide.me/
  20. 20. 質問! エクステンションを知ってますか? 利用したことはありますか?
  21. 21. エクステンションとはPhotoshopの 機能を拡張するためのもの (他にもあります)
  22. 22. デザイン・レイアウト編
  23. 23. ツール選択のテクニック キーボードショートカットを活用する
  24. 24. [V]キーで[移動ツール] [C]キーで[スライスツール] [B]キーで[ブラシツール] [M]キーで[選択範囲ツール] [D]キーで描画色と背景色をデフォルトに [X]キーで描画色と背景色の入れ替え ツール選択のテクニック
  25. 25. shift キーを併用することで、 ツールパネルの非アクティブなツールを 順番に切り替えができる
  26. 26. 右クリックを活用する 移動ツールでカンバス上のオブジェクトを クリックする。 ※[移動ツール]のオプション[自動選択]は  あまり使用しない。  もしくは必要に応じて使用・不使用を切り替える。 レイヤー選択のテクニック
  27. 27. キーボードショートカットを活用する レイヤー選択のテクニック [option]+[ ] ]で一つ上のレイヤーに移動 [option]+[ [ ]で一つ下のレイヤーに移動 [command]+[G]でレイヤーのグループ化 など…
  28. 28. 簡単にブラシの設定を 変更するTips
  29. 29. 右クリックでブラシプリセット [option]キーでスポイト [option]+[control] を押しながら 上下にドラッグするとブラシの硬さ、 左右にドラッグするとサイズの変更 [ ]+[option]+[control]で カラーピッカーの表示
  30. 30. 変形の Tips
  31. 31. 属性パネルから角丸の変更やサイズの 変更ができる 属性パネルでぼかすことができる 自由変形の繰り返し → +shift+T → +option+shift+T で  複製しながら繰り返し
  32. 32. テキスト関連の Tips
  33. 33. 文字をIllustrator のアウトライン化の ようにパス(シェイプに)する [書式]メニュー>[シェイプに変換]
  34. 34. 文字組みを早くするショートカット カーニング [option]+[←][→] トラッキング テキストを全選択し       [option]+[←][→] 行送り   [option]+[↑][↓] ベースライン[option]+[shift]+[↑][↓] 編集を確定 [ ]+[return]       テンキーの場合は[enter]
  35. 35. 対応するショートカットがない 場合は自分で作る [編集]メニュー>[キーボードショートカット]
  36. 36. マスク
  37. 37. レイヤーマスク クリッピングマスク
  38. 38. レイヤーマスク レイヤーマスクを[白]で塗ると表示 [黒]で塗ると非表示 [白][黒]の 2 色だけでなく白∼黒の 階調も利用できる
  39. 39. [ ]+[delete]背景色で塗りつぶし [option]+[delete]描画色で塗りつぶし [shift]+[delete]塗りつぶしのダイアログ 塗りつぶしのショートカットを 覚えておくと便利
  40. 40. 白、黒で塗り分けが出来ればいいので…
  41. 41. グラデーションツールを使う ブラシツールを使う その他、白・黒で塗り分けできれば何でも
  42. 42. クリッピングマスク 図形(シェイプ)などのレイヤーを用いた マスク イラストレーターのクリッピングマスク に近いイメージ
  43. 43. マスクとして利用したい図形等のレイヤー の上にマスクをかけたいレイヤーを配置 [option]キーを押しながらレイヤー間を クリック
  44. 44. パーツの使い回し
  45. 45. スマートオブジェクトを使えば グラフィックパーツの使い回しができる 一つのオブジェクトを編集すると関連する オブジェクトすべてが変更される スマートオブジェクトの利用
  46. 46. 複数ページ・デザインの管理
  47. 47. PhotoshopにはないIllustratorの リンク機能と同じような機能を エクステンションを利用して実現する PSDファイルをリンクする
  48. 48. エクステンションの利用 CanLinkIt http://www.canlinkit.com
  49. 49. レイヤーカンプを使えばデザインの バリエーションを 1 つのファイルで 管理できる
  50. 50. トップページと下層ページのデザインを 一つのファイルで管理 複数のデザインバリエーションを一つの ファイルで管理
  51. 51. 変数を使って決まったレイアウトの デザインを複数作る
  52. 52. こんなの
  53. 53. スライス・書き出し編
  54. 54. 質問! 画像の書き出しは どのようにしてますか?
  55. 55. スライスツールでスライスして [Web 用保存]で書き出し レイヤーをファイルで書きだし保存
  56. 56. 便利なスライス方法
  57. 57. レイヤーを選択し[レイヤー]メニュー> [レイヤーに基づく新規スライス]を実行 レイヤーから自動でスライスする
  58. 58. ショートカットを割り当てると便利 作成されたスライスは自動的にレイヤー とリンクされるので、レイヤーの変形を おこなえば動的にスライスも変形される。
  59. 59. レイヤー名をスライス名にし [レイヤーに基づく新規スライス]を 実行できるようにする。 また、グループレイヤーもスライス できるようにする
  60. 60. スクリプトを利用する
  61. 61. sliceGroup_Set.jsx http://develo.org/2010/06/10/0154.html
  62. 62. 質問! スクリプトを知ってますか?
  63. 63. Photoshop をはじめ Adobe のアプリを JavaScript で制御する仕組み
  64. 64. 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/
  65. 65. 他のアプリ、機能でスライスする。 スライス機能は使わない方法
  66. 66. CC(Ver14.1)から利用できる画像アセット [環境設定]>[プラグイン]> [Generator]を有効にする [ファイル]メニュー>[生成]> [画像アセット] Photoshop 標準機能
  67. 67. CC(Ver14.1)から利用できる画像アセット [環境設定]>[プラグイン] >[Generator]を有効にする Photoshop 標準機能
  68. 68. エクステンションの利用 Cut&Slice me http://www.cutandslice.me/
  69. 69. 専用アプリの利用 Slicy http://macrabbit.com/slicy/
  70. 70. コーディング補助編
  71. 71. サイズの取得
  72. 72. 選択範囲ツールで選択、もしくは レイヤーを +クリックして選択範囲を 読み込み情報パネルでサイズ等を確認 (Win の場合は Ctrl+ クリック)
  73. 73. スポイトツール右クリックでカラーの 16 進コードを取得
  74. 74. CSS の書き出し
  75. 75. レイヤーを右クリック>CSS をコピー エクステンションの利用  ・CSS Hat  ・CSS3Ps Photoshop 標準機能
  76. 76. CSS3のプロパティが書き出せる とくにPhotoshopで作った図形や スタイルをCSS3に変換できるのが便利
  77. 77. まとめ
  78. 78. まずはピクセルベースできっちり作る! 足りない機能は拡張するかカスタマイズ メニュー等に記載されていないショート カットもあるので探してみよう いろんな機能を組み合わせてみよう 画像の書き出しは生産性が低いので 出来るだけ早くできるよう工夫しよう まとめ
  79. 79. ありがとうございました。 Webデザインにおける、 Photoshopの作業速度 向上テクニック eater schoo - http://schoo.jp/class/234 2013.10.7 黒葛原 道

×