• LIGの広告成功事例
WEB

Illustratorの3D効果でむずかしい傘のイラストを簡単に描く方法

Illustratorの3D効果でむずかしい傘のイラストを簡単に描く方法

こんにちは、デザイナーの白浜です。
今回は、普通に描くと形を取るのがむずかしい傘のイラスチを、Illustratorの3D機能を使って簡単に描く方法をご紹介したいと思います。

今回の記事はこちらのまとめをもうちょっと補足した感じの内容になっております。

下準備

03

のちに使用する、傘の本体部分のシンボルをあらかじめ登録しておきます。
ポイントは、ストライプ状に並べた長方形オブジェクトの下だけ、ワープ機能を使って(今回は下弦を使いました)波なみにしておくことです。

 
04
作ったものは、あとからシンボルをダブルクリックすれば編集可能なので、ざっくりとで大丈夫です。

傘の部分を作る

つづいて、傘の部分を作っていきます。

傘の断面のパスを描く

01

まず初めに、傘の断面のパスを描きます。
このパスが一周して、傘の部分になります。塗りなし、線のみのオープンパスです。

3D効果をつける

02

次に、「効果」→「3D」→「回転体」で逆お椀型のオブジェクトを作ります。
このときの回転データをメモっておくと、柄の部分を作るときにあわせやすいかもしれません。

マッピングで傘の形を作る

ここが今回の要になります。

回転体ボックスの下にある「マッピング」機能を使って、逆お椀型のオブジェクトにシンボルを巻きつけます。

05

「面にあわせる」と「構造体を表示しない」にチェックを入れることがポイントです。

 
06

こんな感じに、シンボルがマッピングされてそれらしくなってきました!

仕上げ

最後に調整をします。

影をつけて立体的にする

07

このままだとまだ立体には見えないので奥側の面を少し暗くします。
アピアランスのままだと直接編集できないので、「オブジェクト」→「アピアランスを分割」で編集できるようにしましょう。

 
08

奥側になるオブジェクトをダイレクト選択ツールで選択。Ctrl(command)+Cでコピー → Ctrl(command)+Fで前面にコピーして、パスファインダーで統合します。

 
09

色を#000000にしてモードを乗算に、塗りの不透明度を30%にします。
「不透明マスクで形状の抜きを定義」にチェックを入れないと、下に透過されなかったので、ここにもチェックを入れます。

 
10

こんな感じになりました。(ちょっと回転体の角度調整しました)
傘に奥行きがでました。

傘の支柱と柄をつける

参考サイトは支柱ごと3Dにしていましたが、うまくいかなかったので別々にとりつけることにします。

11

支柱の部分は傘の回転の角度とあわせた長方形にグラデーションをつけて、オブジェクトのレイヤーの並び順を調整しただけです。
傘の前面になる部分のオブジェクトを最前面にもってきます。(グループ化されてるとうまくいかないかもしれないので、適宜グループ解除して行ってください)

次に柄ですが・・・。う〜んここはもうちょっと改良の余地がありそうなので、ざっくりと。
今回は「J」の形のパスを「3D」→「押し出し・ベベル」でちょっと立体的にしたものを分解して、グラデをつけたのですが、まだ丸みが足りない!!
ここの描き方をぜひ教えてほしい・・・。立体的な丸みのある柄はどう描けばいいんだ!!

12

こんな感じで完成です。

この傘の素さえ作ってしまえば、カラーバリエーションは何度かご紹介した、

を使って速攻いろんなパターンがつくれます!

13

梅雨はもうあけてしまいましたが、ぜひいろんな色やガラの傘を作ってみてください! それでは。

この記事を書いた人

姐さん
姐さん デザイナー 2010年入社
デザイナーの白浜です。ウェブデザイナーとして日々修行中。マンガと音楽とお米が好きです。よろしくお願いします。