シェイプの作成とスタイル編集

Sketchの基本操作である「シェイプの作成方法」と「シェイプの編集方法(不透明度、塗り、線、影、ぼかし)」についてご紹介します。「効率の良い作成方法」や「どういった編集ができるのか」といった点を理解しましょう!

シェイプの作成

sketch_shape_operation_create.png

丸や四角形など追加できます。Rなどショートカットを活用すると作業効率が高まります。

また、シェイプによって、インスペクタで設定できる内容が異なります。

正方形、正円を作るには?

sketch_shape_operation_create_shift.gif

shift を押しながら作成すると、正方形、正円を描画できます。

中心を起点に描画するには?

デフォルトでは左上を起点に描画されます。
option を押しながら作成すると中心起点に描画されます。

作成途中で位置を移動するには?

sketch_shape_operation_create_space.gif

作成途中で space を押すとshapeの位置移動ができます。

ツールを利用したシェイプ操作

回転

sketch_shape_operation_create_rotate.gif

Rotateツールを利用してシェイプを回転させることができます。shiftを押した状態だと15度ずつ回転します。

変形

sketch_shape_operation_create_trans.gif

Transformツールを利用してシェイプを変形させることができます。を押した状態だと一方向にのみ変形します。

回転コピー

sketch_shape_operation_rotate_cp.gif

Rotate Copiesツールを利用して回転しながらコピーを作成することができます。太陽、花など作るときに活用できますね。

シェイプのスタイル編集

不透明度

sketch_shape_operation_opacity.gif

選択した状態で数値を入力すると不透明度が変更されます。
例えば、8と入力すると80%になります
8, 4と続けて入力すると84%になります。

塗りつぶし

塗りつぶしオプション

sketch_shape_operation_fill1.gif

塗りつぶしオプションとして「ベタ塗り」「線状グラデーション」「放射状グラデーション」「円錐状グラデーション」「画像表示」「ノイズ表示」があります。

sketch_shape_operation_fill2.gif

塗りを複数追加することができます。不要になった「塗り」はwindowの外にドラッグ&ドロップすると削除できます。

sketch_shape_operation_fill3.gif

塗りつぶしに画像を利用した例です。レイヤ幅に合わせて画像のサイズも調整してくれるので便利です。

sketch_shape_operation_borders.gif

「線の色」「線の位置」「線の太さ」「オープンパスの線端の形状」「角の形状」を設定できます。

外側に影をつける

sketch_shape_operation_shadow.gif

「色」「X座標」「Y座標」「ぼかし」「影の拡がるサイズ」を設定できます。

内側に影をつける

sketch_shape_operation_shadow_in.gif

「色」「X座標」「Y座標」「ぼかし」「影の拡がるサイズ」を設定できます。

ぼかし

sketch_shape_operation_blurs.gif

「全方向のぼかし(Gaussian Blur)」「角度を指定したぼかし(Motion Blur)」「放射状のぼかし(Zoom Blur)」を設定できます。

sketch_shape_operation_blurs2.gif

Background Blurは、写真などの背景の一部分だけをすりガラスのようにぼかしたいときに活用できます。前面にあるshapeに「Background Blur」と「opacityを設定したfill」を適用することで実現できます。