Illustratorでつくるグラデーションスウォッチ


いよいよ春めいてきましたね。今年の花粉は量がすごいので、今まで大丈夫だった人の中にも花粉症が発症された人もいるかもしれません。かく言うわたしは、昨夜、寝る前に飲んだ花粉症の薬が抜けきらなくて、頭がぼんやりしています。アレルギーの薬って扱いが難しいですね。

今回はIllustratorのチュートリアルをご紹介したいと思います。
微妙に変化するグラデーションはサイトやバナーのバックグラウンドにと何かと使えて重宝します。2008年に発売されたAdobe CS4のパッケージには、グリッドに配置されたスウォッチ(色見本)の微妙なグラデーション効果が使用されてました。という訳で、Illustratorを使って、スウォッチの色がグラデーションしていく効果を作成してみたいと思います。

新規ドキュメントを作成

幅640px、高さ140px、カラーモード:RGBで新規ドキュメントを作成します。

最初のスウォッチを作成

長方形ツールを選択して、キャンバスをクリックします。ダイアログボックスで幅20px、高さ20pxに設定してOKをクリックします。四角形を線なしにして、塗りを設定します。作例では緑色にしてみました。

スウォッチを配置

スマートガイドを有効にします(表示 > スマートガイド または Cmd/Ctrl + U)。四角形(以下スウォッチと呼びます)を選択して、ドキュメントの左上に移動します。

スウォッチを複製

オブジェクト > 変形 > 個別に変形 または Cmd/Ctrl + Option/Alt + Shift + Dを押下します。スウォッチを620px右へ移動させたいので、ダイアログボックスで移動:水平方向620pxと入力します。コピーを押してスウォッチを複製します。

ブレンドツールでグラデーション効果を作成

複製したスウォッチを別の色で塗ります(作例では黄緑色にしてみました)。ツールボックスからブレンドツールを選択します。最初のスウォッチの右下をクリックして、Option/Altキーを押した状態でもうひとつのスウォッチの右下をクリックします。

ブレンドオプションのダイアログボックスで間隔:ステップ数を選び、30と入力して、OKを押します。

ステップ数の値は簡単な計算で割り出せます。作例では、640px幅のドキュメントに20pxの四角形を用いました。640を20で割ると32です。既に配置されている二つの四角形を引くと30になります。ブレンドツールを用いた結果(以下、ブレンドと呼びます)は、下の図のようになります。

ブレンドの複製

選択ツールで最初のスウォッチをグラブしてブレンドを選択します。ブレンドを真下にドラッグします。ドラッグするときは、Opiton/Alt(ドラッグしつつブレンドを複製)と同時、Shift(確実に垂直に移動)を押下します。オリジナルのブレンドの真下にコピーしたブレンドを移動できたら、マウスを離します。

Cmd/Ctrl + Dを5回押してブレンドの行の複製を5回行います。下図に示したような結果になるはずです。

スウォッチを調整

ダイレクト選択ツールを使って、各行の最初や最後のスウォッチを選択して色を少しずつ変更して縦方向に微妙なグラデーション効果を与えていきます。どのように変化するか結果を確認しながら調整すると良いでしょう。納得のいくグラデーションに調整ができたら完成です。

今回の記事は、veerle’s blogの記事を参考に書かせて頂きました。
皆さまのご参考になれば幸いです。


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。