Android 4.0 カラーパレットをInkscapeとGIMPに追加

Googleが2011年1月にはじめた、Android開発者のためのデザインポータルサイト Android Design の中の、 Color のページで、GIMPやInkscapeに追加できるカラーパレットをダウンロードすることができます。 ここではGIMPとIn...

Googleが2011年1月にはじめた、Android開発者のためのデザインポータルサイト Android Design の中の、Color のページで、GIMPやInkscapeに追加できるカラーパレットをダウンロードすることができます。
ここではGIMPとInkscapeについて、次のことを解説します。
  1. パレットをダウンロードする
  2. Inkscapeにパレットを追加する
  3. GIMPにパレットを追加する
  4. 濃淡のバリエーションを追加したパレット(おまけ)
※対象OSはWindows7とLinux (Ubuntu 11.10)

1.パレットをダウンロードする


下記ページ中ほどの「Download the swatches」をクリックしてファイルをダウンロードします。
http://developer.android.com/design/style/color.html

ダウンロードしたファイルを解凍すると、次の4ファイルが含まれています。
ファイル名ファイルの形式
android-ics.acoAdobe COlor (Photoshopの色見本ファイル)
android-ics.aseAdobe Swatch Exchange
android-ics.gplGIMPカラーパレット
values.txtテキストファイル

この中で使用するのは、android-ics.gplです。
InkscapeもGIMPと同じGIMPカラーパレット形式を採用しているためです。


2.Inkscapeにカラーパレットを追加する


Inkscapeにカラーパレットを追加するには、下記のフォルダに.gplファイルを配置します。
  • Windows7の場合
    • C:\Program Files (x86)\Inkscape\share\palettes
  • Linux (Ubuntu 11.10)の場合
    • /usr/share/inkscape/palettes

Inkscapeに追加したパレットを表示するには、いったんInkscapeを再起動し(起動していたら)、ページ下部のパレットの右にある三角をクリックしてパレットの一覧を表示し、そこから「Android ICS」を選択します。

パレットを選択したところ。



3.GIMPにカラーパレットを追加する


GIMPにカラーパレットを追加するには、 下記のようなフォルダに.gplファイルを配置します。
  • Windows7の場合の例(どちらか)
    • C:\Users\ユーザー名\.gimp-2.6\palettes
    • C:\Program Files (x86)\GIMP-2.0\share\gimp\2.0\palettes
  • Linux (Ubuntu 11.10)の場合の例(どちらか)
    • /home/ユーザー名/.gimp-2.6/palettes
    • /usr/share/gimp/2.0/palettes
バージョンによってディレクトリが違うようなので、詳細はGIMPの設定を確認してください。

編集 > 環境設定 で環境設定ダイアログを表示し、フォルダ > パレット で 確認できます。



所定のフォルダに.gplファイルを配置すると、Inkscapeと同じようにパレットが使えるようになります。

追加したパレットを選択するには、まず、GIMPを再起動します(起動していたら)。

次に、メニューから
ウィンドウ > ドッキング可能なダイアログ > パレット
をクリックしてパレットウィンドウを表示します。

いちばん上に「Android ICS」が表示されています。これを選択します。

次に、パレットを使うには、たとえばツールボックスウィンドウから描画色の変更をクリックします。赤い囲みの部分です。

描画色の変更ウィンドウのタブから、パレットを選択します。赤い囲みの部分です。
パレットを選択すると、さきほど追加したパレットが表示されます。


【トラブルシューティング】
追加したパレットをGIMPで使ってみて、色が9色しかなかった場合の対応方法

私の環境では、Windows7 と Ubuntu の両方でこの現象が発生したので、対応方法を書きます。
この現象はInkscapeでは発生せず、GIMPでのみ発生しました。

まず、対象の状態は、
(1)パレット名の後の色数が9になっている。10になっていれば、以下の手順は必要ありません。

(2)描画色を変更等のウィンドウでパレットを表示したとき、9色しか表示されない。
本来なら、濃い黄色の後に濃い赤が表示されるところ、表示されていない状態です。

この場合、android-ics.gplファイルをテキストエディタで開いて、いちばん最後に改行を入れます。

元のファイル(データ行の最後に改行がない)
(前略)
255 145 5 FF9105
255 138 0 FF8A00

変更後のファイル(データ行の最後を改行したところ)
(前略)
255 145 5 FF9105
255 138 0 FF8A00
 
これで10色使えるようになります。またGIMPを再起動して確認してみてください。


4.濃淡のバリエーションを追加したパレット


公式のパレットは、ダウンロードページ上部の基本色と濃色のみで、ページ下部の濃淡のバリエーションは含まれていません。
そこで、ページ下部の濃淡のバリエーションを追加したパレットを作成してみました。
下記のテキストを拡張子.gplで保存すれば、上記の手順でGIMPとInkscapeに追加できます。パレットの名前は「Android ICS tones」です。
このパレットはGistに保存してあります。

COMMENTS

BLOGGER: 3
  1. 丁寧に書いてありますね。素晴らしい。

    返信削除
    返信
    1. さくらさん
      コメントありがとうございます。
      内容が多すぎたかな……とも思ったのですが、
      そう言っていただけてとてもうれしいです。

      削除
  2. GIMPへの導入方法やInkscapeへの導入方法が詳しく書かれていて、とても助かりました。
    また階調色の情報まで公開してくださり、ありがとうございます。

    返信削除

名前

101mm,1,Acer Aspire one 752,4,Android,8,Arduino,2,BIOS,1,BOSE,1,Canon,3,DS,1,DVD,1,EF24-105 F4L IS USM,1,Eos 70d,4,EOS Kiss X7,4,Excel,4,GIMP,5,Git,3,Git Bash,3,HD60S,1,Inkscape,3,iPad,3,iPhone,3,Kindle,2,Lightroom,1,Office,2,PC,9,PDF,1,PHP,1,SONY,1,SSD,3,SSH,3,ThinkPad,17,ThinkPad R61e,2,ThinkPad X240,6,ThinkPad X260,10,TOEFL,1,TOEIC,5,VBA,6,VBScript,3,VMware player,1,WEB制作,4,Windows,7,Windows 10,6,Windows 11,1,オーディオ,2,カメラ,10,キャプチャ,1,パソコン周辺機器,2,パソコン部品,4,レビュー,1,レンズ,2,圧縮&解凍,3,英語,8,仮想環境,1,家庭学習,3,撮影機材,6,雑感,3,子育て,5,資格,14,情報処理技術者試験,5,中古,5,電子工作,2,電子書籍,2,動画,3,動画制作,4,変換,1,簿記,2,
ltr
item
勉強とガジェット: Android 4.0 カラーパレットをInkscapeとGIMPに追加
Android 4.0 カラーパレットをInkscapeとGIMPに追加
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRzIybfXMwY7RBKOLaw1ZSrhb3TamqxQMuVCRHnO8r-jovZyLrp1x0pytWpvhZevsHc2oXpGjJ0DJ-W800QBFei_os36R47ARBJazsgk0NqH0XHVohLJ6jef6UDdw1ycGLDHGgxL58ve7F/s400/pens-1803673_1920.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRzIybfXMwY7RBKOLaw1ZSrhb3TamqxQMuVCRHnO8r-jovZyLrp1x0pytWpvhZevsHc2oXpGjJ0DJ-W800QBFei_os36R47ARBJazsgk0NqH0XHVohLJ6jef6UDdw1ycGLDHGgxL58ve7F/s72-c/pens-1803673_1920.jpg
勉強とガジェット
http://tanaka-misaki.blogspot.com/2012/02/android-40-inkscapegimp.html
http://tanaka-misaki.blogspot.com/
http://tanaka-misaki.blogspot.com/
http://tanaka-misaki.blogspot.com/2012/02/android-40-inkscapegimp.html
true
8692194293250221214
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content