指定したカラーをベースに、Webデザインやイラストで使えるカラーパレットや美しいグラデーションを生成できるテンプレート -Color Creator Templates

指定したカラーをベースに、そのカラーからバリエーションを調査し、Webデザインやイラストで使えるカラーパレットや美しいグラデーションを生成できるテンプレートを紹介します。

Color Creator Templates -GitHub

Color Creator TemplatesはBSDライセンスで利用でき、3つのアプリ用にカラーテンプレートが用意されています。

• Photoshop
• Sketch
• Affinity Designer

Color Creator Templatesの使い方

Photoshop用のカラーテンプレートを例に使い方を紹介します。

Color Creator Templatesではテンプレートを使用して、カラーのバリエーションを調査し、カラーパレットを作成できます。通常のカラーツールでは見いだせない2, 3色のカスタムカラーのブレンドモードを使用することもできます。

まずは、ダウンロードしたファイルを解凍し、Photoshopフォルダ内の「Color Creator.psd」を開きます。

Color Creator.psd

ベースカラーは、「Color 1フォルダ」内の「Color 1」や「Color 2フォルダ」内の「Color 2」のカラーを編集することで変更できます。

ベースカラーの変更

ベースカラーを2017年のトレンドカラー「グリーナリィ」にしてみました。
参考: 2017年のトレンドカラー

ベースカラーをグリーナリィに

ベースカラーを左下のSwatchレイヤーに登録します。
「Swatches.png」フォルダ内の「Swatch」レイヤーをダブルクリックし、スポイトツールでカラーを抽出し、適用します。

ベースカラーの登録

あとは、キャンバス上のブランドされたカラーをSwatchレイヤーに登録します。

カラーパレットの完成

グラデーションのステップ

Color Creator Templatesでは、グラデーションで使用されるステップの数を制御するポスタライズ調整レイヤーが用意されています。デフォルトではオフになっており、グラデーションはスムーズな移行となっています。

デフォルトのグラデーション

ポスタライズ調整レイヤーはレイヤーの検索（名前）から「#steps」で表示されます。オンにすると、各グラデーションの移行を段階的に表示します。

ポスタライズ調整レイヤー