[kz] Material DesignのカラーパレットをGIMP形式に
- 2014.12.08
- engineering
- デザイン
こんにちは、@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」をインストールします。
|
1 |
$ anyenv install ndenv |
「ndenv」がインストールできたら、今度は「ndenv」を使ってnode.jsをインストールします。現在のCurrent Versionは0.10.33とのことなので、以下のコマンドでインストール。
|
1 |
$ ndenv install 0.10.33 |
上のインストールのコマンドだけでは有効になっていないので、インストールしたバージョンのnode.jsを以下のコマンドで有効にします。
|
1 |
$ ndenv global 0.10.33 |
念のため、有効になったかどうかを確認します。正しくバージョンが表示されればOKです。
|
1 2 |
$ node -v v0.10.33 |
node.jsのモジュールをインストールするためのnpmも合わせてインストールされているはずなので、念のため確認します。
|
1 2 |
$ npm -v 1.4.28 |
ここまできたら、いよいよ「kuler2gpl」をインストールしていきます。
インストール方法の詳細は、こちらのサイトにて確認
さぁ、以下のコマンドでインストールです。
|
1 |
$ npm install -g kuler2gpl |
「kuler2gpl」も上のコマンドだけでは、パスが通っているディレクトリにコマンドが配置されていないので、以下のコマンドで、パスの通っているディレクトリに「kuler2gpl」を配置します。
|
1 |
$ ndenv rehash |
ヘルプのコマンドを入力してみて、説明が表示されればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$ 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」がインストールできたので、いよいよ、カラーパレットを変換してみます。
変換は以下のコマンドです。
|
1 |
$ kuler2gpl -i ＜ase形式のカラーパレットファイル＞ |
ダウンロードしておいたMaterial Designのカラーパレットを指定して変換します。
画面にMaterial Designっぽいカラーが表示されました。
拡張子がgplになったファイルも出来上がっています！
GIMPにカラーパレットをインポート
できあがったgpl形式のカラーパレットをGIMPにインポートします。
GIMPへのインストールは、[ウィンドウ]->[ドッキング可能なダイアログ]->[パレット] を選択して、パレットダイアログの右クリックメニューから[パレットのインポート]を選択します。
パレットファイルに変換したgpl形式のカラーパレットファイルを選択すると、右側にMaterial Designっぽいプレビューが表示されますので、[インポート」ボタンを押します。
Material Palette、入りました！
まとめ
今回は、Googleが提案するMaterial Designのガイドラインに沿ったカラーパレットをGIMPで使えるようにしてみました。
こんな面倒臭いことしたくないというかたはこちらからダウンロードできますのでご利用ください。
少しずつ、少しずつですが、Material Designに近づいていきます！
ではっ！
-
前の記事
[kz] AppHtml for MarsEditをセットアップ 2014.12.07
-
次の記事
[kz] KickstarterからAnchor Blaceletが届いた！ 2014.12.09
