Sketchで手書き風のいびつな形の円を描いてみる
最終更新日: Update!!
ベクターデータを扱う時にはIllustratorやSketchを使っているのですが、比較的簡単なものを扱う場合には動作が軽く、スピーディーに作業ができるSketchをよく使っています。今回はSketchを使って、柔らかいデザインを表現したい時に使える、手書き風のいびつな円を描いてみたいと思います。
手書きのパスで作成しても、なかなか綺麗な形にならずどうしても不自然な感じになりますが、アンカーポイントを調整することで簡単にできてしまうので、ぜひ覚えておくといいのではないでしょうか。これくらいの図形であればIllustratorでなくてもSketchで十分作れてしまうので、それでは早速作ってみましょう!
まず初めに「Ovalツール」で円もしくは楕円のオブジェクトを作成します。
作成したオブジェクトをダブルクリック、もしくは「Editモード」に切り替えてアンカーポイントとハンドルを表示させます。この時はアンカーポイントの形状が、曲線で対称な「Mirrored」になっています。
全てのアンカーポイントを選択して、右側のパネルからアンカーポイントの形状を、曲線で非対称の「Asymmetric」に変更します。これで形を変える準備ができました。
まずは、全てのアンカーポイントのハンドルの長さをランダムでバラバラに変更していきます。仕上げたい形状を意識しながらハンドルの長さを調整していきます。
次に、アンカーポイントの位置を最初の場所から上下左右にずらしていきます。この時もランダムになるようバラバラの位置にしておくのがポイントです。
最後にハンドルの傾きを変えて形を整えていきます。あまり大きく動かすと円の形から離れてしまうので注意が必要です。
これで手書き風のいびつな円の形が出来上がりました。最初の形と比べてみると違いがわかりますね。
出来上がったオブジェクトは、異なる色をオーバーレイ状に重ねて、大きさや回転軸・位置などをずらすも良し、塗りと線画にわけて重ねるのも良し、またはアウトラインのみで何重にも合わせてみてもデザインのアクセントになるのではないでしょうか。
いかがでしょうか、柔らかい雰囲気やポップな印象を与えたいときに使えるデザイン素材として重宝するのではないでしょうか。今回はSketchで作成しましたが、もちろん同じような方法でIllustratorでも作成することができます。デザイン素材としてベクターデータもあちこちで用意されていますが、比較的簡単に作成できるのでぜひ試してみてはいかがでしょうか。









いかがでしょうか、柔らかい雰囲気やポップな印象を与えたいときに使えるデザイン素材として重宝するのではないでしょうか。今回はSketchで作成しましたが、もちろん同じような方法でIllustratorでも作成することができます。デザイン素材としてベクターデータもあちこちで用意されていますが、比較的簡単に作成できるのでぜひ試してみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories