[kz] Material DesignのカラーパレットをGIMP形式に

NO IMAGE

こんにちは、@kazscapeです。

以前にMaterial Designに興味を持ち始めたと投稿しました。

[kz]Material Designに興味津々 | kazscape

Material Designは「フラット」な感じが特徴ですが、その「フラットさ」のベースとなる「色」を取り入れてみたいと思いました。

カラーパレットの入手

Material Designの色ですが、Googleから「カラーパレット」がダウンロードできます。

Color – Style – Google design guidelines

ダウンロードしたzipファイルを解凍すると、AdobeのIllustratorとPhotoshop用のカラーパレットがあります。

では、このカラーパレットを使ってみたいと思うのですが、私、IllustratorもPhotoshopも持ち合わせておりません。チーーーン。。

形式変換にトライ!

ここであきらめては男がすたる!ということで、AdobeのIllustratorとPhotoshopを購入しましょう!って、とても高くて私のこずかいでは買えません。。。

ということで、ダウンロードしたカラーパレットをフリーで使えるPhotoshopのようなソフト「GIMP」で使える形式に変換してみます。

kuler2gplをセットアップ

AdobeのIllustratorやPhotoshopのカラーパレットの形式はaseという形式、GIMPのカラーパレットはgplという形式です。

この変換をしてくれるツールはないかと検索をしたところ「kuler2gpl」というツールが良さそう。

ということで、まずはこのツールが使える環境をセットアップしてみます。

「kuler2gpl」はnode.jsの環境で動作するとのことなので、node.jsの環境をまずはセットアップ。

先日構築した「anyenv」がここで活きてきます。

[kz]anyenvで開発環境を整えてみた。 | kazscape

「anyenv」の以下のコマンドで、まずはnode.jsの環境を管理する「ndenv」をインストールします。

「ndenv」がインストールできたら、今度は「ndenv」を使ってnode.jsをインストールします。現在のCurrent Versionは0.10.33とのことなので、以下のコマンドでインストール。

上のインストールのコマンドだけでは有効になっていないので、インストールしたバージョンのnode.jsを以下のコマンドで有効にします。

念のため、有効になったかどうかを確認します。正しくバージョンが表示されればOKです。

node.jsのモジュールをインストールするためのnpmも合わせてインストールされているはずなので、念のため確認します。

ここまできたら、いよいよ「kuler2gpl」をインストールしていきます。

インストール方法の詳細は、こちらのサイトにて確認

kuler2gpl

さぁ、以下のコマンドでインストールです。

「kuler2gpl」も上のコマンドだけでは、パスが通っているディレクトリにコマンドが配置されていないので、以下のコマンドで、パスの通っているディレクトリに「kuler2gpl」を配置します。

ヘルプのコマンドを入力してみて、説明が表示されればOKです。

gplに変換

無事に「kuler2gpl」がインストールできたので、いよいよ、カラーパレットを変換してみます。

変換は以下のコマンドです。

ダウンロードしておいたMaterial Designのカラーパレットを指定して変換します。

画面にMaterial Designっぽいカラーが表示されました。

拡張子がgplになったファイルも出来上がっています!

GIMPにカラーパレットをインポート

できあがったgpl形式のカラーパレットをGIMPにインポートします。

GIMPへのインストールは、[ウィンドウ]->[ドッキング可能なダイアログ]->[パレット] を選択して、パレットダイアログの右クリックメニューから[パレットのインポート]を選択します。

パレットファイルに変換したgpl形式のカラーパレットファイルを選択すると、右側にMaterial Designっぽいプレビューが表示されますので、[インポート」ボタンを押します。

Material Palette、入りました!

まとめ

今回は、Googleが提案するMaterial Designのガイドラインに沿ったカラーパレットをGIMPで使えるようにしてみました。

こんな面倒臭いことしたくないというかたはこちらからダウンロードできますのでご利用ください。

少しずつ、少しずつですが、Material Designに近づいていきます!

ではっ!