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

1. what’s
Sketch.app
@littlebusters
Ps / Ai / Fw / Sketch ガチンコバトル
in 大都会岡山
2013.6.22

2. 自己紹介
@littlebusters
2
Design
Fireworks 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 CC
17
.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 CC
18
.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 CS6
19
background-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,endCo
lorstr=#ffffffff,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endCol
orstr=#ffffffff,GradientType=0);
※コメントオフ

20. Sketch.app
20
/* 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. 22
1つのオブジェクトに
複数のプロパティを設定できる

23. プロパティのリンク
23

24. インスペクタはここで表示
リンクインスペクタ

25. 25
オブジェクトの色を変更すると、
リンクされているものも変わる

26. フォントはこちら

27. スライスと書き出し
27
@2xサポート・SVG・D&D

28. 28
書き出すオブジェクトの選択
背景を無視して書き出しなどが可能に
解像度の選択
適当に作ったスライスでも
不要な透明部分のピクセルを
切り取りしてくれる

29. 29
サポートされている
書き出し形式
小さいプレビューを
Drag & Drop で書き出し

30. 自動保存
30

31. 31
or

32. ツール類
32
グリッド・整列（Grid Tool）・回転コピー（笑）

33. Square Grid

34. 34
Layout Grid

35. Grid Tool 使用前
35

36. Grid Tool 使用後
36

37. 回転コピー
37

38. 回転コピー編集中
ここを動かして程よい形に

39. 回転コピー確定後
オブジェクトが
ブーリアン演算されている

40. スクリプトによる拡張
40

41. 41
http://creative-tweet.net/blog/
2013/06/extending-sketchapp.html

42. 日本語にならないの？
42

43. なりません
43
http://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
@littlebusters
http://creative-tweet.net/