Sketchでアイコンを描く1 - アウトライン化と図形のUnion（結合）

Q: Sketchで頑張ってアイコンを描いたのですが、拡大縮小するとへんてこりんになります。Sketchだけでどうにかしたいのですが、使い方が難しくてわかりません。

A:
ベクター図形を描けるSketchですが、描いた図形を拡大縮小しても、線の太さやradiusの値が維持されるので、アイコンを作成する場合には、アウトライン化と図形統合をする必要があります。
拡大縮小しても全体の比率が変わらないアイコンを作りましょう。



外側の円を描きます。

exclamation mark  （びっくりマーク）の点は正円で描けば問題ありませんが、長い棒の方は、Shape > Rectangleで四角形を描いてRadiusで角丸の指定をしたくなりますが諦めてください。

スライダーを振り切って値を「100」にすればいいと思いきや、この棒の幅が200pxを越えると角丸四角になります。（アプリでそんな大きさにして使うことは無いとは思いますが念のため）

Rounded（角丸四角）で描いてください。
もしくはVectorツールか、ShapeツールのLineで描いてLayer > Convert to Outlinesで。

これで描いた線は両端が直角です。

線の両端を丸くするには、Borders欄の設定（歯車アイコン）をクリックします。

線の両端の処理を選べます。

外枠の丸と、びっくりマークの長い棒をアウトライン化します。
外枠の丸レイヤー、長い棒のレイヤーを選択し、
Layer > Conver to Outlines  を実行します。

アウトライン化されました。

次に外枠の円、びっくりマークの棒、点、を結合します。

真っ黒になるんですけど焦らない。

結合した図形の左横にある三角形のアイコンをクリックして開きます。

Oval 2とPath 2が「Union」になっていますが、「None」に変更してみてください。

はい、これで縮小拡大してもへんてこりんなアイコンになってしまうことはありません。

グループ化じゃなくて結合しよう

アイコンの図形を統合しないでグループ化された状態のSketchファイルを引き継ぐことがあるのですが、それだと色を変更したいときなど何かと不便です。
図形を結合しておくことをオススメします。

※ここでは"Union"を結合と書きました。この後説明する"Flatten"を統合として区別して書いていきます。
他に適切な日本語がありましたらお手数ですがお知らせください。多くの人が理解しやすくなるように修正します。