Sketchの基本操作である「シェイプの作成方法」と「シェイプの編集方法(不透明度、塗り、線、影、ぼかし)」についてご紹介します。「効率の良い作成方法」や「どういった編集ができるのか」といった点を理解しましょう!
シェイプの作成
丸や四角形など追加できます。R
などショートカットを活用すると作業効率が高まります。
また、シェイプによって、インスペクタで設定できる内容が異なります。
正方形、正円を作るには?
shift
を押しながら作成すると、正方形、正円を描画できます。
中心を起点に描画するには?
デフォルトでは左上を起点に描画されます。
option
を押しながら作成すると中心起点に描画されます。
作成途中で位置を移動するには?
作成途中で space
を押すとshapeの位置移動ができます。
ツールを利用したシェイプ操作
回転
Rotateツール
を利用してシェイプを回転させることができます。shift
を押した状態だと15度ずつ
回転します。
変形
Transformツール
を利用してシェイプを変形させることができます。⌘
を押した状態だと一方向にのみ変形します。
回転コピー
Rotate Copiesツール
を利用して回転しながらコピーを作成することができます。太陽、花など作るときに活用できますね。
シェイプのスタイル編集
不透明度
選択した状態で数値を入力すると不透明度が変更されます。
例えば、8
と入力すると80%
になります
8
, 4
と続けて入力すると84%
になります。
塗りつぶし
塗りつぶしオプション
塗りつぶしオプションとして「ベタ塗り」「線状グラデーション」「放射状グラデーション」「円錐状グラデーション」「画像表示」「ノイズ表示」があります。
塗りを複数追加することができます。不要になった「塗り」はwindowの外にドラッグ&ドロップすると削除できます。
塗りつぶしに画像を利用した例です。レイヤ幅に合わせて画像のサイズも調整してくれるので便利です。
線
「線の色」「線の位置」「線の太さ」「オープンパスの線端の形状」「角の形状」を設定できます。
外側に影をつける
「色」「X座標」「Y座標」「ぼかし」「影の拡がるサイズ」を設定できます。
内側に影をつける
「色」「X座標」「Y座標」「ぼかし」「影の拡がるサイズ」を設定できます。
ぼかし
「全方向のぼかし(Gaussian Blur)」「角度を指定したぼかし(Motion Blur)」「放射状のぼかし(Zoom Blur)」を設定できます。
Background Blur
は、写真などの背景の一部分だけをすりガラスのようにぼかしたいときに活用できます。前面にあるshapeに「Background Blur」と「opacityを設定したfill」を適用することで実現できます。