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

Sketchの図形周りの基本操作|図形の作成方法から描画に関する細かい部分まで

Sketchの図形周りの基本操作|図形の作成方法から細かい設定項目まで

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

図形描画系のツール

図形描画系のツールは下記の4つになります。

図形の選択

ツール名キー内容

長方形ツール

(Rectangle)

R長方形の作成ができる
楕円ツール
(Oval)
O楕円の作成ができる

角丸長方形ツール

(Rounded)

U

角丸長方形の作成ができる

三角形ツール

(Triangle)

 三角形の作成ができる

スターツール

(Star)

 星形の作成ができる
多角形ツール
(Polygon)
 多角形の作成ができる

直線ツールと矢印ツールは、ツールバーの同じカテゴリ内に入れられていますが、性質が「Vector」や「Pencil」に近いので今回は省きます。

図形描画の基本

まずは長方形ツールに切り替えましょう。
切り替えた状態でフレーム上をドラッグアンドドロップすると、長方形が作られて、マウスを離したタイミングで選択ツールに自動で切り替わります。

長方形の描画

shiftを押しながらドラッグアンドドロップすると、縦横の比率が変わらないまま図形を描画できて、正方形が作れます。

optionを押しながらドラッグアンドドロップすると、ドラッグ開始位置を中心として図形を描画できます(shiftoptionの併用で、ドラッグ開始位置を中心にして正方形描画も可能です)。

他にも図形描画途中でマウスを外さずにspaceを押すと、押している間は描画中の図形を移動できます。

図形編集の基本

選択ツールで図形の縦・横・斜めの端をドラッグすると、それぞれの方向に図形のサイズを変更できます。
このときもshiftを押しながらで比率を変えずに変形、optionを押しながらで中央を中心に変形できます。

また、斜め端の図形の内側にある白丸をドラッグすると角丸にできます。

角丸の設定

ちなみにこのときcommandを押しながらで、選択した角だけを変更できます。

図形ごとの特徴

基本的な動きはほとんど一緒ですが、図形ごとの特徴をまとめておきます。

長方形と楕円と角丸長方形

長方形の場合は、四隅にある白丸をドラッグして角丸にできます。
正方形を作成して角丸にすると見た目上は円形にもなります。

楕円の場合は白丸は表示されず、Figmaのように円の開始位置や終了位置の選択もできません。

角丸長方形に関しては、長方形の最初から角丸が付いているパターンなだけで、長方形とあまり変わりありません。
そのため、基本的に長方形ツールばかり使うことになります。

三角形ツール

他のデザインアプリケーションでは多角形ツールの角数を3つにすることで三角形を作成することが多いですが、Sketchの場合は三角形ツールとして独立しています。

三角形の描画

機能としては三角形が作れるだけで、どの方向からドラッグしても、同じ向きの上真ん中に頂点が来る三角形が描画されます。

スターツール

ドラッグすると星形の描画ができます。

星形の描画

右上の「Center distance」で真ん中の点の位置を指定して、「Points」で頂点の数を指定できます。

星形の設定を変更

多角形

ドラッグして多角形(デフォルトは五角形)の描画ができます。

多角形の描画

右上の「Points」で頂点の数を指定できます。
指定できる数は「3」以上で、三角形や四角形(長方形)も一応つくれます。

多角形の設定を変更

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

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

Twitterをフォロー Facebookでいいね