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

Sketch 2019.09.30

Sketchで作成するリボンデザインのバリエーション

Tags: ,

今回はSketchでリボンデザインを作成してみたいと思います。リボンデザインを作成するときによく使われるのはIllustratorで、過去記事「Illustratorのパスアピアランス効果まとめ(ワープ・パスの変形)」にあるようなアピアランス機能を使うことでリボンの形を作っていきます。ただ、そこまで複雑な形ではないベクターオブジェクトはSketchでも十分に作成することができます。では早速作ってみたいと思います。

 

【こちらの記事もどうぞ】
・Sketchで中華風デザインに使える雷文模様を描いてみる
・Sketchで陰陽太極図のマークを描いてみる
・Sketchで和風デザインに使えるヱ霞文様を描いてみる
・Sketchで手書き風のいびつな形の円を描いてみる

 

まずは横長の長方形の矩形オブジェクトを作成します。

Sketchで作成するリボンデザインのバリエーション

 

4つのアンカーポイント全てを選択し、アンカーポイントの形状を「Disconnected」に変更します。

Sketchで作成するリボンデザインのバリエーション

 

アンカーポイントのハンドルの左端と右端の方をアンカーポイント方向に縮めていきます。アンカーポイントに吸い付くようになるので、ピッタリとアンカーポイントに合わせていきます。左右の両辺が直線になり、樽型の形になります。

Sketchで作成するリボンデザインのバリエーション

Sketchで作成するリボンデザインのバリエーション

 

リボンの形状に合わせて、下側のハンドルの両方を上方向にあげていき、アーチ状になるようにします。

Sketchで作成するリボンデザインのバリエーション

 

アーチ状になったオブジェクトをコピーします。

Sketchで作成するリボンデザインのバリエーション

 

コピーしたオブジェクトの左右どちらか一方のアンカーポイントを選択し、オブジェクトの幅を縮めていきます。

Sketchで作成するリボンデザインのバリエーション

 

縮めていった方のアンカーポイントを「straight」に変更します。

Sketchで作成するリボンデザインのバリエーション

 

反対側の辺の中央にアンカーポイントを追加し、リボンの端の部分を形作ります。デザインに合わせて形を調整しておきます。

Sketchで作成するリボンデザインのバリエーション

 

作成したオブジェクトをコピーして、左右に反転し、反対側に配置します。

Sketchで作成するリボンデザインのバリエーション

 

リボンが折り重なったような形になるよう配置を整えていきます。この時、リボン本体となるオブジェクトが最前面になるようにしておきます。

Sketchで作成するリボンデザインのバリエーション

 

表面のリボン本体となるオブジェクトと、端のオブジェクトを選択し「Subtract」で前面オブジェクトで型抜きします。

Sketchで作成するリボンデザインのバリエーション

 

反対側のオブジェクトも同じようにします。この時、型抜きしたオブジェクトから、前面オブジェクトとなる要素をコピーすると簡単に作成できます。

Sketchで作成するリボンデザインのバリエーション

 

中央に配置されるリボン本体となるオブジェクトをコピーして、最前面に配置します。

Sketchで作成するリボンデザインのバリエーション

 

色を整え、余白を作るなどしてデザインを整えます。この形でもリボンデザインとして使えますが、折り重なった部分も作成していきます。

Sketchで作成するリボンデザインのバリエーション

 

両端のオブジェクトをコピーして、型抜きされている前面オブジェクトを上下反転にし、曲線の曲がり具合を調整することで、折り重なる部分の影を作成します。この時、色を変えておくとわかりやすくなります。一方ができたら、コピーして反転するとOKです。

Sketchで作成するリボンデザインのバリエーション

 

リボンの中に文字を入れていきます。大きさを合わせて、テキストを作成します。

Sketchで作成するリボンデザインのバリエーション

 

作成したテキストを選択し、メニューから「Text」→「Text on Path」をクリックし、パスに沿ったテキストになるよう設定します。

Sketchで作成するリボンデザインのバリエーション

 

あとはテキストの位置などを調整すると完成です。同じ要領でアレンジを加えることで、様々なリボンデザインを作成することができます。

Sketchで作成するリボンデザインのバリエーション

 


 

今回はSketchでいろんなリボンデザインのバリエーションを作成してみました。Illustratorを使うとリボンの曲線などはアピアランス機能で簡単に変形させることができますが、Sketchで手軽に作りたいという場合にはこのような形で作成することができますので、機会があればぜひ試してみてくださいね。

この記事を書いた人

オガワ シンヤ

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

  • Twitter

コメントフォーム

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

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

CAPTCHA


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

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