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

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

今回は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で手軽に作りたいという場合にはこのような形で作成することができますので、機会があればぜひ試してみてくださいね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram