Sketch.appの基礎知識や操作・よく使うショートカットなどを紹介するよ。 – Sketch.app Advent Calendar 2013

Sketch.app Advent Calender 2013 2日目の記事です。

今回は、Sketch.appの基本操作やよく使うショートカットについてお届けします(※オレ様視点)。

Sketchの基本。というSketch(Sketch 3)の基本操作にフォーカスした電子書籍をリリースしました。詳しくはこちらの「Sketchの基本。」のページをご覧ください。

この記事はSketch 2を元にした記事です。最新版の動作とは異なる可能性が高いため、参考程度にご覧ください。

基礎知識

「矩形の描画方法が分からない」という方は、ほとんどいらっしゃらないと思うので、その辺りは省いてSketch.appを使う上でちょっとだけハマる罠のお話です。

アートボードは透明

基本は透明

アートボードが「市松模様」ではないのですが、実際には透明として扱われてます。書き出す画像の背景に白が必要な場合、背面に白いオブジェクトを置いておく必要があります。

異なるアートボード間でのコピペ

オブジェクトをコピーし異なるアートボードにペーストした場合、コピー元と同じ座標にペーストされますが、その座標が画面に表示されていない場合は、画面のセンターにペーストされます。

ちなみに、通常のコピペは、同じ座標にペーストするかオフセットするかを、環境設定で選べます。

基本操作系

Tabキーはオブジェクトの選択

オブジェクトを選択している場合、Tabキーでレイヤーリストを上から下に向かって選択できます(+Shiftキーで逆順になります)。

Enterキーは何らかの編集モードに

グループ化されているオブジェクトを選択後、Enterキーで中のオブジェクトを選択できるようになります。グループ内を抜けるにはEcsキーを押します。これがパスを選択していれば、バスの編集モードになります。

カーソルキーでの移動や数値の上下

当然ですが、カーソルキーでオブジェクトの移動や数値の変更ができます。またShiftキーを併用すると10単位になります。

commandキー+カーソルキーでオブジェクトの大きさを変更できます。こちらもShiftキーを併用すると10単位で変更できます。

Optionキーの出番も多い

Optionキーでレイヤーガイドを表示

Optionキーは意外と出番が多い感じです。複製やシェイプを中心から描画する際にも使いますが、オブジェクトを選択している状態だと、レイヤーガイド(オブジェクトのサイズや距離など)を表示してくれます。通常はアートボードとの距離になりますが、ハイライト(マウスオーバー)したオブジェクトとの距離も表示できます。

使用頻度の高いショートカット

何を作成しているかにもよりますが、以下が使用頻度が高いかなぁと。(USキーボードを使っているので、キーが違ったらゴメンナサイ)

R
Rectangleツールになります。
U
Rounded Rectangleツールになります。角丸の大きさを設定して、「Set style as default」しておけば、後々の描画が楽になります。
O
Ovalツールになります。
V
Vectorツールになります。いわゆるパスツールです。
T
Textツールになります。
CommandR
選択しているオブジェクト名を変更します。
CommandControlM
マスクを作成します。
Z / ZOption
ズームツールにします。+Optionは表示を縮小します。
Command+ / Command-
表示の拡大/縮小です。ズームツールとかぶりますが、右手がキーボードに乗っている場合はこちらを使っています。
ControlC
カラーピッカーになり、塗りを適用できます。線の設定をしている場合は、線の色を適用できます。
CommandOptionC
スタイルのコピーができます。
CommandOptionV
スタイルのペーストができます。

あとはきちんとオブジェクト名を付けておけば、CommandFで検索ができます。

割とノートでの作業を想定して、キーボードでの操作も考えられてるなぁと個人的には思っています。

tags