0%

Designデザインワークショップ

Posted:2019.04.14

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

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

 

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】