もしかしたら効率よく使い回しできるかもしれないイラストレータのブラシを使ったリボンの作り方&カーニングの使い方を紹介してみる的なデザインチップス

Share on Facebook
Pocket

こんにちは、先日”この頃、生活の中に「曜日」という観念が全然いらなくなってしまった”と書きましたが、先日いただいたお仕事の関係で月曜日だけは覚えとく必要がでてきた2ndです。

さて、今回も役に立つかどうか微妙な超ピンポイントなデザイン効率化テクニックを紹介いたしますね!実際に制作過程を追って説明していきますが、毎度のことのように長くなりそうなのはご勘弁をw 記事で作製したサンプルをダウンロードできるようにしてありますので、説明ではわかりにくい部分などはサンプルデータを参考にしてみてください。

今回はイラストレータのブラシ機能を使ってリボンを書いてみよう!という試みです。オリジナルのブラシ登録をしておき、うまいこと使えば同じ雰囲気のリボンを簡単に作製できるというデザイナーにとっては夢のようなテクニックw ウェブでもDTPでもグラフィックでもデザインの仕事にしてる方々ならリボンのグラフィックを作製された経験がある方々はとても多いのではないんだろーかと思います。

そんなに使い回すほどリボンばっか描く事はないかもしれませんが、同じ雰囲気で様々な形状のリボンを一度につくらないといけないなんて時には役に立つかもしれません。例によって当方はイラストレータのCS5英語版を使っていますので、日本語の説明ができない部分はご容赦くだちぃ。

それでは実際に制作しながら解説してみたいと思いますー。で、最初にやることは、どんなリボンを描くかイメージしてください。ウェブで検索ワード”ribbon”で画像検索するだけでもそうとう出てきますので、これいいなぁ、なんてものがあったらそれを参考にしてみるのもいいと思います。というわけで、今回はウェブでこんな感じのリボンを作ってみようと思った画像を探したので、それを参考に作っていきたいと思います。という訳で今回参考にしたリボンのグラフィックはこれです。(図1)

図1

図1

ちょっと古びた感じのリボンですね。いちから描くと意外に面倒ですし、ことさら同じ雰囲気で何個も違うパターンを作るのはもっと面倒。という訳でパターン化するにあたってまずは準備をしていきましょう。図2のように参考にしたリボン画像を真似た感じで横にまっすぐな形状で1つ目のパターンを描いていきます。これはテキストなどをいれることを想定して少し長めに。

図2

図2

次に図3のように同じく横にまっすぐな形状でパターンを描いていきます。これはリボンが折れて裏返しになってる部分を想定して、短めに作ります。

図3

図3

最後は左右のリボンの切れ端部分を想定して図4のように横にまっすぐな形状で。ここで1つ注意することは図4Bのように各パーツは同じ高さで作ること。そうしないとパスにブラシを適用した時にリボンの各パーツの太さがばらばらになってしまい調整が面倒になってしまうからです。ここでいくつも長さの違うものやリボンの端の違うパターンなどをいろいろ作っておくともっと複雑なリボンの形状も後で作りやすくなります。が、とりあえず今回は最小限にしときますw

図4

図4


図4B

図4B

そして3つのパターンができたらブラシウィンドウへドラッグして、オリジナルブラシとして登録します。そして図5のようにブラシの種類を最初に選択しますが、アートブラシを選んでください。

図5

図5

アートブラシを選ぶと次ぎにブラシの設定画面がでてきますので図6のように適当なブラシネームを入力し、Brush Scale OptionではStretch to Fit Stroke Length(パスの長さによって自動的にパターンが伸び縮みしてくれる)に設定し、ColorizationではTint(パスの色を変えた時にブラシで設定した色も変わってくれます)を設定し、OKをクリック。

図6

図6

同じ手順で3つのブラシを登録します。登録が終わったら、図7のようにイメージするリボンの形状をパスで描いてみます。

図7

図7

そしたら図8のように先程登録したブラシをそれぞれの場所に適用してみましょう!適用したら線の太さを調節して適度なリボンの太さに設定しましょう。

図8

図8

太さが決まったら、図9のように線の色を変更してわかりやすいようにし、前後の重なりの順番も考え入れ替えておきましょう。

図9

図9

次に図10のように各パーツを移動させて角を揃えます。この時線の曲がり具合によってバランスがおかしかったりした場合はアンカーポイントをいじって調整しましょう。

図10

図10

調整が終わったら図11のようにパスを選択してオブジェクトメニューからExpand Appearanceを使い線を塗りに変換します。この時にテキストを入れる部分のパスはコピーして同じ場所にペーストしておくと後のテキスト入れがリボンのカーブに沿って入れられるので楽になります。図11B参照

図11

図11


図11B

図11B

さきほど残しておいたパスにパス上テキストでテキストを打ち込み、フォントを設定します。そしてこれがリボンの真ん中にくるように図12の設定値をマイナスへしていきます。そうするとテキストが下へ下がっていくので、図13のようにリボンの真ん中へくるあたりに設定します。

図12

図12


図13

図13

図14のようにリボンに適当な太さの淵線を設定すれば、とりあえず完成です。いろいろなパスを描いて同じぶらしを適用させてみましょう。図15のように簡単に同じ雰囲気のリボンが簡単に 作れます^^

図14

図14


図15

図15

それではちょっとデザインの詰めをしていきましょう!図16を参考にテキスト部分のデザインを再検証してみましょう。ここではわかりやすくフォントを変更し、文字間が少しばらばらになるようなフォントをあえて選んでいます。

図16

図16

これではテキスト部分がばらばらな文字間でせっかくのリボンがだいなしっす。そこでカーニング機能を使ってみましょう!テキストウィンドウではカーニングを調整することで1文字づつの文字間隔で細かく設定できます。使い方は簡単。文字間がおかしいなと思う部分にテキスト入力モードで調整したい文字と文字の間にカーソルを合わせ [OPTION] + [→] or [←] を使い調整します。幅を狭めたい時は [OPTION] + [←] でほんの少しづつ文字間が詰まっていきます。逆に→の場合は文字間が少しづつ広がっていきますので、これらを駆使しながら文字間を適切に詰めたり広げながら調整します。

図17はカーニングの設定をして文字間を調整したものです。図16と17を比べてみてください。ちなみにカーニングの詰め幅の設定は図18を見て頂くようにイラストレータの環境設定でテキストの項目のTrackingの数値によって矢印キー1回で動く文字間の詰め幅が変わります。ちなみに、おそらくですが初期設定は20になってると思いますが、私はこの初期設定で充分使いやすいと思ってます。

図17

図17


図18

図18

さてこれで完成ですね!ブラシでそれぞれのパターンを作っておけばその後のバリエーション展開が楽でしょう?とここまできたら最後に図19のように陰影をつけて少しだけブラッシュアップ。これで使えるデザインになったのではないでしょうか?

図19

図19

完成したデータとブラシを適用したパスデータのサンプルをダウンロードできるようにいたしました。説明がわかりにくかった場合などダウンロードしてデータを確認してみてくださいね^^

ブラシサンプルデータダウンロード
完成データダウンロード
(共にCSバージョンで保存し、Zipファイルに圧縮してあります。)

という訳で思ったより長くなりませんでしたねw 画像が多くてページが重たいのはご容赦を。なるべくわかりやすい説明を試みましたがいかがでしたでしょうか?カーニングの設定などは覚えておくと、どっかで役立つと思いますので、試しに使ってみることオススメです。オリジナルブラシを使ってパターンの効率化はリボンだけでなく、いろいろと応用が効くツールなので、自分にあった効率化を考えるのもオススメです、それではこの記事がどっかのだれかさんのお役に立つことを願ってw 

もーしこの記事が役に立ったったーって方がいたらFacebookの「いいね」をぽっちと押してツイッターで拡散などしていただけたら嬉しいっす。

それでは1stさんが早く記事書いてくれることを願いながら寝ようと思います。お休みなさいzzz…
1st!この記事見てるか?w


その他5th Design 関連サイト & SNS

5th DesignのFB, Twitter, Pinterest そしてRSS購読などもありますのでもし記事を気に入っていただけたら下記リンクからフォロー等よろしくお願いいたします!

fb-black
5th Design on Facebook
フェイスブックページにて主にブログの更新情報などをお届けしています。メッセージでのお問合せも受け付けております。
tw-black
5th Design on Twitter
ツイッターにてブログの更新情報や気になる情報など発信。DMでのお問合せも受け付けております。
pin-black
5th Design on Pinterest
5th DesignのPinterestサイトです。。素晴らしい作品なんかをぼけっと眺めながらピンさせていただいてます。
rss-black
5th Design on RSS
RSSにてブログ購読できます。更新情報がすぐに届くので便利!
5ddc-black
5th Design Digital Contents
本家の5th Designデジタルコンテンツのサイトです。アブストラクトなイメージやグランジテイストのイメージなどがメインの5th Designが運営するフォト素材サイト。2015年12月11日のリニューアル後、全て無料でダウンロード可能になりました。

業務内容の詳細やお問合せなどは...

5th Designの業務内容の詳しい内容は” Contents of Jobs ”ページを参照していただき、問い合わせやご依頼などは” Contact ”ページよりお願いいたします。

contentsofjob-banner contact

スポンサーリンク

この記事を書いた人

2nd5th Designでは2ndことデザイナーのBLCKBTYです。グラフィックデザイン全般・WEBデザイン・5th-Designサイト運営・オリジナルTシャツ制作サイトCREATEE運営(準備中)
Share on Facebook
Pocket

コメントを残す