Sketch 3基礎のメモ

今までデザインツールは、Adobe製品しか使わないできましたが、噂のSketchを試してみたいと思います。

<a href="http://bohemiancoding.com/sketch/" target="_blank">Sketch 3</a>はオランダ　アムステルダムにあるBohemian Coding社が開発するベクタードローイングツールです。

##特徴
* Mac OS専用
* 99ドルとAdobe製品に比べて安い
* UIがシンプルなので、学習コストが低い
* フリーのテンプレート、プラグインが豊富
* 動作がillustratorに比べて軽い
* 自動保存機能がある
* 複雑なデザインには向かない(特に画像編集）


##簡単なインターフェースの説明
![１.jpg](https://qiita-image-store.s3.amazonaws.com/0/11290/bb306fc8-55c8-4df0-28e0-535c38bf088a.jpeg)



####◎オブジェクト一覧
ページ・アートボード内のオブジェクトが表示されます。
illustratorでだと、レイヤーに当たるものだと思います。

オブジェクトのグルーピングや、上下の階層の入れ替え、レイヤーロックなどもこちらでできます。

![スクリーンショット 2015-09-08 18.27.51.png](https://qiita-image-store.s3.amazonaws.com/0/11290/47a7e356-d522-038e-83eb-30f26a4f4e86.png)

また、左下のFilterを使うことで、レイヤーの絞込ができます。
![スクリーンショット 2015-09-08 18.29.24.png](https://qiita-image-store.s3.amazonaws.com/0/11290/404a9198-5fa7-751e-863d-46052c2a4eb0.png)

####◎ページ
キャンバス領域です。オブジェクトを配置、編集できます。
illustratorと違うところは、ページも複製できます。複数人で作業して後から結合するには便利かもしれません。

![スクリーンショット 2015-09-08 18.37.37.png](https://qiita-image-store.s3.amazonaws.com/0/11290/b502eeac-6906-04a6-8115-55782885ea3e.png)

####◎アートボード
最終出力用のデザインはアートボード内に作成していきます。これはillustratorでも同じでした。
sketchのアートボードは対象のデバイスを選択して作成することができます。

![スクリーンショット 2015-09-08 18.55.27.png](https://qiita-image-store.s3.amazonaws.com/0/11290/a2d89526-e004-6004-1a98-97145e8146a4.png)

デバイスを選択してアートボードを作成すると、ページにアートボードが追加されます。
![スクリーンショット 2015-09-08 18.57.41.png](https://qiita-image-store.s3.amazonaws.com/0/11290/c11d88d9-7076-58b2-30e3-aa7834454d61.png)

####◎インスペクターメニュー
オブジェクトの設定や、アートボードの設定を変更できます。

![スクリーンショット 2015-09-08 19.07.24.png](https://qiita-image-store.s3.amazonaws.com/0/11290/e4518be9-859b-fda2-12e2-117f5beb2572.png)

##ガイドを作成する
アートボード単位でガイドを作成することができます。

画面右上の「View」ボタンから作成できます。
Layout Setting・・・ガイドの詳細設定
Grid Setting・・・グリッドの詳細設定

![スクリーンショット 2015-09-08 19.13.38.png](https://qiita-image-store.s3.amazonaws.com/0/11290/d648af9f-a65c-108a-5e71-0ee8715ed21e.png)

##書き出し方法
####スライスする
オブジェクトを選択して、画面右下の「Make Exportable」をクリックします。
![スクリーンショット 2015-09-08 19.27.12.png](https://qiita-image-store.s3.amazonaws.com/0/11290/4b73738e-7c68-a2d2-7b76-b960f502b1e7.png)

「Make Exportable」をクリックすると、「Export」パネルが表示されるので、パネル右上のナイフアイコンをクリックします。
![スクリーンショット 2015-09-08 19.31.24.png](https://qiita-image-store.s3.amazonaws.com/0/11290/f5e3a8a9-9b88-7ec2-c161-f88a0fd5da43.png)

ナイフアイコンをクリックすると、オブジェクト一覧にスライスのオブジェクトが表示されます。

![スクリーンショット 2015-09-08 19.31.42.png](https://qiita-image-store.s3.amazonaws.com/0/11290/2905f768-50d1-446e-6af4-47e8c9f7b1fd.png)

後から気付いたのですが、ナイフアイコンをクリックしなくても、スライスの書き出しはできます。
「Make Exportable」をクリックした時点で、オブジェクト一覧を見るとスライスアイコンが表示されていました。
また、「Export」パネル内の「×」ボタンをクリックすれば、スライスを解除することができます。

オブジェクトに対してピッタリのサイズで画像を書きだす場合は、
こちらのほうが不要なオブジェクトが作成されずいいかもしれません。

![スクリーンショット 2015-09-09 16.34.17.png](https://qiita-image-store.s3.amazonaws.com/0/11290/1fd29749-1e55-8afc-35ef-54cd3fd4ec9c.png)


####複数サイズでスライスする
Sketchのすごいところは、Retinaなど高解像度ディスプレイ用の書き出しが簡単なところです。
今までは、オブジェクトを２倍のサイズで作成し書き出していましたが、
Sketchは書き出し設定で複数の画像サイズを設定できます。

Exportをクリックすると、書き出しサイズが追加されます。
Sizeが「2x」の場合は、2倍のサイズで書きだしてくれます。

![スクリーンショット 2015-09-08 19.36.08.png](https://qiita-image-store.s3.amazonaws.com/0/11290/a82ec183-3762-12cf-329f-aefcec7ac98d.png)

####スライスしたオブジェクトを書き出す
スライスした書き出したいオブジェクトを選択して、「Export」パネル内の「Exprot Layers」をクリックします。

![スクリーンショット 2015-09-09 16.59.51.png](https://qiita-image-store.s3.amazonaws.com/0/11290/f10b455e-ea3f-a036-55a4-75539ab28e4b.png)


####PNGの背景を透過でスライスする。
こちらも地味に便利な機能です。

オブジェクトの背景を透過で書き出したい場合、illustratorなどでは下記のように背景に色が引いてあると、
一旦背景色オブジェクトを非表示にしてから書き出す必要がありました。

Sketchでは、PNGで書き出す際はデフォルトで透過にしてくれます。

![スクリーンショット 2015-09-09 16.45.37.png](https://qiita-image-store.s3.amazonaws.com/0/11290/4d5b89ac-5116-0245-2af4-5b66d5bb085f.png)

逆に透過にしたくない場合は、スライスオブジェクトを作成して、「Background Color」のチェックをオンにします。
※アートボードの背景色が指定してある場合、「Background Color」で背景色を指定しても、
 アートボードの背景色が優先されるようです。

![スクリーンショット 2015-09-09 16.53.52.png](https://qiita-image-store.s3.amazonaws.com/0/11290/e49629d2-443e-0489-3311-ce9765b6d46d.png)

##オブジェクトのスタイルをCSSにする
作成したオブジェクトのスタイルをCSSでコピーできます。

やり方は簡単です。
オブジェクトを選択し、コンテキストメニューから「Copy CSS Attributes」を選ぶだけです。
![スクリーンショット 2015-09-11 17.44.42.png](https://qiita-image-store.s3.amazonaws.com/0/11290/e6ddec6d-56a5-bc5c-88fb-c96932522009.png)

下記のようなCSSがコピーされます。

```lang:css
background: #F5A623;
border: 1px solid #979797;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
```

##共有スタイルを作成する
Sketchでは、複数のオブジェクトに、共通のスタイルを簡単に適応することができます。

スタイルコピー元のオブジェクトを選択し、インスペクターメニューから、「Create New Style」を選択します。

![スクリーンショット 2015-09-11 18.18.13.png](https://qiita-image-store.s3.amazonaws.com/0/11290/4e3e03ef-d527-032b-1dbe-c964d50c2737.png)

スタイルの名前を設定します。
![スクリーンショット 2015-09-11 18.28.01.png](https://qiita-image-store.s3.amazonaws.com/0/11290/96b6a7d7-730f-336f-b2ce-e092d60395b0.png)

共有スタイルが作成されました。
![スクリーンショット 2015-09-11 18.30.46.png](https://qiita-image-store.s3.amazonaws.com/0/11290/2255b234-64e3-dea4-b5aa-be1d3967464d.png)

後は、適応したオブジェクト選択して作成した共有スタイルを選択するだけです。

![スクリーンショット 2015-09-11 18.32.55.png](https://qiita-image-store.s3.amazonaws.com/0/11290/1218afe8-4e5b-6cf3-c3dd-eb14f5e367ef.png)

共有スタイルを適応したオブジェクトは、スタイルを変更すると、
全てのオブジェクトのスタイルが変更されます。

![スクリーンショット 2015-09-11 18.35.09.png](https://qiita-image-store.s3.amazonaws.com/0/11290/39752cc0-73a2-a551-db48-119e70c0e51c.png)

##パスの操作
illustratorのパファインダーのような機能も勿論あります。

操作したいオブジェクトを選択して、ツールバーの「Union、Subtract、Intersect、Difference」のいずれかを選択します。

![スクリーンショット 2015-09-11 18.40.24.png](https://qiita-image-store.s3.amazonaws.com/0/11290/2345cf96-d4b0-f1ab-41e7-5dbdb1b2be32.png)

Union（結合）してみます。

![スクリーンショット 2015-09-11 18.44.21.png](https://qiita-image-store.s3.amazonaws.com/0/11290/248b0156-dfcf-c61f-5099-0213ad214932.png)

オブジェクト一覧に、結合されたオブジェクトレイヤーが作成されました。
結合も、それぞれのオブジェクトを編集することは可能です。


##シンボル
Sketchではシンボルが使用できます。

作り方は簡単です。
シンボル化したいオブジェクトを選択して、ツールバーにある「Create Symbol」をクリックします。
![スクリーンショット 2015-09-09 18.48.20.png](https://qiita-image-store.s3.amazonaws.com/0/11290/38071e3e-e88c-2c82-5040-9c0b3b0d8dbb.png)

オブジェクト一覧にシンボルが作成されます。
![スクリーンショット 2015-09-09 18.50.38.png](https://qiita-image-store.s3.amazonaws.com/0/11290/7f831931-fe42-229d-c87b-a02b9accdaf6.png)

シンボルを解除したい場合は、ツールバーの「Ungroup」を選択してグループ解除すればいいようです。

##UIテンプレート
Sketchにはデフォルトで、よくつかうUIテンプレートが用意されています。
こちらを、コピペして簡単にUIデザインを作っていくことができます。

![スクリーンショット 2015-09-09 19.09.26.png](https://qiita-image-store.s3.amazonaws.com/0/11290/ae15a013-bd39-d3b8-c519-303d107e8429.png)

##プラグイン
Sketchには沢山の便利プラグインがあります。

プラグインのインストール方法は２つあります。
####①ダウンロードして手動でインストール
gitHubから下記のプラグインをダウンロードしてインストールしてみます。
<a href="https://github.com/timuric/Content-generator-sketch-plugin" target="_blank">Content-generator-sketch-plugin</a>・・・サンプルデータとかサンプルアイコン画像が簡単に使えるプラグイン

1.プラグインをダウンロード
2.Sketchのツールバーから、「Plugins」を選択し、「Reveal Plugins Folder」を選択する。
![スクリーンショット 2015-09-09 19.28.27.png](https://qiita-image-store.s3.amazonaws.com/0/11290/09cec67a-c26e-43d4-d13c-2a3c3a231236.png)

選択すると、Pluginsフォルダが開きます。
![スクリーンショット 2015-09-09 19.31.31.png](https://qiita-image-store.s3.amazonaws.com/0/11290/0a6703f2-4857-af7e-83c8-1711a27a4238.png)

3.Pluginsフォルダにダウンロードしたプラグインを入れます。
![スクリーンショット 2015-09-09 19.32.53.png](https://qiita-image-store.s3.amazonaws.com/0/11290/a244060e-eee1-a4b9-38d2-861911426c7a.png)

4.プラグインが追加されました
![スクリーンショット 2015-09-09 19.39.05.png](https://qiita-image-store.s3.amazonaws.com/0/11290/c32acd69-e649-5ee5-cd90-b873cf6e05e9.png)

####②The Sketch Toolboxを使用してインストール
![FireShot Capture 62 - ASCII.jp：UI制作が捗るSketch 3の便利なプラグイン_ - http___ascii.jp_elem_000_001_045_1045228_.png](https://qiita-image-store.s3.amazonaws.com/0/11290/67fae7df-411c-b75f-03c4-2693b71f3764.png)

<a href="http://sketchtoolbox.com/" target="_blank">The Sketch Toolbox</a>は、Sketchのプラグインのインストールやアンインストールをする為のアプリケーションです。

1.まず、Downloadボタンからアプリをインストールします。

2.アプリを起動して、インストールしたいプラグインのinstallボタンをクリックします。

![スクリーンショット 2015-09-10 18.44.29.png](https://qiita-image-store.s3.amazonaws.com/0/11290/58020b3b-ac57-dcbc-3830-bd79e9e635ab.png)

とても簡単です。

アンインストールも同様の手順で行えます。

##ツールのカスタマイズ
ツールバーを右クリックして、コンテキストメニューから「Customize Toolbar」を選択します。

![スクリーンショット 2015-09-11 18.47.20.png](https://qiita-image-store.s3.amazonaws.com/0/11290/1c249e8d-8ae4-c3dc-d144-918f43fd943f.png)

機能一覧が表示されるので、ドラック&ドロップで追加します。

![スクリーンショット 2015-09-11 18.53.42.png](https://qiita-image-store.s3.amazonaws.com/0/11290/f9b2748b-9c38-3db8-b4d5-4e516f34a9c2.png)


##実機でプレビュー
Sketchでは実機でのプレビューが簡単にできるようです。

ただし、<a href="http://www.bohemiancoding.com/sketch/features/#mirror" target="_blank">Sketch Mirror</a>という別アプリが必要です。
![nav-mirror-large.png](https://qiita-image-store.s3.amazonaws.com/0/11290/50719cc1-2141-e4d9-babb-9d2d1342bac5.png)

アプリの使用方法は下記を参考にしてみてください。
<a href="http://whiskers.nukos.kitchen/2015/03/24/sketch-mirror.html" target="_blank">iOSデバイスでデザインをチェックできるSketch MirrorやSkala Previewとか</a>