2015年8月28日金曜日

花子で作るUIToolbarアイコン

UIToolBarのアイコンはPNGのアルファチャンネルというものを使って描かなければならない。
この画像は特殊なので、一般的なグラフィックツールでは作成できない。

Photoshopが一般的らしいが有償である。無償ではgimpやinkscapeを使うらしいが共に英語版で、
しかも操作が直感でわからない(と思う)上に、gimpは非常に重いので過去に断念している。

Windows上で、なんとか花子や花子フォトレタッチという手慣れたツールで出来ないか調べた結果、出来た。以下にその方法をまとめる。
  1. グレースケールのPNG画像を作る。私は花子2013と花子フォトレタッチを使った。花子フォトレタッチでは、保存時にグレースケール、透過はなしを指定する。
  2. そのグレースケール画像を読み込み、花子フォトレタッチでネガ・ポジ変換をかける(画像>色>ネガ・ポジ変換)。これが意外と重要。
  3. ここからNetPBMのWindows版を入手する。グラフィック加工ツール群である。
  4. アーカイブの中からbinフォルダの下を適当な場所に展開、libの下も同フォルダに展開する。
  5. コマンドプロンプトを起動。set RGBDEF=./rgb.txtを実行。
  6. グレイスケール画像を透過マスクPNGに変換する方法に従って各ツールを実行していく。
これで作成した画像をiOSに読み込ませたらうまく行った。

各ツールの実行をバッチファイルにしてみた。これをツールと同じフォルダにal.batという名前(適当で構わない)で保存した場合、

  al pngファイル名 x幅 y幅

で、PNGファイル名は拡張子を付けず指定、その画像幅を後に指定する。
例えば64*32のicon.pngというファイルを 変換する場合、

 al icon 64 32

とすると、変換結果としてiconA.pngというファイルが出来る。これをUIToolbarに入れればよい。

これが出来たので、ようやくUIToolbarのアイコンが自作できるようになった。いや、今までも作ったことはあるけど、白黒の2値画像しか作れなかったので。その成果はX-BASIC'にて。

---↓ここからバッチファイル---

@echo off
if "%1"=="" goto ERR
if "%2"=="" goto ERR
if "%3"=="" goto ERR
set RGBDEF=./rgb.txt
pngtopnm %1.png > %1.pgm
ppmmake black %2 %3 > black.pgm
pnmtopng -alpha=%1.pgm black.pgm > %1A.png
del black.pgm
del %1.pgm
goto END
:ERR
echo al pngファイル名(拡張子は不要) x幅 y幅
:end
 
---↑ここまでバッチファイル---


おまけ。
iOSでPNGの透過を有効にするときは、256色にするか、インデックスカラーというものにしなければならない。普通にフルカラーで透過色を設定しても透過しない。
インデックスカラーへの変換は、フリーのgimpかPhotoshopで出来る。

gimpの場合は、画像>モード>インデックスカラー>255色で変換し、ファイル>エクスポートでPNGで出力し直す。



0 件のコメント:

コメントを投稿