カテゴリー別アーカイブ: design

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

こんにちは、@kazscapeです。

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

http://kazscape.com/2014/11/kzmaterial-design%E3%81%AB%E8%88%88%E5%91%B3%E6%B4%A5%E3%80%85/ [kz]Material Designに興味津々 | kazscape

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

カラーパレットの入手

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

http://www.google.com/design/spec/style/color.html#color-color-palette 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」がここで活きてきます。

http://kazscape.com/2014/12/kzanyenv%e3%81%a7%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e3%82%92%e6%95%b4%e3%81%88%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82/ [kz]anyenvで開発環境を整えてみた。 | kazscape

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

 $ anyenv install ndenv 

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

 $ ndenv install 0.10.33 

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

 $ ndenv global 0.10.33 

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

$ node -v
v0.10.33

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

$ npm -v
1.4.28

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

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

https://www.npmjs.org/package/kuler2gpl kuler2gpl

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

 $ npm install -g kuler2gpl 

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

 $ ndenv rehash 

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

$ kuler2gpl -help
Node OK

  Usage: kuler2gpl [options]

  Options:

    -h, --help            output usage information
    -V, --version         output the version number
    -i, --inputDir [dir]  Input Directory

Converts Kuler color palette files to GIMP / Inkscape GPL files.  (:

gplに変換

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

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

 $ kuler2gpl -i <ase形式のカラーパレットファイル> 

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

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

MaterialDesignColorPalette1

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

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

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

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

MaterialDesignColorPalette3

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

MaterialDesignColorPalette6

Material Palette、入りました!

MaterialDesignColorPalette5

まとめ

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

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

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

ではっ!