グレヌデサ La graine du dessin
Graphic

Photoshop・Illustratorでリボンを作るチュートリアル10選

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

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

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

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

【Illustrator】3D効果を使う

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

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

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

ribbon_03.jpg
自由曲線を垂直にコピーして作る方法です。
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】結んだリボン

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

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

【Illustrator】勲章リボン(ロゼット)

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

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

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

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

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

【Photoshop】巻きついたリボン

ribbon_07.jpg
最近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】超基本のリボン

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

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

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

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

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

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

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

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)
Design

ちょっとだけ制作効率をアップする?! 簡単にできる線のあしらいtips

破線を書く

Webデザインで、囲んだり、区切ったりと、よく使われる破線。
今回は、Photoshopのブラシツールで簡単につくれる破線をご紹介します。
    1)ツールパレットから鉛筆ツールを選択してから、F5を押しブラシパレットを表示
    2)間隔に任意の数値を入力
    brush.gif
    ※200%なら1点置きに、300%なら2点置きの破線になります。
    3) 線を描くと破線になります。
    hasen.gif

図形の境界線を破線で描く

Photoshopで図形の境界線を描くときに、レイヤースタイルの"境界線"を使用する場合があります。
この境界線を使って破線で描きたい場合は、一工夫が必要です。
    1) 破線のパターンを用意します。

    patan.gif
    4×4pixelのボードに2pixelのドットで図のような柄を描きます
    2)これをパターンに登録
    3)好きな図形を描きます。
    4)レイヤースタイルの"境界線"を選ぶ
     hasen_box.gif

    設定を

    ○サイズ:2pixel

    ○塗りつぶしタイプ:パターン

    ○パターン:先ほど作ったパターン

    にすると、出来上がりです。

    出来上がり:
    hasen_box2.gif
この方法は、繰り返し同じあしらいのボックスを作成したい等の場合に便利です。

番外編:境界線のあしらいを工夫する

レイヤースタイルの"境界線"の塗りつぶしタイプ:パターンを使って、 いろいろなあしらいの線を簡単に作ることが出来ます。

line_pt1.gif
ガーゼパターンを使って不規則な破線。

 

line_pt2.gif
羊皮紙パターンを使ってクレヨン&手書き調の境界線。

 

line_pt3.gif
漆喰パターンを使ってがっちりとした印象の境界線。

 

ゼロから作ると時間がかかるボックスのあしらいも この方法だと少々の時間で出来るので便利です。 (今回使用している環境は、Photoshop CS5です。)

(masanori)
Design Web service

高品質なWebデザイン素材(PSD)がダウンロードできるサイトまとめ

このボタンのデザインって、どうやって作るのかな?
質感のあるWebデザインのパーツや素材の作り方が分からない、知りたい!って方におすすめする、
Webデザイン用の高品質なPSD素材がダウンロードできるサイトをご紹介します。

眺めるだけで、デザインの参考や学習になるのはもちろんですが、
ダウンロードしたpsdデータを読み解くことで、制作の裏側を学ぶこともできます。
レイヤー効果やテクスチャーなど、このように使っているのか!と発見があり勉強になります。

みなさんもぜひ参考にしてみてください。


Elemis


ページデザインのテンプレートから、パーツ、パターン、テクスチャ素材等をダウンロードできるサイト。
細部まで緻密に作られているデザインは勉強になります。
001.jpg

Freebies Booth


ボタンやメニュー、アイコンなど、主にデザインのパーツを紹介しているサイト。
002.jpg

Free PSDs & Resources for Web Designers by Orman Clark


Orman Clarkさんによって作成された、デザインパーツサイト。
フォームやボタン、グラフィックなどがダウンロードできます。
003.jpg


※ライセンス、利用条件にについては各自ご確認ください。


(yukari)
Coding

初めてHTML5でコーディングにする際に気をつけるべき事

近頃HTML5が本格的に導入される傾向が高まりつつあります。
HTML5対応が促進される理由は、XHTMLの時よりもセマンティクス*な文章構造を意識してコーディングをすることで、
データ自身に的確な意味をもたせる事が可能になりました。
それにより、サイト自身の情報の精度が高まり、検索結果等に正しい情報が反映されていくことになります。

*セマンティクス についてはこちらをご参照ください
エンタープライズ:Gartner Column:第11回 そもそも「セマンティクス」とは何だろう?
http://www.itmedia.co.jp/enterprise/0108/20/01082088.html

HTML5で新たなに追加されたよく使用する要素の注意点をご紹介していきます。
続きを読む: 初めてHTML5でコーディングにする際に気をつけるべき事
Graphic

職業病って怖い

matsukura20110912.jpg

職業を理由に犯罪は起こしちゃいけませんね

普段の生活の中で「このテクスチャ使えるかも!」とバシバシ素材集めができるぐらいの...まずいいカメラを手に入れる事から始めねばいけませんが。

ネットからテクスチャに限らず素材をダウンロードする際は利用規約にご注意を。

(kana)

Tips

女子にモテるWebデザイン 【3】 女子をメロメロにする6つのモチーフ

110912_rd_title.jpg

第1回:ピンクを使いこなそう
http://lab.gpol.co.jp/graine/2011/04/web-1.php

第2回:模様を攻略!ひと味ちがうデザインへ
http://lab.gpol.co.jp/graine/2011/06/web-2-1.php


色、柄の次はモチーフ!
わかっているようで、わからないのが女の子の好きなもの。
女の子好みは千差万別ですが、定番モノがあるんです。
ちょっとしたアクセントに、ぽんっと置くだけで女子向けデザインになっちゃう
定番モチーフを押さえましょう。

1.布・レース

110912_01.jpg
リネンやコットンなどの布、レース、ボタン、刺繍など、お裁縫を連想させるものは、いかにも女の子らしいですね。
ナチュラル指向の女性に人気なのがこれらのモチーフです。
布系
 水玉、花柄、ストライプ柄の布・リネン・帆布
糸系
 毛糸・縫い目・クロスステッチ・あみぐるみ
お裁縫系
 レース・ボタン・まち針・リボン

2.紙・ステーショナリー

110912_02.jpg
雑貨大好き、カフェ大好きな女性に人気なのが、文房具系のモチーフ。
おしゃれな海外文具メーカーのものなら、なお良し。

書く物系
 ペン・鉛筆・インクとつけペン・クレヨン・万年筆
紙系
 ノート・メモ・方眼紙・スケッチブック・段ボール・封筒・タグ
シール系
 セロテープ・マスキングテープ・切手・ラベル

3.オシャレな女の子

110912_03.jpg
かわいいだけでも、美人なだけでもない。
女性は自分のあこがれを投影できるオシャレな同性が大好き。
オシャレな女性の写真があるなら、他に装飾はいらないぐらいです。
女性ファッション雑誌の表紙を見れば言わずもがなですね。
ちなみにこの寝顔がかわいいモデルさんの写真は下記サイトでダウンロードできます。

【フリー写真素材】モデル・人物の写真素材はモデルピース
http://www.modelpiece.com/

4.手描き感

110912_04.jpg
文字やイラストなど、手描き感はかわいさを出すのに最適な味付けです。
一見女性っぽくなさそうな配色、テイストでも、
手書きフォントひとつで女性向けデザインになります。

5.きらきら

110912_05.jpg
これはよく知られていますね。女性はきらきらが好きです。
きらきらの光もそうですが、宝石なんかもきらきら要素に入ります。
なお、きらきらした光の描き方はこちらをどうぞ。

Photoshopできらきらした魔法の光を描く(きらきらブラシ付き)
http://lab.gpol.co.jp/graine/2010/10/photoshop-9.php

6.花

110912_06.jpg
エレガンスにもキュートにも、文字通り華やかにも。
お花はいかにも女性らしいという感じですね。
生花の写真、模様、イラストなど、デザインに取り込みやすい題材です。


他にもいろいろありますが、基本はこんな感じです。
調達するのが大変なモチーフもありますが、最近は女子向け素材集がたくさん発売されているので
購入を検討してみてはいかがでしょうか。
(sayaka)
New Entries
1  2  3  4  5  6  7  8  9  10  11

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive