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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

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

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

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,493
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
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/