PhoneGapのスプラッシュ画像(デバイスx解像度別)をスクリプトで一括書き出し
掲題の通りの作業メモ。
■ 前提
* スプラッシュ画像は、中央にロゴがあり、周囲は好きに切り出して構わないようなデザインを前提。(※LINEなどと同様のスタイル。)
* 縦持ち固定のアプリ。(横持ちアプリにも合わせて作るなら、単純に正方形の画像から切り出せば良いだけではある)
■ 基本的な考え方
* 切り出し元画像として、縦横比が最も正方形に近いサイズでスプラッシュを作成。(1536x2008がちょうど良さげ)
* その画像を元に、切り出したい各サイズのアスペクト比に合わせ、
中央寄せで、横幅を任意の長さに切り取って書き出す。(※A)
* アスペクト比が変換された画像を、任意のサイズに縮小する。(※B)
* ※Aと※Bの操作は、imagemagickのconvertコマンドに複数オプションを指定することで1コマンドで実行できる。
■ コマンド
基本はこれ。
-unsharp部分のオプションは参照もとのコピペですが、このままで気にならないくらい綺麗に書き出せます。
ちなみに -verboseは、実行ログの標準出力への吐き出し用オプション。
convert -gravity center -crop {横幅2008pxに見立てたときの幅}x2008+0+0 -resize {出力時の横幅}x{出力時の高さ} -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} out.png
■ 必要サイズ
■ 使用コマンド
PhoneGapのルートディレクトリに移動して、
convert -gravity center -crop 1255x2008+0+0 -resize 200x320 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-ldpi-portrait.png
convert -gravity center -crop 1340x2008+0+0 -resize 320x480 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-mdpi-portrait.png
convert -gravity center -crop 1130x2008+0+0 -resize 720x1280 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-hdpi-portrait.png
convert -gravity center -crop 1130x2008+0+0 -resize 480x800 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-xhdpi-portrait.png
convert -gravity center -crop 1536x2008+0+0 -resize 1536x2008 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-ipad-portrait-2x.png
convert -gravity center -crop 1536x2008+0+0 -resize 768x1004 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-ipad-portrait.png
convert -gravity center -crop 1340x2008+0+0 -resize 640x960 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-iphone-portrait-2x.png
convert -gravity center -crop 1130x2008+0+0 -resize 640x1136 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-iphone-portrait-568h-2x.png
convert -gravity center -crop 1340x2008+0+0 -resize 320x480 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-iphone-portrait.png
以上、何かの足しになれば何よりです。