saketorock

WordPress、Mac、その他日常で覚えておくべきことを備忘録としてメモしています。

Illustrator

Illustratorのアピアランス効果をつかって立体的なシャドウを手っ取り早く作る方法

webデザインでよく目にするこんなやつ。
アピアランスを使って立体的なシャドウをつける方法

目の錯覚で立体的に見えるので、思わず目が言ってしまいます。

以前から、どうやって作成するのか気になっていました。Illustratorを使って、最もカンタンな作成方法を考えてみましたので備忘録としてメモ。

アピアランス効果を利用する

イラレで制作するときはアピアランス効果を使うのが一番の近道です。

アピアランスとは

ここでちょっとおさらい。Illustratorのアピアランスって何って話をしておきましょう。

アピアランス効果は、オブジェクトのベースを変えなくても見た目を帰ることができる効果のこと。

たとえば、文字色にグラデーションをつける際、アピアランスがなかったときは文字をアウトライン化し、グラデーションをつけていました。
アピアランスを使わないと作業工程がたくさん

しかし、これでは文字を変えたいときは、最初から文字を打ち替えなければなりません。

アピアランス効果を使えば、文字をいつでも変更ができるので作業効率がぐんとアップするとというわけです。

アピアランスを使うと作業効率はアップ

ぼかしをアーチ型に変形させる

まず「塗り」のないオブジェクトを作成します。
イラストレーター作業

イラレのメニューから「ウィンドウ」→「アピアランス」を表示。塗りを「白」にします。
イラストレーター作業2

こんなオブジェクトができます。
Illustrator03

さらに「白」にした塗りのレイヤーを選択しつつ、「アピアランス」タブ右下の「選択した項目を複製」するボタンをクリックし、複製した「塗り」を黒にします。
アピアランス

この時点では白に塗ったオブジェクトと黒に塗ったオブジェクトは同じ大きさなので、以下のように見えているはずです。
Illustrator03

次に、下の黒に塗ったオブジェクトをシャドウにするため、アピアランスで黒に塗ったレイヤーを選択し、ボカシをかけます。選択すべき箇所は、イラレのメニュー「効果」→「ぼかし」→「ぼかし(ガウス)...」を選択。

シャドウをぼかす

ぼかし(ガウス)を選択したら、お好みのぼかし具合を調整します。半径:3ピクセルぐらいで調度よいかもしれません。

ぼかしの設定

こうなります。

06-illustrator-appearance

続いて、シャドウを立体的に見せるために扇形に変形します。「効果」→「ワープ」→「アーチ」を選択。
効果でアーチを選択

カーブ設定を5〜8%ぐらいに設定します(お好みでOK)。
シャドウを変形

アーチ型に変形させたぼかしを移動する

次にシャドウをオブジェクトの下にしたいので、「効果」→「パスの変形」→「変形」を選択。

シャドウを移動する

変形効果を設定する数値は、拡大・縮小の水平方向が95%ぐらい、垂直方向は90%前後、移動の垂直方向が20pxぐらいがよさそうです。

10-illustrator-appearance

こんな感じでできました。

アピアランスを使って立体的なシャドウをつける方法

まとめ

アピアランス効果って使いこなせるようになると結構、いろんなデザインができて便利です。
※ここではIllustratorCS5を使用したデモ画面を載せています。

▽Illustratorを覚える際、一番効果を発揮するのが「逆引き」です。私はせっかちなので、こういう書籍で習得スピードを上げることができました。

-Illustrator