ImageMagickを使ってカラーコードからPNG/GIF/JPEG画像を生成する

f:id:syonx:20150518213144p:plain

ImageMagickのインストール (Mac)

$ brew info imagemagick
imagemagick: stable 6.9.1-1 (bottled), HEAD
http://www.imagemagick.org
$ brew install imagemagick

バイナリ版

画像生成の基礎

$ convert -size 100x100 xc:#FF0000 red.png

※ 出力ファイル名の拡張子を .jpg にすると JPEG.gif にすると GIF になる。他もできるかも

f:id:syonx:20150518211403p:plain

たくさんのカラーコードから一括生成する

マテリアルデザインのカラーコードをサンプルに。

f:id:syonx:20150518214017p:plain

いつぞや作ったブックマークレットの jquerify を使って jQuery を読み込み、 Chrome Dev Tools を使ってカラーコードだけ抽出します。

$('.color-group .hex').each(function(){ console.log(this.innerText); })

f:id:syonx:20150518214533p:plain

これを使って Ruby で画像生成コマンドを叩いた例

file = File.open('materialcolors.txt')
file.each_line do |hex|
  hex.gsub! "\n", ""
  cmd = "convert -size 15x15 xc:##{hex} result/#{hex}.png"
  system(cmd)
end

f:id:syonx:20150518213144p:plain

ヮ(゚д゚)ォ!