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

Sketch 2020.02.25

Sketchでオブジェクトを回転させて花模様の図形を描いてみる

Tags: ,,,
最終更新日:Update

UIデザインツールであるSketchですが、Illustratorに劣るもののベクター図形の操作も得意としています。今回はSketchで花模様を作成する方法についてまとめていきたいと思います。Sketchでデザイン制作をしている最中に、ちょっとしたベクターのデザイン素材が必要になった場合に、わざわざIllustratorをたちあげなくてもSketchで完結できることも多々あります。

 

当メディアでも、過去にSketchを使ったいろんな図形やデザイン素材を作成する方法を紹介していますので、よかったらこちらもご参考に。

(参考記事)
・Sketchで放射状に広がる旭日マークを描いてみる
・Sketchで作成するリボンデザインのバリエーション
・Sketchで中華風デザインに使える雷文模様を描いてみる
・Sketchで陰陽太極図のマークを描いてみる
・Sketchで和風デザインに使えるヱ霞文様を描いてみる
・Sketchで手書き風のいびつな形の円を描いてみる

 

それでは作成していきたいと思います。まずは、花びらにあたる花模様の1ピースとなるオブジェクトを作成します。仕上がりのイメージを想定しておきます。

 

ツールバーなどから「Rotate Copies」を選択します。すると次のようなダイアログが表示されます。ここでは選択中のオブジェクトをいくつコピーするかを数値で入力します。

 

すると、指定した数だけ選択中のオブジェクトが回転しながらコピーされます。そして回転軸の中心とベースとなるオブジェクト上にハンドルが表示されます。このようにRotate Copies機能を使うことで、手早く綺麗にオブジェクトを回転させた図形を描くことができます。

 

このハンドルをドラッグすることで回転軸中心からの広がり具合を調整することができます。イメージしている花模様の形に近づくようハンドルの長さをドラッグで調整します。これで簡単に回転体オブジェクトの位置を調整できます。

 

またハンドルは長さ調整で広がり具合を調整するだけでなく、位置を動かすことでオブジェクトの回転する向きも変化させることができます。全て自動的に調整されるので複雑な形状も簡単に表現することができます。

 

このようにして、回転コピー機能を使った花模様のオブジェクトを作成することができました。とても簡単ですね!

 

この方法を応用することで、桜や梅など、よく見かける花模様も簡単かつ綺麗に作成することができます。

 

ちなみにですが、回転コピーさせる際にはグループ化されたレイヤーは操作できないので、必ず単一のオブジェクトレイヤーになるように注意します。

 

そのほかにも、いろんな花模様が作成できます。花模様だけでなくこのように同心円上に回転オブジェクトが並ぶ図形であれば、ほとんど作成できるのではないでしょうか。

 

また工夫次第では複雑な幾何学図形も簡単に作成できますので、ロゴデザインなんかにもやくに立つテクニックですね。

 


 

今回はSketchで、回転コピー機能を使った花模様を作成する方法についてまとめてみました。もちろんIllustratorなどのベクターグラフィックツールで作成することもできますが、これくらいのシンプルなものであれば、Sketchで十分作成することができますので、サクッと作りたい場面などでは是非おすすめです!

この記事を書いた人

オガワ シンヤ

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

  • Twitter

コメントフォーム

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

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

CAPTCHA


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

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