Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Sketch速習会@Wantedly

Wantedlyで隔週で行っている社員向けの速習集会で発表しました。毎回若干名外部の人も招待しています。
http://wantedly.connpass.com/

  • Als Erste(r) kommentieren

Sketch速習会@Wantedly

  1. 1. Sketch速習会 by @ui_pb
  2. 2. Profile 宇佐美 龍 1996年6月19日生まれ、19歳 Wantedlyでデザイナーをしています。 メイン UI設計、フロントエンド 個人 映像制作、写真、DTP
  3. 3. UIデザインツール About Sketch
  4. 4. HISTORY of UI Tool Illustrator CS6 Photoshop CC Sketch3 長方形ツールとリンクファイル配置に Psが対応したのを機に乗り換える WantedlyがSketchだったので
  5. 5. SketchのUI Tool Bar Layer inspectorArtboard
  6. 6. とりあえず作ってみます
  7. 7. Demo 何作ろう…
  8. 8. Demo みんなが知ってそうなのがいいな
  9. 9. Demo wantedly.com
  10. 10. Demo
  11. 11. 1. Sketchの概念について 2. 基本操作 3. ツクル課題 4. ツクル課題の解説 5. ヨミトル課題 6. ヨミトリ課題の解説 Agenda
  12. 12. Why Sketch?
  13. 13. Sketchの基礎
  14. 14. Sketch.appを起動してください もう起動してますね
  15. 15. 新しいファイルを作ります ⌘+N
  16. 16. どこで作り始めたらいいんだ…
  17. 17. ということで、アートボードを作ります A
  18. 18. それでは
  19. 19. パーツの操作
  20. 20. まず覚えることは大きく3つ
  21. 21. ズームとツールとテキスト
  22. 22. 3つのズーム アートボード全体を見る ⌘+1 選択中の要素を見る ⌘+2 実際の大きさで見る ⌘+0
  23. 23. 3つのパーツ 長方形ツール R 円ツール O 線ツール L ectangle val ine
  24. 24. テキストの入力 T 入力したいところをクリック
  25. 25. レイヤーとグループ
  26. 26. グループの作り方と基準
  27. 27. そもそもなぜグループを作るのか グループを作る基準
  28. 28. • パーツの移動をしやすくするため • レイヤーパネルを汚さないため • 高速な実装を実現するため グループを作る基準
  29. 29. デザインデータはあくまで実装して意味をもつ グループを作る基準
  30. 30. グループ=<div> グループを作る基準
  31. 31. にするところはグループ化
  32. 32. 1つのHTMLタグになるところはグループ化
  33. 33. グループを作る基準
  34. 34. できるだけ細かくグループ化しとく
  35. 35. 懸念 深い階層のパーツが選択するのが大変
  36. 36. コードと逆 レイヤーの順番
  37. 37. つまり、グローバルヘッダーが レイヤーパネルの一番下にくる レイヤーの順番
  38. 38. レイヤーの操作 ゼン面のパーツ(同じ階層内) tab 下の階層に入る enter 上の階層に出て行く esc
  39. 39. レイヤーの操作 めんどくさすぎる…
  40. 40. レイヤーの操作 ダイレクト選択 ⌘+click
  41. 41. 最速そうなレイヤーの操作 ダイレクト選択 ⌘+click 上の階層に出て行く esc
  42. 42. 大切なのはパーツ/グループに名前をつけること ⌘+R
  43. 43. ルールを決めると分かりやすい (<div>のclass名っぽく)
  44. 44. レイヤー操作まとめ 1. パーツを置く(R/O/L) 2. パーツの名前を変更(⌘+R) 3. グループ化 (⌘+G) 4. グループの名前を変更(⌘+R)
  45. 45. ツクりましょう
  46. 46. 悩み デザインを正確に実装してくれない…
  47. 47. ヨミましょう
  48. 48. いきなり課題 demo_read.sketch
  49. 49. Style Check List •font-size •color(font) •opacity •fill •border color/px •radius
  50. 50. 時間があったらtipsを話します。

×