Adobe Kulerの使い方

Kulerの呼出し

IllustratorやPhotoshopの場合、

kuler01

[ウィンドウ]→[エクステンション]→[Kuler]を選

ぶとKulerのパネルが出現する。

 

 

kuler02

参照画面

このパネルには、WebアプリケーションのKulerと同じく、インターネット上で共有されているテーマが表示され、ワンクリックですぐにスウォッチとして取り込める。

また、自作のスウォッチもKulerに即アップロードできるので「自宅と職場のマシンにインストールしてあるPhotoshopのスウォッチを統一したい」なんて場合にも、Kulerを介して手軽にできる。意外に使える便利機能だ。

 

 

 

 

 

作成画面

kuler03

カラーモードのプリセット : Kuler カラールール(Analogous、Monochromatic、Triad、Complementary、Compound、Shades) は色彩理論に基づいています。ベースカラーとカラールールを選択して調和のとれたテーマを素早く作成できます。

カラーホイール  : c のマーカーがベースカラーとなりますが、カラーモードのプリセットの選択によりマーカー数が変更します。

カラーを表す英数字 : HSB、RGB、CMYK、LAB、HEX カラーモデルの整数値を入力することにより、テーマのカラーを調整できます。
カラーテーマの保存 :テーマのタイトルを入力して、「Save」をクリックします。保存されたテーマは画面上部の My Themes で管理、閲覧できます。

 

 

基本操作

Kuler パネルの作成タブには、テーマを作成または編集するための様々なツールが用意されています。Kuler サイトと同様に、カラールールやカラーホイール、整数値からカラーを設定することができます。

kuler05

 

 

 

 

 

 

 

 

 

作成したテーマを保存するには、Kuler パネル下部の「テーマを保存」をクリックし、名前を付けて保存します。保存したテーマは、「参照」タブの「保存済み」から使用することができます。

kuler06

 

 

 

 

 

テーマの作成

カラーホイールには5本のセレクターがあり、二重丸になっているセレクターがベースカラー、他のセレクターがサブカラーを示しています。

ベースカラー

ベースカラーは全体的なイメージとなる色で、もっとも多くの領域を占めるカラーです。 そこでベースカラーを変更すると、配色のセオリーに基づいたルールで他の色もそれに合わせて変化します。 明度を下げれば他の色の明度も低くなり、彩度を変えれば他の色の彩度も変わります。

ウェブデザインでは通常ベースカラーが背景になるので、彩度を高かったり明るすぎると目が疲れやすく、原色など明るくて彩度の高い色は向きません。明るくても彩度の低い色を選びとよいでしょう。

サブカラー

サブカラーは彩度と明度は個別に変えられますが、色相を変えると他のサブカラーも同時に変化します。アソートカラー(ベースカラーに合わせる色)、アクセントカラー(目立たせる色)もこれに属します。

配色のセオリー

Analogues(アナロジー)は、類似色で配色するルールです。HSVのH(Hue:色相)の値の差が少ない色で統一感を出せます。Kulerでは5色まで選べるのでweb用にベースカラー、メインカラー、アクセントカラー、文字色、リンク色に対応させることが出来ます。

 

テーマの作成手順

ベースカラーをつくる

彩度が低く明度の高い赤を選びます。ベースカラーの彩度(HSVのS)を10くらいまで下げれば良いでしょう。

アソートカラー(メインカラー)をつくる

暖かいイメージを出したいので暖色寄りの色を。一番左の色を選びます。

アクセントカラーをつくる

リールが類似色相配色の場合には色相の離れた反対色ではなく、類似色でコントラストを変えてアクセントとします。右から1つ目か2つ目の色の彩度を上げた色がアクセントカラーです。HSVのSを72まで上げます。

文字の色をつくる

文字の色はベースカラーの明度を下げてつくります。ベースカラーの左隣の色の明度(HSVのV)を20まで下げます。文字色に真っ黒(#000000)や真っ白(#ffffff)を使わないのがポイントです。

リンク色をつくる

ウェブデザインでは青っぽい色の方がリンクとして認識されやすいので、ここだけカラールールを【Custom】に変更し、一番右のカラーを変更します。 他の色と明度とトーンを合わせるため、まずアクセントカラーに合わせます。その後、色相(HSVのH値)を青色に変更します。

 

画像をもとに自動的に配色パターンを作成

Web版のKulerの右上には「Create -from image」コマンドがあり、手持ちの画像ファイルをアップロードするか、もしくはFlickrの画像を指定するだけで、配色パターンが抽出できる。Webサイトのメインビジュアルとして据えたい画像があれば、それに合った配色パターンを決める事が出来る。

 

公開テーマの利用

気に入ったテーマをクリックすると、テーマが上部に大きく表示され、中央部にはテーマの詳細な情報が並ぶ画面になる。この状態で右上のアイコンをクリックすると、Kulerの「お気に入り」への追加、テーマファイルのダウンロード、選択されたテーマをもとにした新たな配色パターンの作成が可能になる。

ダウンロードしたテーマファイルは、Adobe Swatch ExchangeAESという形式になっていて、PhotoshopやIllustratorなど、Adobe Creative Suite 2(CS2)以降の各アプリケーションでスウォッチとして取り込める。たとえば、Photoshopで利用する場合、ダウンロードしたASEファイルをドラッグ&ドロップでPhotoshopに放り込むだけですぐに使える。

 

参照サイト

Adobe Kuler の使用方法                 http://helpx.adobe.com/jp/creative-suite/kb/7875.html

もう配色には困らない!「Adobe Kuler」

http://ascii.jp/elem/000/000/207/207126/

Adobe Kuler を使い倒す!カラーテーマ作成から配色のテストまでの作業工程

http://unguis.cre8or.jp/design/1044

カテゴリー: 色の選択 タグ: , , , , , パーマリンク