ブログ

【初心者向け】イラレでリボン作成 ワープで簡単変形!

How-to-make-ribbon-in-Illustrator-8

こんにちは、デザイナーのTantanです。

クリスマスも近いということで、リボンの描き方を解説します。
リボンはカードやラベルデザインなど、何かと装飾に便利なパーツです。簡単に作れますのでぜひお試しください。

前半はラベル風リボン、後半は↓のような蝶結びリボンの解説です。
how-to-make-a-ribbon_162x-8

使用バージョンはAdobe Illustrator CC 2017ですが、下位バージョンでもおそらく大丈夫です。(ワープはIllustrator10くらいからあるようです)

リボンパーツの作り方

1.長方形を描く

まずはリボン本体になる長方形を描きます。
その斜め下に、同じ長方形をコピーして、長さを短くしておきます。
↓短い長方形と長い長方形
how-to-make-a-ribbon_012x-8

2.山形カットを作る

ペンツールで左辺の上下中央にアンカーポイントを打ちます。
スマートガイドをオンにしていると中央のガイドが「交差」と出るのでわかりやすいです。
目分量でだいたい真ん中に打っても問題ありません。(どうせ変形するのであまり神経質にならなくてもOK)
how-to-make-a-ribbon_022x-8

いま打ったアンカーポイントをダイレクトツールで選択し、矢印キーで右へ移動します。
how-to-make-a-ribbon_032x-8

3.折り返しの影を付ける

折り返し部分に合わせて、ペンツールで三角形を描きます。
how-to-make-a-ribbon_042x-8

4.重なる部分を切り取る

手前のリボンと奥のリボンの境目がわかりにくいので、切り取ります。
ペンツールで折り返し部分の形に沿うような台形を描いて、パスファインダで型抜きします。
(あまり神経質にならず、だいたいで描いていいと思います。)
how-to-make-a-ribbon-052x-8

5.左右反転コピー

右側へ反転コピーして、基本のリボンパーツの完成です。
how-to-make-a-ribbon_062x-8

境界線を描画するのもあり

4の工程をせずに、図形に線を付けて表現してもいいでしょう。
お好みでどうぞ。
how-to-make-a-ribbon_072x-8

リボンを変形させる

アーチ状

描いたリボンパーツを選択して、オブジェクト→エンベロープ→ワープの設定を選択します。

how-to-make-a-ribbon_082x-8
スタイルは「円弧」を選択します。
how-to-make-a-ribbon_092x-8
よく見かけるアーチ状のリボンになりました。
(カーブの%をマイナスにすると、下向きにもできます。)
アーチ状のリボン

かまぼこ状(?)

ワープを「円弧」ではなく「上弦」にすると、中央が太く盛り上がった形のリボンになります。
かまぼこ状のリボン

たなびく旗状

ワープを「旗」にすると波型になります。
たなびく旗状のリボン

斜め変形

シアーツールで変形して、斜めにするのもいいかと。
シアーツール
斜め変形のリボン

再調整も簡単!

ワープの変形は、メニューから「解除」が可能です。
「リボンをもう少し長くしたい」「もうちょっとカーブさせたい」など変えたくなっても大丈夫。
いったん「解除」してリボンを長くしたり、カーブの%を変えてワープをかけ直せばOKです。

変形に沿って文字を載せる方法

文字を変更しないのであれば、ワープの前にあらかじめリボンに文字を入れておいて、文字ごとワープをかければ大丈夫です。
その場合は文字を変更したければワープをいったん「解除」することになります。

それだと都合の悪い場合もあるので、文字だけ「パス上文字」で入れる方法をご紹介します。

複製する

リボンをコピーして前面にペースト(command+F)します。
リボンを前面にコピー

分割・拡張する

オブジェクト→分割・拡張を選択して、パスを調整できる状態にします。
オブジェクトの分割・拡張

カーブを抽出する

ダイレクト選択ツールでカーブの下の線だけ選択し、残りは削除します。
how-to-make-a-ribbon_312x-8

パス上文字ツールで文字を入れる

線を少し上へ移動してから、
how-to-make-a-ribbon_322x-8

パス上文字ツールを選び、
how-to-make-a-ribbon_342x-8

線上に文字を入力します。
入力した文字が下向きになったり見えなくなっていたら、ダイレクト選択ツールで縦線(右、中央、左にある縦の線)を調整しましょう。
パス上文字ツール

これで、ワープを解除せずに文字をいじれるようになります。

蝶結びリボンの作り方

先割れ長方形を作る

先程の「2.山形カットを作る」の要領で、先割れ長方形を作ります。

how-to-make-a-ribbon_172x-8

先端を広げる

ダイレクト選択ツールで先端のアンカーポイントを選択し、上下に広げます。
how-to-make-a-ribbon_182x-8

コピーして並べる

回転コピーと反転コピーで、蝶々の形に4つ並べます。
図形をリボン型に並べる

ワープ「膨張」

上部2つの羽を選択して、オブジェクト→エンベロープ→ワープの設定で「膨張」をかけます。
how-to-make-a-ribbon_262x-8

さらに、下の2つの羽を選択して「貝殻(下向き)」をかけます。
how-to-make-a-ribbon_282x-8

このようになりました。
ワープでふくらます

分割・拡張

バランスを見て、上の羽をちょっと縦長に伸ばしました。
上部を拡大

オブジェクト→分割・拡張を選択して、パスを調整できる状態にします。
オブジェクトの拡張

細部を描く

結び目の四角を描きます。
結び目の四角形を作る

シワと膨らみの裏面もペンツールで描き、左右反転コピーします。
シワと裏面を描く

微調整して完成!

バランスに気になる所があれば、調整しましょう。
今回は下の帯を長くしたり、曲線のハンドルをいじって羽根のふっくら感を調整して完成しました。
蝶結びリボン完成

リボンは何かと使えると思うので、ぜひやってみてください。
それではまた!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. webdesign IllustratorとPhotoshop カンプ制作ソフトにつ…
  2. thum バレンタインなのでチョコ品評会をしてみたっス
  3. top-chocolate-illust バレンタインなので SEOを恋愛に例えてみる
  4. magazine2-50 PHP Business 「THE21」3月号に掲載されました!…
  5. IMG_0826 濃厚魚介スープが旨い!!永斗麺でサンマラーメンいただきました
  6. 用語辞典イラスト エム・フィールド広島オフィスの日常
  7. ba2d551a71d04d5d845f05aa74658fb5_m パソコンスクール HA*NA講師を終えて
  8. m-field_tokyooffice04 広島オフィスメンバーがはじめてエム・フィールド本社におじゃましま…

最近の記事

  1. carp5
  2. origami-01
  3. hirofuro_vol.10
  4. carp4
  5. css-numbering
PAGE TOP