What's Sketch.app

2,094 views
2,007 views

Published on

Ps / Ai / Fw / Sketch ガチンコバトル勉強会 in 岡山で発表した、Sketch.appのスライドです。発表時はでも中心だったので、それなりに分かるよう加筆しています。

Published in: Design

What's Sketch.app

  1. 1. what’sSketch.app@littlebustersPs / Ai / Fw / Sketch ガチンコバトルin 大都会岡山2013.6.22
  2. 2. 自己紹介@littlebusters2DesignFireworks Extensions/ j Y S&http://creative-tweet.net
  3. 3. What’s Sketch.app?• Fwの一件で一躍有名に• BohemianCodingのベクターベースアプリで、FwというよりAiに近いかも3
  4. 4. 4デモを交えて紹介していきますしましたので、ここから加筆しています
  5. 5. ドキュメント5マルチアートボード・ページ
  6. 6. アートボードのプリセットプリセットの追加アートボードの編集マルチアートボード
  7. 7. オブジェクトは各アートボードに入るマルチアートボード
  8. 8. 8ここからページ管理マルチページ
  9. 9. テンプレート保存9
  10. 10. 10テンプレートの保存 テンプレートの利用
  11. 11. オブジェクトのプロパティ11回転・画像・CSS
  12. 12. 回転12回転していない状態と同様に変形できる
  13. 13. ハンドルを回転させないようにするには13パス編集モードで回転させると、ハンドルは回転しないただし、変形がおかしなことになる(バグ?)
  14. 14. 画像の取り扱い14縮小→拡大しても、オリジナルの画質を保持(オリジナルより大きくしない場合)
  15. 15. CSSプロパティの取得15/* Rectangle 1: */border-radius: 10px;-webkit-transform: rotate(330deg);-moz-transform: rotate(330deg);-ms-transform: rotate(330deg);-o-transform: rotate(330deg);transform: rotate(330deg);background: #E63615;border: 1px solid #3C1622;右クリック or Edit メニューから取得
  16. 16. CSSプロパティの比較• 50 × 50px の矩形• カンバスの左上へ配置• 1px #000の線• 黒→白の垂直グラデーション• デフォルトでできる機能のみを使用16
  17. 17. Photoshop CC17.rectangle {border-width: 1px;border-color: rgb( 0, 0, 0 );border-style: solid;background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(3,0,0) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(3,0,0) 100%);background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(3,0,0) 100%);position: absolute;left: 0px;top: 0px;width: 48px;height: 48px;z-index: 4;}
  18. 18. Illustrator CC18.rect{background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 255, 255, 1) 0%,rgba(0, 0,0, 1) 100%);background : -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0,1) 100%);background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(255, 255,255, 1) ),color-stop(1,rgba(0, 0, 0, 1) ));background : -o-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1)100%);background : -ms-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1)100%);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#000000 ,GradientType=0)";background : linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);border-style : Solid;border-color : #000000;border-color : rgba(0, 0, 0, 1);border-width : 1px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#FFFFFF , GradientType=0);}
  19. 19. Fireworks CS619background-image:-moz-linear-gradient(50% 0% -90deg,rgb(0,0,0)0%,rgb(255,255,255) 100%);background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,rgb(0,0,0)),color-stop(1, rgb(255,255,255)));background-image:-webkit-linear-gradient(-90deg,rgb(0,0,0) 0%,rgb(255,255,255)100%);background-image:-o-linear-gradient(-90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%);background-image:-ms-linear-gradient(-90deg,rgb(0,0,0) 0%,rgb(255,255,255)100%);background-image:linear-gradient(180deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%);width:49px;height:49px;border-color:rgb(0,0,0);border-width:1px;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;border-style:solid;-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ffffffff,GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ffffffff,GradientType=0);※コメントオフ
  20. 20. Sketch.app20/* Rectangle 1: */background-image: -o-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);background-image: linear-gradient(-180deg, #000000 0%, #FFFFFF 100%);border: 1px solid #000000;
  21. 21. 効果のスタック21
  22. 22. 221つのオブジェクトに複数のプロパティを設定できる
  23. 23. プロパティのリンク23
  24. 24. インスペクタはここで表示リンクインスペクタ
  25. 25. 25オブジェクトの色を変更すると、リンクされているものも変わる
  26. 26. フォントはこちら
  27. 27. スライスと書き出し27@2xサポート・SVG・D&D
  28. 28. 28書き出すオブジェクトの選択背景を無視して書き出しなどが可能に解像度の選択適当に作ったスライスでも不要な透明部分のピクセルを切り取りしてくれる
  29. 29. 29サポートされている書き出し形式小さいプレビューをDrag & Drop で書き出し
  30. 30. 自動保存30
  31. 31. 31or
  32. 32. ツール類32グリッド・整列(Grid Tool)・回転コピー(笑)
  33. 33. Square Grid
  34. 34. 34Layout Grid
  35. 35. Grid Tool 使用前35
  36. 36. Grid Tool 使用後36
  37. 37. 回転コピー37
  38. 38. 回転コピー編集中ここを動かして程よい形に
  39. 39. 回転コピー確定後オブジェクトがブーリアン演算されている
  40. 40. スクリプトによる拡張40
  41. 41. 41http://creative-tweet.net/blog/2013/06/extending-sketchapp.html
  42. 42. 日本語にならないの?42
  43. 43. なりません43http://creative-tweet.net/blog/2013/05/translate-sketchapp.html
  44. 44. 44ちょっとした小技などおまけ
  45. 45. オブジェクトサイズ変更のショートカット45⌘ ++ or← +( )で、10pxshift→⌘ + or↑ ↓+( )で、10pxshift左上起点
  46. 46. 任意の角丸を角にする46パスの編集モードで角にするアンカーを選択これを選択選択解除角丸を再度適用すると四隅全てが角丸になります
  47. 47. マウスで数値変更47テキストボックスでドラッグ数値アップ数値ダウン
  48. 48. ショートカットのカスタマイズ48キーボードを選択
  49. 49. 49
  50. 50. 50例: カーニング狭くoption + ←
  51. 51. 51追加された
  52. 52. 52ちなみに とある場所でStocker.jp のなつきさんが試してくださりできることが分かりました
  53. 53. 53• アニメーション関連• シンボル的に使える機能なし• 日本語のサポート• 描画バグが多め• 多パスは不向き?• 対応プラットフォームが OSX のみアカンところ
  54. 54. どう使っていくか?54
  55. 55. 得意• 軽い UI とベクターを活かした、ラピッドプロトタイピング• シンプルなグラフィックやパーツ作り55
  56. 56. 不得手• 写真編集(不得手というかできない)• かなり凝ったディテールもの• ブラシで細かく加工するようなもの56
  57. 57. →ワイヤーフレーム• マルチアートボードの一覧性と、プロパティのリンク57
  58. 58. →モックやプロトタイピング• カンプではなくパーツ単位での作成。• CSS プロパティの取得• Design in the Browser ならそこまでお世話にならないと思うが…58
  59. 59. →ユーザーインターフェイス• 流行どころのフラット UI なら十分対応できる• 他のアプリとの往復が多少あってもいいなら、ほとんどこなせる…ハズ• テクスチャづくり・写真加工系を任せる59
  60. 60. 結局やる気の問題?• 実際には大概の作業で利用可能• しかし、最適化されたワークフローは確実なので、腰が重いのも分かる• また、Sketch.app が Ps や Ai・Fw を完全に置き換えられるわけじゃない• けど、それでいいのか?というのは、今 考えるチャンス60
  61. 61. 今後• ビットマップを使う機会は確実に減る• どの程度のクオリティが必要か• 本当にそのディテールが必要なのか、使える時間・お金• 使えるまでのコストはかかるが、「使いこなす」までにならなくとも、できることを知るのは大切61
  62. 62. Thank You!62@littlebustershttp://creative-tweet.net/

×