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

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に保存してあります。
GIMP Palette
Name: Android ICS tones
Columns: 10
#
# The original version of this color palette is the color palette of Android 4.0 by Google.
# http://developer.android.com/design/style/color.html
#
51 181 229 33B5E5
170 102 204 AA66CC
153 204 0 99CC00
255 187 51 FFBB33
255 68 68 FF4444
0 153 204 0099CC
153 51 204 9933CC
102 153 0 669900
255 136 0 FF8800
204 0 0 CC0000
226 244 251 E2F4FB
197 234 248 C5EAF8
168 223 244 A8DFF4
138 213 240 8AD5F0
109 202 236 6DCAEC
80 192 233 50C0E9
51 181 229 33B5E5
44 177 225 2CB1E1
36 173 222 24ADDE
29 169 218 1DA9DA
22 165 215 16A5D7
15 161 211 0FA1D3
7 157 208 079DD0
0 153 204 0099CC
240 248 219 F0F8DB
226 240 182 E2F0B6
211 233 146 D3E992
197 226 109 C5E26D
182 219 73 B6DB49
168 211 36 A8D324
153 204 0 99CC00
146 197 0 92C500
138 189 0 8ABD00
131 182 0 83B600
124 175 0 7CAF00
117 168 0 75A800
109 160 0 6DA000
102 153 0 669900
255 228 228 FFE4E4
255 202 202 FFCACA
255 175 175 FFAFAF
255 148 148 FF9494
255 121 121 FF7979
255 95 95 FF5F5F
255 68 68 FF4444
248 58 58 F83A3A
240 49 49 F03131
233 39 39 E92727
226 29 29 E21D1D
219 19 19 DB1313
211 10 10 D30A0A
204 0 0 CC0000
255 246 223 FFF6DF
255 236 192 FFECC0
255 227 160 FFE3A0
255 217 128 FFD980
255 208 96 FFD060
255 198 65 FFC641
255 189 33 FFBD21
255 182 28 FFB61C
255 174 24 FFAE18
255 167 19 FFA713
255 160 14 FFA00E
255 153 9 FF9909
255 145 5 FF9105
255 138 0 FF8A00
  1. 丁寧に書いてありますね。素晴らしい。

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

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

    返信 削除

Designed by Sneeit.Com
名前

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