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

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

Color Creator Templates

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」を開きます。

Photoshopのキャプチャ

Color Creator.psd

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

Photoshopのキャプチャ

ベースカラーの変更

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

Photoshopのキャプチャ

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

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

Photoshopのキャプチャ

ベースカラーの登録

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

Photoshopのキャプチャ

カラーパレットの完成

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

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

Photoshopのキャプチャ

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

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

Photoshopのキャプチャ

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

top of page

©2017 coliss