ガーリーにもエレガントにも、キュートにも。
くるくると動きのあるリボンのグラフィックをワンポイントにするだけで
デザインがランクアップすること間違い無し！
覚えておくと何かと重宝するリボンの描き方チュートリアルをまとめてみました。

【Illustrator】カリグラフィブラシでパスを描いてアウトライン化

カリグラフィブラシでパスを描いてアウトライン化、
その後手前と奥のリボンを分割して色を塗り分ける方法です。
複雑なくるくる具合にしたい場合に最適です。
このチュートリアルではプレゼントBOXの描き方の中で、リボンの作り方が紹介されています。

How to Make Festive Vector Gift Boxes | Vectortuts+　※英語
http://vector.tutsplus.com/tutorials/illustration/how-to-make-festive-vector-gift-boxes/

【Illustrator】3D効果を使う

自由曲線に3D効果をつけてリボンを作る方法です。お手軽。
細かい微調整は必要ですが、パースを正確にしたい場合におすすめ。
リボンの太さが一定になるので、少し無機質な雰囲気になるのと
うねりに合わせて太さをデフォルメしたい場合には向かない方法です。

イラレラボ　illustrator-labo - Tutorial_くるくるリボンを描く
http://illustrator-labo.com/?p=218

【Illustrator】パスを垂直に下ろして1面づつ作る

自由曲線を垂直にコピーして作る方法です。
1面1面作っていかなければならないので、複雑な動きの場合は面倒ですが
リボンの太さを変えたり、動きをもたせたりといったデフォルメがしやすいのが特徴です。

Creating a ribbon in Adobe Illustrator | Veerle's blog　※英語
http://veerle-v2.duoh.com/blog/comments/creating_a_ribbon_in_adobe_illustrator/

【Illustrator】結んだリボン

こちらは3D効果を使った結んだリボンの描き方です。
短時間でハイクオリティなリボンが描けるのでおすすめ！
このチュートリアルひとつ覚えておくだけで、いろいろ応用が効きそう。

イラレラボ　illustrator-labo - Tutorial_リボンの描き方
http://illustrator-labo.com/?p=365

【Illustrator】勲章リボン（ロゼット）

こちらは欧米ではメジャーな勲章リボン。（ロゼットというそうです）
フリルがかわいいですね。ランキングのイメージなんかに使えそうです。

Create a Tri-Color Rosette Ribbon in Illustrator | Vectortuts+　※英語
http://vector.tutsplus.com/tutorials/illustration/create-a-tri-color-rosette-ribbon-in-illustrator/

【Photoshop】質感がすてきなレトロリボン

ペタンと折り返されたストライプのリボンです。
パターンオーバーレイで布のような独特の質感を出します。

Design a Retro Style Ribbon　※英語
http://www.photoshopstar.com/graphics/design-a-retro-style-ribbon/

【Photoshop】巻きついたリボン

最近Web界で流行りの、巻きついたリボンのデザイン。
サイトデザインに反映する時の画像の切り出し方とコードの書き方まで紹介されています。
しかも、うれしいPSDソースファイル付き！

Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!) | Webdesigntuts+　※英語
http://webdesign.tutsplus.com/tutorials/site-elements/create-a-3d-ribbon-wrap-around-effect-plus-a-free-psd/

【Photoshop】超基本のリボン

おなじみの超基本リボン。直線的なので、描きやすいです。
うれしいPSDソースファイルつき！

Ribbon Tutorial - Learn how to create a simple ribbon using adobe photoshop.　※英語
http://www.trickdigest.com/tutorials/banner.html

【Photoshop】アプリアイコンで作ったリボン

iPhone Giftのグラフィックでやってた、アプリアイコンリボンをつくってみたよ！というチュートリアル。
変形ツール「ワープ」をつかってアイコン画像をぐりぐりとねじ曲げています。
同様にすると、こんなリボンも作れます。こちらはムービーフィルムのイメージなんかに応用できそうですね。

iPhone Gift Ribbon　※英語
http://webdesignerwall.com/tutorials/iphone-gift-ribbon

【Photoshop】超リアルな結んだリボン

覆い焼きツールと焼き込みツールでハイライト、シャドウを描き込む本格派。
難易度が高いですが、かなりリアルなものが作れます。

Photoshop design ribbon logo stock photo in photoshop. | Fun tutorials　※英語
http://www.php2k.com/blog/beginners-photoshop-tutorials/photoshop-design-ribbon-logo-stock-photo-in-photoshop/

番外編

最後は、リボン素材のまとめ記事をご紹介。
時間がない場合はフリー素材を使っちゃいましょう。ファイルの中を見ることで勉強にもなります。
※利用規約は各々のサイトをご確認ください。

Photoshop VIP | リボンやステッカー、バッジを簡単作成、PhotoshopフリーPSD素材30個まとめ
http://photoshopvip.net/archives/29521

30 kostenlose Photoshop Ribbon Sets | hpvorlagen24 Webdesign Magazin
http://www.hpvorlagen24.de/2011/04/26/30-free-photoshop-ribbon-sets/


これらを全てマスターすれば、あなたに描けないリボンは無いはず！
たのしいリボンライフを送って下さい！


(sayaka)