Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Sketch 2019.04.14

Sketchで手書き風のいびつな形の円を描いてみる

Tags: ,,,

ベクターデータを扱う時にはIllustratorやSketchを使っているのですが、比較的簡単なものを扱う場合には動作が軽く、スピーディーに作業ができるSketchをよく使っています。今回はSketchを使って、柔らかいデザインを表現したい時に使える、手書き風のいびつな円を描いてみたいと思います。

 

手書きのパスで作成しても、なかなか綺麗な形にならずどうしても不自然な感じになりますが、アンカーポイントを調整することで簡単にできてしまうので、ぜひ覚えておくといいのではないでしょうか。これくらいの図形であればIllustratorでなくてもSketchで十分作れてしまうので、それでは早速作ってみましょう!

 

まず初めに「Ovalツール」で円もしくは楕円のオブジェクトを作成します。

Sketchで手書き風でいびつな形の円の描いてみる

 

作成したオブジェクトをダブルクリック、もしくは「Editモード」に切り替えてアンカーポイントとハンドルを表示させます。この時はアンカーポイントの形状が、曲線で対称な「Mirrored」になっています。

Sketchで手書き風でいびつな形の円の描いてみる

 

全てのアンカーポイントを選択して、右側のパネルからアンカーポイントの形状を、曲線で非対称の「Asymmetric」に変更します。これで形を変える準備ができました。

Sketchで手書き風でいびつな形の円の描いてみる

 

まずは、全てのアンカーポイントのハンドルの長さをランダムでバラバラに変更していきます。仕上げたい形状を意識しながらハンドルの長さを調整していきます。

Sketchで手書き風でいびつな形の円の描いてみる

 

次に、アンカーポイントの位置を最初の場所から上下左右にずらしていきます。この時もランダムになるようバラバラの位置にしておくのがポイントです。

Sketchで手書き風でいびつな形の円の描いてみる

 

最後にハンドルの傾きを変えて形を整えていきます。あまり大きく動かすと円の形から離れてしまうので注意が必要です。

Sketchで手書き風でいびつな形の円の描いてみる

 

これで手書き風のいびつな円の形が出来上がりました。最初の形と比べてみると違いがわかりますね。

Sketchで手書き風でいびつな形の円の描いてみる

 

出来上がったオブジェクトは、異なる色をオーバーレイ状に重ねて、大きさや回転軸・位置などをずらすも良し、塗りと線画にわけて重ねるのも良し、またはアウトラインのみで何重にも合わせてみてもデザインのアクセントになるのではないでしょうか。

Sketchで手書き風でいびつな形の円の描いてみる

Sketchで手書き風でいびつな形の円の描いてみる

 


 

いかがでしょうか、柔らかい雰囲気やポップな印象を与えたいときに使えるデザイン素材として重宝するのではないでしょうか。今回はSketchで作成しましたが、もちろん同じような方法でIllustratorでも作成することができます。デザイン素材としてベクターデータもあちこちで用意されていますが、比較的簡単に作成できるのでぜひ試してみてはいかがでしょうか。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?