始めてのSketch3 チュートリアル

Sketch3はMac向けのベクターベースイラストツールです。
スマートフォン向けアプリデザインやWebデザイン向けに特化していて、低価格ながら高性能高品質なアプリです。
詳細なレビューについてはSketch2はFireworksを置き換えるかもしれないを見てみて下さい。
Sketch3になったことで多機能になった反面、UIが多少複雑化してとっつきづらくなった感があります。
そこでSketch3を触ってみるために実践を通じて絵を描いてみましょう。



Sketch3で実際にイラストを描いてみましょう。

Sketch3をダウンロードする。

Sketch3は公式サイトで体験版が、AppStoreで製品版が配布されています。

ユーザーインターフェイスの紹介

Sketch3は大きく分けて4つの領域に分かれます

?ツールバー
上部には固定のツールバーが表示されています。
左から新しいオブジェクトの追加、グループ化、グループ解除、シンボルの作成、ズーム、オブジェクトの編集、変形、回転、一体化、マスク、サイズ変更、パスの結合、パスの切り抜き、差分だけ抽出、差分だけ切り抜き、前面へ、背面へ、iOSへのミラー表示、表示、エキスポートの順
?レイヤーリスト
左側にはレイヤーリストが表示されます。レイヤーリストには配置したオブジェクトの一覧が表示され、オブジェクトを選択したりロックしたり非表示にしたりが可能です。置いたオブジェクトを選択するのに使います。Sketchではオブジェクトが重なるとなかなか任意のオブジェクトを選びづらくなるのでこのレイヤーリストで選ぶことになります。
?インスペクター
インスペクターは現在選んでいるオブジェクトに応じて可能な操作やプロパティが表示されます。
インスペクターの内容は現在の状態により大きく変わります。
?キャンバス
中央にあるのがキャンバスです。実際にここで絵を書きます。

描いてみる

それでは、実際にドロイド君を描いてみてSketch3の使い方に慣れてみましょう。

顔を作る

まずは頭部を作ります。
円形を配置しましょう。
左上のInsertからShapeのOvalを選びます。


右側にあるLとかRとかの文字はショートカットです。
例えば円形ならわざわざInsertからShapeを選ばなくてもキーボードの「O」を押すだけでいきなり円形を描くことが出来ます。
Shiftキーを押しながらドラッグすると正円が描けます。


半円の下半分を削除するために、下半分を上書きするように矩形を描きます。
InsertからShapeのRectangle（ショートカットR）を押して

下半分が隠れるように矩形を重ねます

円と矩形をどちらも選んだ状態でSubtractを選びます。

半円が出来ました。


しかし、この半円を選択すると、実際に表示されている半円より大きな領域が選択されてしまいます。
これはSketch3の仕様で差分などを選んでもパスそのものが変更されるのではなく、あくまで元のオブジェクト（円と矩形）が記憶された状態で動的に計算されているためです。
実際にレイヤーリストを見るとこのオブジェクトが円と矩形2つのオブジェクトからできていることがわかります。

このおかげで一度差分などを作り出したあとで、元の形状を修正することが出来ます。

しかし、今回の場合、元のオブジェクトをイジる必要はなさそうなので完全に1つのオブジェクトにしてしまいましょう。
オブジェクトを選びFlattenを選択してください。

2つのオブジェクトが統合され1つの半円となります。

次にアンテナを作っていきます。
InsertからRounded（ショートカットU）を選びます。

アンテナとなるよう細く作ります。

アンテナを傾けます。アンテナを選んでRotateを選び

適当に傾けます。

逆側のアンテナも作ります。

アンテナを選んでメニューバー−Edit-Dupulicate（ショートカット Command+D）を選びます。

アンテナが複製されます。
新しくできたオブジェクトは重なって表示されるので、一見するとキャンバス上では変化がないように見えますが、Layer Listを見ると新しいレイヤーが追加されたことがわかります。

どちらか片方を選んでいる状態でインスペクターから垂直反転を選択する。
アンテナの片方が左右反転して配置されます。

適当にアンテナの位置を調整します。

アンテナを顔のオブジェクトと一体化します。
全てのオブジェクトを選んで

Unionを選びます。

アンテナと頭部がつながりました。

1つのオブジェクトに見えますが、レイヤーリストを見ると3つのオブジェクトが存在していることがわかります。

半円を作った時と同じようにFlattenで1つにまとめてもいいのですが、アンテナは今後位置を変更したりすることがあるので、まとめずに別のオブジェクトとして管理しておきます。

体を作る

次に体を作ります。
InsertでShape-Rectangle(ショートカットR)を選びます。
頭部の下に配置します。


ドロイド君の下部はわずかに丸みを帯びているのでそれを再現します。
今配置したRectangleを選択した状態でEditをクリックします。（Rectangleをダブルクリックでもパス編集モードに移行できます）

Shiftキーを押して下の2つのポインターを選択します。選択されたポインターはほかより太めに表示されます。

インスペクターよりRadiusの値を増やして丸みを付けます。

Radiusはポインターを選択中は選択されたポインターだけ、ポインターを選択していない時は全てのポインターの丸みを設定します。

足を作る

Insert−Shape−Rounded(U)を選択します。
Radiusの値を調整して丸みを付けます。


逆側の足も作ります
足を選んでメニューバー−Edit-Dupulicate（ショートカット Command+D）を選び、

複製した足の位置を調整します。

体と足を選んでUnionで結合します。

足は後から移動させたりすることが考えられるのでFlattenしないでおきます。

手を作る

Insert−Shape−Rounded(U)を選択します。
Radiusの値を最大にして丸みを付けます。


手を選んでメニューバー−Edit-Dupulicate（ショートカット Command+D）を選び、

複製した手の位置を調整します。

目を作る

目は円で表現します。
Insert−Shape−Oval(O)を選択します。

Shiftキーを押しながら描くことで正円が描けます。

メニューバー−Edit-Dupulicate（ショートカット Command+D）を選び、逆側の目を作り移動します。

着色する

オブジェクトを選択すると、インスペクターにFillsとBordersという項目ができます。
頭と体と、両手を選択します。

Fillsは塗り、Bordersが線を表します。
Fillを選択すると塗りの詳細が表示されます。

Hexにa4c639と入力します。

体がグリーンになり一気にドロイド君っぽくなりました。

同様に目を白にします。両目を選択して、Fillを選択しHexにffffffと入力します

最後に全てのオブジェクトを選択してBordersのチェックを外します。

出力する

出来た画像は.sketchというファイル形式になっています。画像ファイルとして出力するにはExportを選びます。

Export Selectionが表示されます。選択したオブジェクトだけを出力するExport Selectionとキャンバス全体を出力するExport Canvas、出力を行わないCancelの3つが表示されるのでExport Canvasを選択します。

Sliceが作成され、Exportの準備が出来ました。

Sliceが選択されている状態だとインスペクターにExportの項目が表示されます。
Exportの横にある＋を押すとRetinaディスプレイやhdpi向けの画像を出力できます。

インスペクターのExport Slice1をクリックすると画像を保存できます。
保存時にBitmapsのSave for Webにチェックを入れると画像の余分なデータを削除してファイルサイズの小さな画像を出力することが出来ます。
画像を出力するとそれぞれの解像度で@1.5x.pngのようにそれぞれの画面密度に応じた画像が出力されます。
Slice 1.png(Android mdpi、iOS 非retina)

Slice1@1.5x.png(Android hdpi)

Slice1@2x.png(Android xhdpi、iOS retina)

Slice1@3x.png(Android xxhdpi)

ブラッシュアップする

グラデーションを使う

より立体的な印象を付けるにはグラデーションを使用します。
頭部に円形グラデーションを、体に線形グラデーションを、腕には複合的なグラデーションを追加してみましょう。
まず、頭部を選択し、Fillを選択します。
右から3番目の Radial Gradientを選択します。

左側を選びHexにCFFF00右側を選びA4C630をセットします。

グラデーションの設定値を保存しておきたいので下にある＋を押します。
これで現在の配色が保存されます。

キャンバスでグラデーションの掛かる位置を調整します。
今回はちょっと右上から光が当たっているように見えるよう表現してみました。

線形グラデーションを使う

次に両腕と胴体もグラデーションをつけます。両腕と胴体を選び、Fillをクリックします。
先ほど保存した一番下の配色を選択します。
先ほどの円形グラデーションと配色が呼びだされます。
今度は線形グラデーションを使うので左から2番めのLinear Gradientを選びます。

グラデーションの向きを整えましょう

複雑なグラデーションを使う

両腕は上部が丸くなっているのを表現するために円形グラデーションも足してみましょう。
両腕を選択したらインスペクターのFillsの横にある＋をクリックします。
Fillsに新しい塗りが追加されます。

塗りは下から順番に塗られていきます。
現在は塗りが不透明なので一番上の塗りが下の塗りをうわがいてしまっています。
そこで一番上の塗りに透明な領域を作りましょう。
透明な領域はAの値を減らすことで設定可能です。
一番左と右側はAの値を100に、一番右側だけAの値を0にします。
これによりグラデーションの枠の外を透明にして下のグラデーション（線形グラデーション）を描画できるようになります。

グラデーションの位置を調整して、ちょうど腕の上側が丸く見えるようにします。

余裕があれば塗りを追加して下側も表現してみましょう

レイヤーを分解して塗る

先ほど胴体と足はUnionで結合してしまいましたが、別の塗りを設定するために別のレイヤーとします。
胴体のレイヤーをレイヤーリストから選択し、足の部分をレイヤーから外に出します


この時、胴体より足が前にきてしまった場合は、足より前に胴体がくるように胴体を選択してFowardを選択します。

腕と同様に足にも複数のグラデーションを付けてみましょう。

ボーダーを塗る

目の周りを凹ませてみましょう。
Bordersを使って目のエッジを表現してみましょう。
Bordersにチェックを入れ、Thicknesに値をセットしColorをクリックします。
Angular Gradientを設定しD2FF00と5A6F17をHexにそれぞれセットします

グラデーションの向きを調整し、下側が明るく、上側が暗くなるようにします

目は塗りもグラデーションを入れてみるのも良いかもしれません

影をつける

最後に仕上げとしてドロイド君に影をつけてみましょう。
頭、体、両腕、両足を選択し、インスペクターのShadowsで＋を選択すると影を付けることが出来ます。

再度出力する

最後にエキスポートで出力してみましょう。
影が付いた分だけ画像が大きくなっているのでSlice 1のサイズも大きくするのを忘れずに。


いかがでしたでしょうか？
色の選び方やサイズの配置方法などには慣れも必要で最初は難しかったかもしれませんが、ドロー系ツールなので後からいくらでも調整が可能です。
最初は時間を掛けてゆっくり煮詰めて勘所を掴む事が大事です。
何度でもやり直しが効くドロー系ツールだからこそ、自分が納得行くところまで落とし込めるし、イラストに慣れない人でもデザインを作っていくことが出来ます。
ぜひ次はオリジナルの作品を作ってみてください。