creatersnest1

Illustratorのライブカラー機能でカラーバリエーションを素早く作ろう


Illustratorで文字やオブジェクトなどの色を付ける時に、いくつかのカラーバリエーションを作成する場合があるかと思います。そんな時にぜひとも利用したいのが 「ライブカラー機能」(オブジェクトの再配色) です。
2つのオブジェクトを見比べて、どっちのカラーを採用しようか迷ってる時などに非常に便利なこの機能。
ここではそんな便利な機能をご紹介したいと思います。

 

ライブカラー機能を使って、2つのバリエーション(オブジェクト)を作成しよう

無題.png1

① まずはじめに2つのオブジェクトを用意します。
ここではお店などで使えそうなオブジェクトを用意してみました。
グラデーションが混ざっていても構いません。
選択ツールを選択し、色の変更をしたいオブジェクトを選択します。

 

無題.png2

② 次に、コントロールパネルにある 「オブジェクト再配色」 ボタン 無題.png11 をクリックします。
すると、「オブジェクト再配色」 のダイアロボックスが開きます。

*** 「編集」 メニューをクリックし、 「カラーを編集」を選択 、「オブジェクトを再配色」 からも実行する事ができます。

 

無題.png3

③ 次に、ダイアロボックス内にある 「編集」 ボタンをクリックします。

 

無題.png4

④ 現在選択しているオブジェクトのカラーがカラーホイール(色相環)内にマッピングされます。
「ハーモニーカラーをリンク」 ボタン 無題.png12 をクリックします。

 

5

⑤ 上の画像の赤い〇(まる)で囲った 「カラーマーカー」 をドラッグすると、それにともない、
他のカラー(ここではグリーン)も連動して変色します。
実際のオブジェクトのカラーを見ながら、お好みのカラーになるまで続けます。

 

無題.png6

⑥ 個別に、連動せずに変色したい場合は、 「ハーモニーカラーをリンク」 ボタン 無題.png12 の選択を解除し、
カラーマーカーをドラッグして、個別に変更します。

 

無題.png6.png7

⑦ お好みのカラー設定を作成できたら、「新規カラーグループ」 ボタンをクリックし、カラーの設定は終了です。

 

無題.png8

どちらか見比べる時にとても見比べやすいですね。

 

 

カラーバランス調整機能を使って色合いを変更する

先ほどは、ライブカラー機能を使ってスピーディーにカラーバリエーションを作りりました。
今度はカラーバランス調整機能を使ってカラーバリエーションを作る方法をご紹介します。
ただし、今度はグラデーションがかかったオブジェクトには思うように調整できませんのでご注意下さい。

グラデーションが設定されている場合は 「 オブジェクト 」 メニューをクリックし、
「 分割・拡張 」 を選択すればOKです。

 

無題.png1

① 先ほどと同じカラーのオブジェクトを用意します。
変色したいオブジェクトを選択します。

 

 

無題.png9

② 「 編集 」メニューを選択し、「 カラーを編集 」 、「 カラーバランス調整 」をクリックします。

 

無題.png10

③ カラー調整ダイアログが開いたら、「 プレビュー 」 にチェックを入れ、
シアン、マゼンタ、イエロー、ブラックのスライダーを動かし、色を調整します。

お好みのカラーに変色したところで、「OK 」 をクリックし、色の調整は終了です。

 

 

 

まとめ

いかがでしたでしょうか? とっても簡単な2つの機能をご紹介させていただきました。
この作業を繰り返し実行すれば、3つ4つのオブジェクトを作り、スピーディーにカラーバリエーションを素早く作成する事ができます。みなさんも是非お試し下さい。

 

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

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

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


Next Article【初心者にも優しい!】WordPressでレスポンシブのサイトを作るときに使えるテーマまとめ