designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. Sketchで作成するリボンデザインのバリエーション

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

  • 2019.09.30
  • デザイン
  • 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で手軽に作りたいという場合にはこのような形で作成することができますので、機会があればぜひ試してみてくださいね。

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

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

Sponsored Link

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact