creatorsnest57

【Illustrator】まずはこれを覚えたい!基本的なエフェクト集


Illustratorでは多様なデザインを作ることが可能です。
エフェクトとはIllustratorでデザインをするときには欠かせない、特殊な効果のことを指しています。
立体的な文字や、思わず目を引く表現は様々な特殊効果の組み合わせによってつくられているのです。

Illustratorで表現できる基本的なエフェクトにはどんなものがあるのかをみてみましょう。
どんなものを作るのかイメージを固めてから、どのエフェクトを使えばより効果的なのか考えると作業がしやすくなります。

 

スタイライズ

ill_effect01

上記の画像の上はエフェクトなし、下は[効果]‐[スタイライズ]‐[角を丸くする]を適用し、[効果]‐[スタイライズ]‐[ドロップシャドウ]で影をつけたものです。
同じフォントでもかなり印象が変わったことがわかるでしょうか?

ちなみに、[フィルタ]から[ドロップシャドウ]を選んだ場合は画像としてシャドウが生成され、シャドウの細かい設定を後から変えることはできなくなります。後からシャドウの大きさやぼかし具合などを編集したい場合は[効果]‐[スタイライズ]‐[ドロップシャドウ]を適用しましょう。

[効果]‐[スタイライズ]‐[角を丸くする]

角を丸くしてくれます。オブジェクトの角丸長方形を使用した場合は、変形ツールを使用した際に角の丸み具合の比率が変わってしまうことがあります。効果を使用した場合は、変形したくなっても比率は変わらずに済みます。

[効果]‐[スタイライズ]‐[ぼかし]

ぼかしの効果がつきます。ぼかしたい半径を設定できます。
適用したオブジェクトの変形と一緒にぼかしの効果を拡大することが可能です。
Photoshop効果の中にもぼかしがありますが、スタイライズのぼかしを適用した場合はオブジェクトをはみ出してぼかしの範囲が広がることはありません。

[効果]‐[スタイライズ]‐[落書き]

落書きしたかのような効果がつきます。ペンの細かさや幅などを設定できます。
落書きの効果を与えた後、さらに[パスの変形]や[アーティスティック]などの効果を重ねることでより質感を高めることが可能です。

[効果]‐[スタイライズ]‐[光彩(内側)]

オブジェクトが発光している、もしくは光を受けているような効果がつきます。
内側と外側でそれぞれ光彩の設定が可能です。
使用することでオブジェクトに立体感を与えることができます。逆に、オブジェクトが引っ込んでいるような表現をすることも可能です。

 

パスの変形

ill_effect02

上の二つが[効果]‐[パスの変形]‐[ラフ]を適用したものです。
同じ[ラフ]の効果でも上はポイントを[丸くする]、下はポイントを[ギザギザにする]の設定をしました。パスの変形では、このような詳細な設定が可能です。

ちなみに一番下は[効果]‐[パスの変形]‐[ジグザグ]を適用したものです。違う効果を適用しても、オプション設定の仕方によっては似たような効果になることがあります。いろいろな設定を試してみるといいでしょう。

[効果]‐[パスの変形]‐[ラフ]

手をふるわせて描いたかのような線の効果がつきます。
ふちの部分に丸みをもたせたり、ギザギザにさせます。
[スタイライズ]-[落書き]と組み合わせることで、より手書きっぽさを表現することが可能です。

[効果]‐[パスの変形]‐[ジグザグ]

オブジェクトの輪郭がジグザグします。
設定によってジグザグさせるレベルを変更することが可能です。
円形のオブジェクトを花や金平糖のような形に変形させることができます。

[効果]‐[パスの変形]‐[ランダム・ひねる]

水平方向と垂直方向それぞれに対してオブジェクトをひねったような効果を出すことができます。
設定次第で思わぬ変形を加えることが可能です。
変形後にぼかしの効果を加えることで、まるで煙のような表現が可能になります。

 

ワープ

ill_effect03

ワープはオブジェクトの形を変形させます。
水平方向と垂直方向にそれぞれ変形具合を設定することができるので、色々試して好みの形に変形させてみるとよいでしょう。

[効果]‐[ワープ]‐[円弧]

オブジェクトを放物線のような形状に沿うように変形できます。
入力値がプラスの場合は上に、マイナスの場合は下に弧を描きます。

[効果]‐[ワープ]‐[アーチ]

円弧と似ていますが、全体がアーチ状になります。
円弧と違い、オブジェクトを左右から押しつぶしたような形状に変化することが特徴です。

[効果]‐[ワープ]‐[旋回]

オブジェクトの中心を基準点とし、旋回しているような形状に変形させることができます。
水平の変形の値にプラスの数値を入れると時計まわり、マイナスの数値を入れると反時計まわりに変形します。

[効果]‐[ワープ]‐[上昇]

数値を入力することで緩急をつけてオブジェクトが上がっていく、もしくは下がっていくように変形させることができます。水平に数値を入力した場合は左から上または下に移動しているように変形します。

 

アーティスティック

ill_effect04

写真やイラストを絵画のような雰囲気に変化させたいときや、オブジェクトに質感を加えていきたいときなどに使用します。
単体で使用するというよりは、様々な他の効果に加えてより質感を高めたいときに利用することの方が多いです。
Photoshopを利用している人は、同様の効果を使用したことがあるかもしれません。

[効果]‐[アーティスティック]‐[粒状フィルム]

粒子をばらまいたような表現ができます。細かさや密度などがより詳細に設定可能です。
ざらっとしたような質感を与えたいときに使用すると便利です。

[効果]‐[アーティスティック]‐[粗いパステル画]

パステル画のような雰囲気になります。カンバスの設定によっても質感は変化します。
落書きしたようなアナログな雰囲気を表現したいときに役立ちます。

[効果]‐[アーティスティック]‐[粗描き]

緻密なタッチではなく、粗くぼかしてにじませたような表現になります。
上の画像は粗描きをテキストに適用したのでわかりづらいですが、写真やイラストに適用すると一目瞭然です。

 

テクスチャ

ill_effect05

オブジェクトを質感のある形状に変化させます。
その名前の通り、テクスチャ作りに使用できます。
今回は例としてテキストに効果を設定してみましたが、写真などに適用するとより複雑で面白い変化がみられます。

[効果]‐[テクスチャ]‐[クラッキング]

塗料のひび割れを表現します。
アスファルトなどのぼこぼこした表面の質感を作りたいときに使用することができます。

[効果]‐[テクスチャ]‐[ステンドグラス]

適用したオブジェクトにステンドグラスのような効果を与えます。
セルの大きさ、境界線の太さ、明るさの強弱を設定で変更することが可能です。

[効果]‐[テクスチャ]‐[パッチワーク]

正方形のタイルのような凹凸のある面に変化します。
タイルの大きさと深さを設定することができます。

 

さいごに

ill_effect06
ワープ(上昇)して変形させたテキストとブレンドツールを使用することで、動きと立体感を表現することができます。
似たような効果を「3D押し出し・ベベル」によって表現することも可能です。
効果の使い道やどこへ適用すべきなのかは、目指すデザインによって変わってきます。組み合わせによっては無限の表現が可能になると言っても過言ではありません。

エフェクトの使用法を試行錯誤すると、思わぬ使い方を見つけられるかもしれません。
ここに紹介したもの以外の効果も、実際にどんな表現ができるか試してみると面白いですよ。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【Vim】初心者にまず覚えてほしいコマンドまとめ