ImageMagickを使ってコマンドラインでメニューアイコンを作成

2015/06/22 2018/04/07

画像を作成するとき、普通ならペイントやPhotoshop、イラストレーター、Pictbearなどの画像加工，ドローソフトを使うことになると思います。

ですが、場合によってはそんなことをした方が時間がかかるような画像作成もあるかと思います。

例えば、コレ。このサイトをスマートフォンで見たときのメニューアイコンです。（PCでもウインドウの幅を狭めれば同じように見られます。）

こんなタイプの画像だと、コマンドラインの方が簡単だったりします。

1 ImageMagickを使って図形画像の作成！
- 1.1 ImageMagickというソフトウェア
- 1.2 コマンドラインだと何がいいの？
2 円の描画
3 メニューアイコンをAutoHotkeyで実現

ImageMagickを使って図形画像の作成！

このアイコン、ごく単純で図形的です。どんな図形が使われているか数式で簡単に書けるレベルです。

このような画像をちゃんと作るときには、円や棒の大きさ、間隔、色などを試行錯誤して作っていくことと思います。これを通常の画像作成ソフトで作ると、一部の変更を全体に反映させるために結構な手間がかかってしまいます。

ImageMagickというソフトウェア

ImageMagickとは、画像フォーマットの変換やサイズ変更、加工などの各種画像操作を行うソフトウェアスイートです。（参考：Wikipedia「ImageMagick」）

よくあるシチュエーションとしては、「bmpをpngに変換したい」とか「画像サイズを変更したい」とか「JPEGで圧縮したい」とかいう場合に、コマンドラインで実現します。

コマンドラインだと何がいいの？

知っている方には当たり前のことかもしれませんが、コマンドラインでやる利点は大量のファイルを一斉に処理できることです。

「1000枚の写真を全部800x800以下にしたい」とか「1000枚の写真全部に [Photo by CROSS] と文字を入れたい」みたいな処理を一発でできます。

円の描画

まずは簡単な例です。ImageMagickの「convert」というプログラムを使って、円を描きます。convert.exeのある場所でコマンドプロンプトを開き、以下のコマンドを実行してください。

convert -size 480x320 xc:green -fill red -draw "circle 240,160 240,256" circle.png

バングラデシュの国旗ができました。

メニューアイコンをAutoHotkeyで実現

あとからサイズを調整したりできるように、大きさや長さは変数で持っておいた方がいいですよね。なのでいつも通り(？)AutoHotkeyで実現しました。スクリプトと同一ディレクトリに convert.exe を置いておきます。

; 画像の大きさ
width := 100
height := 100

; 色 背景は透過
color := "#F5F7FC"

; 円の半径
circleRadius := 4
; 棒の円弧の半径 棒の太さはこの2倍
lineRadius := 2

; 円の中心
x1 := 20
; 棒の左端
x2 := 33
; 棒の右端
x3 := 85

; 1本目の高さ
y1 := 25
; 2本目の高さ
y2 := y1 + (height - y1 * 2) // 2
; 3本目の高さ
y3 := height - y1

; 円
; [円の中心 x,y] [円周上の一点 x,y]
c1 := "-draw ""circle " x1 "," y1 " " x1 "," y1+circleRadius """"
c2 := "-draw ""circle " x1 "," y2 " " x1 "," y2+circleRadius """"
c3 := "-draw ""circle " x1 "," y3 " " x1 "," y3+circleRadius """"

; 棒
; [円弧部分を含む左上 x,y] [円弧部分を含む右下 x,y] [円弧の半径 x,y]
l1 := "-draw ""fill " color " roundRectangle " x2 "," y1 - lineRadius " " x3 "," y1 + lineRadius " " lineRadius "," lineRadius """"
l2 := "-draw ""fill " color " roundRectangle " x2 "," y2 - lineRadius " " x3 "," y2 + lineRadius " " lineRadius "," lineRadius """"
l3 := "-draw ""fill " color " roundRectangle " x2 "," y3 - lineRadius " " x3 "," y3 + lineRadius " " lineRadius "," lineRadius """"

; 全体を囲む線
strokeWidth := 3
r1 := "-draw ""fill none rectangle " strokeWidth "," strokeWidth " " width - strokeWidth "," height - strokeWidth """"

; 実行
Run, convert -size %width%x%height% xc:none -fill %color% -stroke %color% -strokewidth %strokeWidth% %c1% %c2% %c3% %l1% %l2% %l3% %r1% menu_black.png