Sketch.appのインスペクタを解説するよ。【スタイル編】 – Sketch.app Advent Calendar 2013

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

Sketch.appのインスペクタシリーズ第2弾、スタイリングについてお届けします。

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

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

スタイル設定について

オブジェクトに塗りや線などを設定する項目です。

インスペクタのスタイル設定

Fill

オブジェクトに塗りを設定します。+マークで塗りを追加でき、最大4つまで設定できます。Fill 1から順に重ねられ、チェックマークをオフにすると、一時的にその塗りを適用外にできます。

塗りの設定

色の部分をクリックすると、ベタ塗り・グラデーションなどの塗りのタイプを選択できます(これについては後日)。

余白をドラッグして順番を変えたり、枠外に移動させて設定を削除できたりします。

Borders

オブジェクトに線を設定します。こちらも少なくとも20以上は重ねて設定ができます。チェックマークをオフにすると、一時的にその線を適用外にできます。

線の設定

ちょっと掴みにくいですが、塗りと同じく余白をドラッグして順番を変えたり、枠外に移動させて設定を削除できたりします。

「Borders」の右にある三角マークでオプションの表示/非表示をします。

Positon
線の描画をパスのどの位置から行うかを設定します。

Size
線の太さを設定します。

Color
線の色を設定します。

Start Arrow / End Arrow
パスの両端を矢印にします。

Ends
パスの両端の描画処理を設定します。

Joins
パスが繋がっている部分の処理を設定します。

Dash / Gap
破線の設定です。

Shadows / Inner Shadows

ドロップシャドウ/インナーシャドウを設定します。こちらも少なくとも10以上は重ねて設定できます。チェックマークやドラッグでの移動・削除は塗り・線と同じです。

ドロップシャドウ・インナーシャドウの設定

一応、Photoshopと同等の設定をして並べてみましたが、ほぼ一緒ですね。

X/Y
シャドウの位置を設定します。正数で右と下、負数で左と上に移動します。

Blur
ボケ脚を設定します。

Spread
ボケ脚の開始部分を調整します。

Color
シャドウの色を設定します。

Blur

タイトルバーの右にある上下三角からぼかしの種類を選択できます。

ぼかしの設定

Gaussian Blur
いわゆる「ぼかし」です。Amountで適用量を設定します。

Motion Blur
設定した方向にぼかします。Amountで適用量を、Angleで角度を設定します。

Zoom Blur
1点に向かってぼかしを適用します。Amountで適用量を、Originで中心点を設定します。

Background Blur
オブジェクトを通して背面のオブジェクトがボケます(iOS7のロック画面から解除のためにスライドさせた感じ)。不透明度などを調整しないとボケているのが見えないかも…

Reflection

選択しているオブジェクトの下に、反射して映り込んだエフェクトを加えます。

反射の設定

Strength
反射しているオブジェクトの大きさを設定します。右に行くほど反射の度合いが大きくなります。

Distance
オブジェクトから反射しているオブジェクトの距離を設定します。右に行くほどオブジェクトが離れます。

tags