パスツールとパスファインダを活用したIllustratorでのロゴ制作

  • このエントリーをはてなブックマークに追加

20121227-01
クリスマスが過ぎ、今年も残すところあと数日となりました。さて、今回は先日お披露目したオリジナルキャラクター”文具おばけ”のロゴ制作手順について書いていこうと思います。ロゴ作成に使用するソフトはIllustrator CS6です。

20121227-02
”文具おばけ”とは、先日の記事「ペンタブレットとIllustratorで描いたキャラクター“文具おばけ”」でお披露目したキャラクター達の総称です。前回も書きましたが、将来の商品化という野望夢があるため、キャラクターもロゴも、すぐに使えるレベルでのデザインを目指しています。

スポンサード リンク

ロゴの下絵を描く

20121227-03
まずは下絵を描いていきます。とりあえず、ひらがなの点を人魂にしてシンプルな感じで描いてみました。が、普通すぎて全く印象に残らず…。

20121227-04
で、怖すぎずかわいすぎずを意識しながら、目玉を一つ追加。あとは、先ほど同様に人魂を使ったデザインに落ち着きました。これで下絵は完成です。

下絵をトレースして線画を作成

20121227-05
次に下絵をスキャナで取り込みんでIllustratorの新規ファイルに配置。ペンツール使ってロゴをなぞっていきます。このとき、ペンツールは下絵の線をトレースしやすいよう、線のみで塗りをナシにしています。

余談ですが、作りたいロゴがPC内にある既存フォントの形状に近いようであれば、次のような手順でロゴの形に近づけていくという方法もとれます。
20121227-06
1.入力したテキストのアウトラインを作成。

20121227-07
2.パスになったテキストのアンカーポイント、セグメントを操作。

20121227-08
3.好みの形にして完成。

線から塗りに

20121227-09
さて、話が戻りまして、ペンツールで下絵の線をなぞり終えたら、今度は線をなくして塗りのみにします。すると、例えば「文」の字でいえば、真ん中のところに穴が開いているべきなのに、塗りつぶされてしまっていることが分かりますよね。

20121227-10
こんなときは、2つのオブジェクトを選択してから、パスファインダ「中マド」とすることで、大きな外側オブジェクトから小さな内側オブジェクト部分をくり抜くことができます。この要領で、他の文字の不要部分もくり抜いていきます。ここまでくれば、最初に配置した下書きは削除してしまって良いでしょう。

20121227-11
ロゴを構成するオブジェクトが用意できたら、それぞれの塗りを好みの色に変えていきます。僕は「文具」部分をオレンジ、「おばけ」部分を水色としました。

20121227-12
また、後で陰影をつけるときのため、レイヤーを2つコピーしてそれぞれを非表示にしておきます(以後、わかりやすいようレイヤー①、②と呼ぶことにします)。合計3つのレイヤーになりました。

縁取りによる立体感

20121227-13
これから、ロゴの縁を黒くして立体感を出したいので、最初のレイヤーに次の操作をします。選択ツールで、すべてのオブジェクトを選択(Ctrl+A)して、コピー(Ctrl+C)し、背面へペースト(Ctrl+B)した後、それらオブジェクトの塗りと線をすべて黒にします。さらに、線幅をやや太めにしてから、黒いオブジェクト群を矢印キーで少し右下に移動することで、文字に立体感を出します。この例では、線端と角の形状は、上のようにしています。

ちょっと横道…。Ctrl+C、Ctrl+V操作でコピー&ペーストした場合、貼り付け位置の指定ができないため、Ctrl+Bにより、全く同じ場所の背面に貼り付けをしています。位置が変わっても”良い単なるコピー”の場合はCtrl+C、Ctrl+V操作でOKです。

光と影による立体感

20121227-14
次にロゴに陰影をつけていきます。ここでは、先ほどコピーしておいたレイヤー①を表示して作業を進めていきますので、黒い縁を付けた最初のレイヤーとコピーしたレイヤー②は非表示にしておきます。コピーしたレイヤー①のオブジェクトを選択し、Ctrl+C、Ctrl+Bにより背面にペーストします。次に、ペーストしたオブジェクトを矢印キーで少し右下に移動します。

20121227-15
同じ形のオブジェクトを二つ選択し、パスファインダから「背面オブジェクトで型抜き」を選択するという一連の操作を各オブジェクトに対し実施します。

20121227-16
残ったオブジェクトは、光の当たる側になるので、色をすべて白にします。これでレイヤー①は完成。

今度は、ロゴの右下側に影の部分を作りたいので、コピーしたレイヤー②を表示し、黒い縁を付けたオブジェクトのあるレイヤーと、コピーしたレイヤー①を非表示にします。例のごとく、コピーしたレイヤー②のオブジェクトを選択し、Ctrl+C、Ctrl+Bにより背面にペーストします。次に、ペーストしたオブジェクトを矢印キーで少し左上に移動します。

20121227-17
先ほど光が当たる側を作った時と同じ操作で、同じ形のオブジェクトを二つ選択して、パスファインダから「背面オブジェクトで型抜き」を選択するという一連の操作を各オブジェクトに対して実施。

20121227-18
残ったオブジェクトの塗りを濃い目の色にします。これでレイヤー②も完成。

素材をあわせて完成

20121227-19
ここまでに作った「黒い縁を付けた最初のレイヤー」、「コピーしたレイヤー①」、「コピーしたレイヤー②」をすべてあわせてできたのがこの状態。

20121227-20
最後に、「文」の字の真ん中に目を入れて完成。線幅を太くすることによる縁取りは、ロゴの制作だけに限らず様々なシーンで使えるので便利です。

スポンサード リンク

最後まで読んでいただきありがとうございました。
よろしければフォローしてください。

  • このエントリーをはてなブックマークに追加

コメント

プロフィール

趣味でイラストやウェブサイトを制作しています。食べることが大好きで「炭焼きレストランさわやか」の創業価格フェアに行くのが楽しみ(家族揃って)。金曜の仕事帰りには「窯出しとろけるプリン」を買うみたい(僕だけ)。

もっと詳しく

記事を検索

月別記事一覧

人気の記事

最近の記事

記事のカテゴリー

記事のタグ

TOP