UITabBarControllerのTabItem画像が表示されない!

UITabBarControllerを利用して画像が表示されなくてこまりました。


Tabbar Doesn't appear.

原因は画像データには alpha channel を含んでないとだめだそうで、よくよく調べるとalphaをグレースケール表示しているようでした。

例のごとく、
stackoverflow:Tab bar image icon doesn’t appear

Photoshopでalphaチャンネル付き画像データを作る

※Photosho CS6(Mac)
せっかくなのでPhotoshopを使って alpha 含むTabBarItem用のpng作成手順を残します。
alphaChannel000
最終的に Script > Export Layers to Files…を行うので、画像のようにレイヤー単位で画像を保持させておきます。
一番上のレイヤーのブラジル国旗をベースに作成をします。
alphaChannel001
Layer > Layer Mask > Revel all で真っ白なレイヤーマスクを追加。

alphaChannel002
Window > Channel で Channel を表示。Layer Maskを追加しているので(画像では黒だけど)白いチャンネルが表示され、非表示になってる。
Greenのチャンネルをコピーし、全体を非表示にしてから、Alphaだけを可視化(目のマーク)にする。
alphaChannel003
可視化したらGreenのチャンネルをペーストする。

alphaChannel004
ペーストしたら、可視状態をalphaを不可視化してRGBを可視化する。

alphaChannel005
完成はご覧の通り。

Screen Shot 0024-12-04 at 20.16.57
やったね!

ほめられデザイン事典 グラフィック・ワークス Photoshop & Illustrator

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です