Your SlideShare is downloading. ×
0
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
What's Sketch.app
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What's Sketch.app

1,622

Published on

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

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

Published in: Design
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,622
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×