バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[Illustrator]イラレのグラデーションを極める

皆様、ゴールデンウィークはいかがお過ごしだったでしょうか。

わたくしは2回バーベキューしました。バーベキュー大好きです。

でもその分体重がガッツリ増えました。今は減量中です。なんか年中減量している気がします。

スタッフ「ほ」です。

今日はイラストレーターのグラデーションネタです。

1.グラデーションの基本

まずは基本からおさらいしましょう。

基本グラデーション

オブジェクトを選択し、ツールパネル下部にあるこのマークをクリックするとグラデーションが適用されます。

グラデーションの適用

塗りと線、それぞれにグラデーションを適用することが可能です。(線へのグラデーションはCS6以降)

グラデーションは初期設定では線形(左端から右端にまっすぐに変化する)グラデーションになっています。

線状グラデーション

これを円形のグラデーションに変えるには「グラデーションパネル」を利用します。

グラデーションパネル

パネル内の「種類」を「線形」から「円形」に変更します。

種類を円形に変更

これで円形(中心から外側に向かって放射状に広がる)グラデーションになります。

円形グラデーション

グラデーションの向きは「グラデーションツール」で変更できます。

グラデーションツール

グラデーションツールで選択したオブジェクトの上をドラッグすると、ドラッグした長さと向きに合わせてグラデーションが変化します。

グラデーションツール

円形グラデーションの場合は、オブジェクト上でドラッグをすると中心から放射状に広がる円形の補助線が出てきて、それに合わせてグラデーションが変化します。

円形グラデーションでのグラデーションンツール

グラデーションのカスタマイズ(色の変更や追加)はグラデーションパネル下部で行います。

グラデーションパネル下部

現在適用されているグラデーション見本の下にある「グラデーションスライダー」というマーカーをクリックして「カラーパネル」から色を指定することで、スライダーで指定された色を入れ替えることができます。

グラデの色を入れ替える

スライダーとスライダーの間でクリックをすると、スライダーを追加することもできます。

グラデーションスライダーの追加

この「グラデーションツール」と「グラデーションパネル」を使うことで、ただの長方形を金属のように見せたり…

グラデーションの金属表現

円形を球体に見せたりできるようになります。
grad14

2.線へのグラデーション

Illustrator CS6からは線に対してもグラデーションが適用できるようになりました。

線にグラデーション

線形、円形どちらのグラデーションも適用できますが、残念ながらグラデーションツールでの向きや長さの変更はできません

ただし、グラデーションパネルを使っていくつかのコントロールが可能です。

上記の線に対してグラデーションをかけたオブジェクトで、パネル内にある「パスに交差してグラデーションを適用」をクリックすると……

パスに交差してグラデーションを適用

こんなパイプ状の表現ができます。

パスに交差してグラデーションを適用

グラデーションが線の太さ方向に対して適用されるため、このような表現になるんですね。

パスに交差してグラデーションを適用、の説明

続いて、ぐるぐる線を描いて、虹色のグラデーションを適用してみました。

ぐるぐる線に虹色グラデ

このグラデーションに対し、グラデーションパネルから「パスに沿ってグラデーションを適用」をクリックしてみます。

パスに沿ってグラデーションを適用

すると、グラデーションがぐるぐるの形状で変化するようになります。(外側が水色、中心の緑に向かってぐるぐるとグラデーションがかかっているのがわかりますか?)

パスに沿ってグラデーションを適用

3.より複雑なグラデーション

ここまでの説明が基本編です。ここから上級者向けになります。

さて、↓のようなグラデーションはどのように作ればいいでしょう?

複雑なグラデーション

なかなか複雑なグラデーションです。

これを実現するには、グラデーションメッシュ機能の力を借りることになります。

グラデーションメッシュは、メニューから追加する方法と「メッシュツール」を利用する方法がありますが、ここではツールでの方法をご紹介します。

メッシュツール

四角形のオブジェクトを1つ描きます。色はとりあえずベタ塗りで好きな色を塗っていただいてかまいません。

四角形を描く

メッシュツールに持ち替え、四角形の角にあるアンカーポイントをクリックします。

メッシュツールでアンカーをクリック

クリックしたアンカーポイントだけが本選択になったことを確認しましょう。

クリックしたアンカーだけが本選択に

この状態でカラーパネルを利用して「赤」を指定します。すると四角形の色が以下のように変化します。

右上が赤く変化した四角形

続いて、右下、左下のアンカーポイントもそれぞれクリックして水色、緑色を指定してみましょう。

四隅それぞれに色を指定した四角形

さて、なんとなーく、どういった機能かわかっていただけましたでしょうか。

メッシュツールでは、アンカーポイントそれぞれに色を持たせることができるのです。

正確には、アンカーポイントをメッシュツールでクリックした時点で「メッシュポイント」という特殊なポイントに変換されています。

隣り合ったメッシュポイントが持つ色同士でグラデーションが作成されます。

各メッシュポイント間でのグラデーション

メッシュツールで四角形の中心をクリックしてみましょう。メッシュポイントが追加されます。

四角形の中心にメッシュポイントを追加

このクリックだけで四角形の中心と、時計でいうところの12時、3時、6時、9時の位置、合計5か所にメッシュポイントが追加されます。

追加されたメッシュポイント

この5つのメッシュポイントにもそれぞれ色を指定することができますから、グラデーションはより複雑になっていきます。

より複雑化したグラデーション

なお、このメッシュポイントはそれぞれダイレクト選択ツールを利用してアンカーポイントのように編集できます。

4.メッシュを使ったイラスト作成

さて、ここから実践です。

今回の素材は、フード・フォトさんからお借りしました。ありがとうございます。食材の写真を中心に魅力的な写真が無料で使えるオススメサイトです。
食材・料理のフリー写真素材 無料画像のフード・フォト

バナナの写真です。

バナナの写真

このバナナの画像を下絵にして、トレース作業をしていきます。

メッシュでイラストを描画する場合は、ペンツールで輪郭を描くと後からメッシュポイントを追加した時に「あれ?」ってなることが多いです。

ためしにペンツールで輪郭を描いてからメッシュツールでポイントを追加してみました。

メッシュを追加すると残念な結果に

なんだかとっても残念な結果になりました。

どこから描き始めるか?どこにアンカーポイントを打つか?によってメッシュの入り方は異なりますが、いずれにせよ、先に輪郭を描くとうまくいきません。

そこで、おすすめなのが長方形をバナナ型に変形させていく方法です。

長方形を描いてバナナに重ねます。角度をそれとなくバナナに合わせてください(適当でいいです)

バナナに長方形を重ねる

メッシュツールでアンカーポイントをクリックしてメッシュポイントに変換します。

メッシュポイントへの変換

さて、ここから長方形を変形させていきますが、メッシュポイントを追加すると塗りを「なし」にすることができません。このままでは下絵であるバナナの写真が見えなくなってしまいます。

そんなときはレイヤーを利用しましょう。

今回はバナナの写真と長方形を別々のレイヤーに配置してあります。
長方形を配置しているレイヤーの目玉のマークをCtrlキー(Macは⌘キー)を押しながらクリックします。

目玉のマークをCtrl+クリック

すると目玉のマークが以下のように「恐ろしい子!」状態に変化します。

目玉のアイコンが変化

画面内を確認すると、長方形が輪郭線だけの表示になっていることがわかると思います。

長方形が輪郭だけの状態に

この状態で作業をするとトレースがとってもはかどるのでおすすめです。

作業に戻りましょう。

ダイレクト選択ツールを使って長方形をバナナの形に合わせていきます。

メッシュポイントに変換した際に、自動的にハンドルも生成されますので、上手に使っていきましょう。

バナナの形に変えていく

ただ、いかんせん長方形が元ではアンカーポイントが4つしかありませんから、バナナの形状を表現するにはポイントが足りません。

そこで、メッシュツールを使ってメッシュポイントを追加します。

メッシュポイントを追加する

追加したメッシュポイントを使ってさらに形状を出していきます。

バナナの形状を精密化

輪郭が作れたところで色を指定してみましょう。色はカラーパネルで作ってもいいですが、下絵の写真から拾っていくのが便利です。

手順としては、以下の通りです。

1.ダイレクト選択ツールでメッシュポイントを1つ選択する

アンカーポイントを選択

2.スポイトツールに持ち替え、ポイントの近くにある色をクリックで吸い上げる

スポイトツールで色を吸い上げる

3.レイヤーパネルで目玉のアイコンをCtrl+クリック(⌘+クリック)で表示に切り替え、色を確認する

レイヤーを表示に戻す

色を確認する

上記1~3を繰り返してすべてのポイントに色を入れていきます。

※次々とポイントに色を入れていく中で、スポイトツール⇔ダイレクト選択ツールの持ち替えが面倒です。
スポイトツールを持った状態でCtrlキー(Mac:⌘キー)を押すと、押している間だけダイレクト選択ツールになるので、上手に活用してみてください。

(この手順1~3はもうちょっと便利な方法があるのですが説明がさらに長くなるので割愛します。受講生の方は来校時にお声かけていただければ説明します)

すべてのポイントに色を入れました。

ざっくりと色が入った

雰囲気は出てきていますが、まだまだ続けます。

今回、バナナ上部の緑色~黄色への変化が本物とだいぶ違っています。

グリーン部分のグラデ比較

これは、本物のバナナが赤枠の狭い範囲で色が変化しているのに対して、イラスト側は青枠の広い範囲で色が変化しているためです。

色が変化している範囲

この色の変化の範囲を合わせるためにメッシュポイントを追加します。

メッシュポイントの追加

グラデーションの始点と終点をイメージした位置にメッシュラインができるといい感じです。形状は適宜ダイレクト選択ツールで調整しましょう。

追加したメッシュポイントに上記1~3の手順で色を入れていきます。

だいぶ近づいた

だいぶ近づきました。

次はバナナの面を出していきましょう。このグリーンの部分は下図A部分とB部分で色が違いますよね。

A面とB面で色が違う

そこで、メッシュポイントを追加してメッシュラインを下図のように2本追加します。

メッシュラインを2本追加

濃い緑色側のポイントには濃い緑、淡い緑側のポイントには淡い緑をスポイトツールで適用していきます。

適用後、以下のようになっていればOKです。

色を細かく指定して面を出していく

続いて黄色い部分です。

やっぱり特徴的なのは、この部分ですよね

バナナの角

ここのやや濃いめの黄色いラインのおかげでバナナの各面がわかりやすくなっています。

先ほど追加した2本のメッシュラインに、もう1本ラインを追加して、下図のように形状を整えます。

メッシュラインをさらに追加

3本線のうち、真ん中の線が濃い黄色のセンターを通るようにし、他の2本の線ではさみます。

スポイトツールを使って真ん中のライン上のポイントには濃い黄色を適用し、両サイドのポイントには淡い色を入れていきます。

結果、以下のようになればOKです。

黄色部分の面が出た

これらの作業を繰り返し、面を意識しながらメッシュポイントを追加し、細かく色を入れていきましょう。

バナナの下の影は別パーツとして作成すると楽ちんです。

完成クリックで拡大します

さぁ、出来上がりです。

いかがでしたでしょうか?

メッシュツールを利用することで、グラデーションでの表現幅がぐっと広がります。

ダイレクト選択ツールでのハンドル操作が一番のカギになります。

「そもそもダイレクト選択ツールが使えない…」という方は、ぜひバンフートレーニングスクールのイラストレーター講座へお越しください。
このブログを書いている私スタッフ「ほ」や、スタッフ「の」が丁寧にレクチャーいたします。

The following two tabs change content below.
アバター画像

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ