読者です 読者をやめる 読者になる 読者になる

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

 

■ 必要サイズ

iOS, Androidのみを対象

f:id:naosk8:20160228160739p:plain

 

■ 使用コマンド

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

 

以上、何かの足しになれば何よりです。