頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


ナビゲーションバーのサンプル画像を作ってみた

Xcode?フレームワーク?ってグラフィックデザイナーさん用に、ナビゲーションバーの一覧を作ってみたってお話だよ。

現在作成中の時計アプリの骨組みがだいぶできてきたので、某仕事サイトでデザインお願いしますって依頼をしようとしてるんだ。

時計アプリのスクリーンショット

スクリーンショットはこんな感じなんだけど、見ての通り画面上部にナビゲーションバーがあるんだ。
このナビゲーションバーの色は単にtintColorを設定するだけなんだけど、それをグラフィックデザイナーさんに決めてもらうってのはなかなか難しいよね。
もちろんXcodeを使ったことのあるデザイナーさんなら大丈夫だろうけど、たいていのデザイナーさんは普通開発ツールのXcodeなんて使わないでしょ。
色やテキストを入力したらそれに相当するナビゲーションバー画像を出力する、なんてFlashを使ったサイトがありそうなもんだけど見つからないし、いっそ自分で作ろうかって思ったけど、実はtintColorを設定するとどういう具合にバーの部分の色(グラデーション)を設定しているのかさっぱりわからないんだよね。

そんなわけでFlash自作案はとっとと捨てて、iOSシミュレータ上でRGBの値を適当に変えてpng画像を出力するコードを書いたんだ。
各値0~1.0を0.2ごとに振るから6通りで、3色あるから6×6×6で216個にもなっちゃったよ。
それをWeb上に乗せるとこんな感じ。

ナビゲーションバーのサンプル


これは単に一部のスクリーンショットなんだけどね(画像クリックで大きいのを表示)。
このページをデザイナーさんに見てもらっておおよその色を決めてもらい、最終的に微調整してもらえばいいのかなと。

実は最新のイラストレーターなら完全にシミュレートできまっせ、なんてことはないよねっ?!

<< Siriだってチキン南蛮は知っているのだ   TopPage  iPadで断捨離 >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/582-c37efd44




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad