k2-ikeda’s diary

iOS/Androidスマホアプリエンジニアの雑記帳

スマホアプリの作成に役立つかもしれないImage Magickの使い方

Image Magickとは

コマンドラインの画像編集便利ツール

インストール

Mac環境の場合

$ sudo port install ImageMagick

または

$ brew install imagemagick

インストールは時間のあるときにするのがよいと思います。Mid 2011のMac miniで大体30分位かかりました。

使い方

ファイル形式変換(単体)

$ convert in.png out.jpg

形式変換(まとめて)

jpg画像をまとめてpngに変換

$ mogrify -format png *.jpg

リサイズ

リサイズの基本

$ convert -geometry 横x縦! in.png out.png

※縦横比を維持する場合は"!"をつけない

こいつを利用するとスマホアプリのアイコンを用意するのが少しは楽になる

iOS用アイコンのリサイズ

変換用シェルスクリプト

使用法:変換元の画像を第一引数に食わせる

#!/bin/bash
# -------------------------
# iOS用のアイコンファイルを出力
# 使い方:第一引数に変換元の画像を指定して実行
# iOS5-7対応でユニバーサルな場合を想定
# -------------------------

sizes=("152" "144" "120" "114" "100" "80" "76" "72" "58" "57" "50" "40" "29")

# アイコンファイルの出力
# -------------------------
for size in ${sizes[@]}; do
    convert -geometry ${size}x${size}! $1 icon${size}.png
done

# iTunesArtworkの出力
# -------------------------
convert -geometry 512x512! $1 iTunesArtwork.png
convert -geometry 1024x1024! $1 "iTunesArtwork@2x.png"

Android用アイコンのリサイズ

#!/bin/bash
# -------------------------
# Android用のアイコンファイルを出力
# 使い方:第一引数に変換元の画像を指定して実行
# -------------------------

# 出力先ディレクトリ名
dirs=("drawable-xxxhdpi" "drawable-xxhdpi" "drawable-xhdpi" "drawable-hdpi" "drawable-mdpi")

# 出力サイズ
sizes=("192" "144" "96" "72" "48")

# 出力先ディレクトリ作成
# -------------------------
for dir in ${dirs[@]}; do
    if [ ! -d ${dir} ]; then
        mkdir "${dir}"
    fi
done

# アイコンファイルの出力
# -------------------------
i=0
for dir in ${dirs[@]}; do
    convert -geometry ${sizes[$i]}x${sizes[$i]}! $1 ${dir}/ic_launcher.png
    let i++
done

切り抜き

$ convert -crop 切りだし横幅x切り出し縦幅+切り出し起点x+切り出し起点y in.png out.png

画像生成

アプリのデザインが流動的などの理由でとりあえず適当な画像を当てておきたい場合などに

指定サイズの単色画像を出力

赤色で塗りつぶし200x200のpng画像を出力する場合

$ convert -size 200x200 xc:"#FF0000" out.png

真ん中に文字列の入った画像

$ convert -size 192x192 -background "#0000FF" -fill white -gravity Center -pointsize 30 label:"text" text.png
  • -background 背景色
  • -fill 文字色
  • -gravity 文字の配置
  • -pointsize 文字サイズ
  • label 文字列

その他画像の加工

透明色の指定

拾ってきたクリップアートに透過色が指定されていなかった場合などに

$ convert -transparent 透明指定色 in.png out.png