Sketchでアイコンを描く4 - ベクターの点を移動するとX,Yの値が小数点になってしまう

Q: アプリ内アイコンを作成する際、ベクターの点を動かすとX,Y の値が小数点になってしまってめんどくさいね。なんとかならないの?

A:
1pxごと/0.5pxごとに点を動かせる設定欄がSketchにあります。
この機能、一見してなんだかわからず使っていない人が多いようです。

ここで描いたような複雑な図案のアイコンの微調整に使うと大変便利です。



Round: None(Don't round to nearest pixels) を選択している状態でベクターの点を動かすと自由に移動させることができますデフォルトだとこの状態です

好きな位置へ移動できる自由度があるものの、X, Yの値が小数点第2位まである扱いにくい数値になるというデメリットもあります。
メガホンの両端を等しく広げたい/狭めたい、というような場合にそれだとかえって不便です。




Round: Half Pixels : ベクターの点を0.5pxづつ移動させます
Round: Full Pixels : ベクターの点を1pxづつの移動させます

0.5px / 1pxごとにぴたっぴたっと吸着するので扱いやすくなります
(キーボードの矢印キーではなく、マウスでベクターの点をドラッグして移動。)

図のように両端を等しく広げたい/狭めたい というような場合は、Round: Half PixelsかRound: Full Pixelsに変更してからベクターの点を移動すると作業しやすくなります!





ところで、「このボタンなに?押してもなにも起こらないけど」と聞かれたことがありました。
これだけじゃ何ができるのかわからないですよね。。
機能をアイコンで表現することの限界を見せつけられる瞬間ですね。



このボタンは、ベクターの点を複数選択したいときに押してください。
アウトライン化したあとで「メガホンの柄をもう少し伸ばしたい」なんていうときに使うと楽です。
マウスでドラッグして選択範囲を描くと、その範囲内のポイントがいっぺんに選択できます。



Sketch WebサイトのPixel Precisionにはさらに詳しく記載されていますので、しっかり習得したい方は是非そちらを読んでみてください。

余談: アイコンの世界を深堀りしたい方におすすめの書籍

私が一番好きなのは左の SIGN, ICON and PICTOGRAM です
質の高い事例が多く掲載されているばかりか、歴史、記号学、制作方法など読み応えある充実の内容です。



コメント