WebDesigner's Memorandumウェブデザイナーの備忘録

Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで

Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの細かい違いまで

今回はSketchのパス関連の操作についてまとめておきます。

パス描画系のツール

パス描画系のツールは下記の4つです。

ツール名キー内容
直線ツール
(Line)
L直線の作成ができる
矢印ツール
(Arrow)
 矢印の作成ができる

ベクターツール

(Vector)

Vベジェ曲線で線の作成ができる
鉛筆ツール
(Pencil)
Pフリーハンドで線の作成ができる

直線のみ作成できる「直線ツール」「矢印ツール」と、曲線にも対応した「ベクターツール」「鉛筆ツール」に大きく分かれます。

直線ツールと矢印ツールの使い方

直線ツールと矢印ツールの使い方はシンプルで、ドラッグすると直線が引けます。
ベクターツールやペンツールとは違って線を曲げることは不可能で、あくまで1本線引くことができるツールになっています。

直線ツールと矢印ツール

shiftを押しながらドラッグすると縦横や斜め45度でキレイに線が引けます。

ベクターツールの使い方

ベクターツールは「アンカーポイント」と呼ばれる点をクリックして繋げていくことで直線が描けます。
Vを押して選択モードに切り替えたり、escを押すと途中で抜けられます。

ベクターツール

クリックではなくドラッグをすると、アンカーポイントからハンドル(方向線)が出てきて、アンカーポイントを基点に曲線が描けます。

この線はベジェ曲線といって、フリーハンドではなくアンカーポイントと呼ばれる点を繋ぐことで図形を描画する方法です。
フリーハンドは描き方によっては線がガタガタになってしまいますがベジェ曲線ではキレイな線が引けます。

あとからの編集も簡単で、点を移動させたり調整することで微調整が効きやすいのが特徴です。

ちなみに、shiftを押しながらで縦横や斜め45度でアンカーポイントやハンドルが操作できます。
ハンドルに関してはoptionを押しながらドラッグすると、ハンドルの片方のみを操作できます。

開始点と終了点を繋げれば図形になります。
ちなみに、繋がっていない状態でも塗り(Fill)は有効化できますが、開始点から終了点まで真っ直ぐ線が入ったような状態になります。

ベクターツールで作成したパスに塗りを追加

鉛筆ツールの使い方

鉛筆ツールはベクターツールと違って、ドラッグでのみ利用可能なフリーハンドのツールです。
マウスを離したタイミングでガタガタになっている線は少しだけ補正してくれます。

鉛筆ツール

鉛筆ツールの場合は、shiftを押しても縦横や斜め45度でガイドされないので注意が必要です。
本当にフリーハンドのツールになります。

線のスタイル設定

[Borders]プロパティで線のスタイル設定がします。
色の設定以外に「線の太さ」と「線の位置」を指定します。

[Borders]プロパティ

右上の歯車アイコンをクリックすれば、下にさらに細かい情報が表示されます。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね