2013年9月23日月曜日

StaccalのアイコンiOS7対応 (後編)


前回の「StaccalのアイコンiOS7対応(前編)」の続きです。
前編ではiOS6のアイコンをiOS7に置いた時の問題点を抽出しました。






後編では実際の製作過程をご紹介します。


アイコンのテンプレートをゲットする
iOS7アイコンを製作するに当たって、第一に必要なのはアイコンのテンプレートです。先に触れた通り、iOS7のアイコンの角丸は正円ではなく曲率が徐々に変化していくスーパー楕円(?)が使われています。

詳しくはこちらのブログで検証されていますが、とにかく自分で作るのは骨が折れそうです。
Start making iOS 7 Icons with the App Icon Template 3.0
以下に幾つかiOS7アイコンのテンプレートをピックアップします。



Photoshop用のPSDテンプレート、Pixel ResortのApp Icon Template
こちらはPhotoshop CS3以降対応で、Photoshop上でiOS7の各デバイス用サイズのアイコン、更にホーム画面やAppStoreアプリ上でのアイコンの見映までチェックする事が出来ます。



@fladdictさんのIllustrator用テンプレート。
実機サイズの120pxの10倍の1200pxで作られているので、10pxグリッドで作ればピクセルパーフェクトなアイコンを作る事が出来ます。
iOS7用のアイコン製作テンプレート(ピクセル最適化済)




@JackminikさんのPhotoshop用テンプレート。
Photoshop CC14.1のみサポートですが、アプリに必要なアイコン(アートワーク、iPhone、iPhoneRetina、iPad...)を10個全て出力してくれます。
iOS 7にも対応!10サイズのアプリアイコンを一度に書き出せるPSDテンプレート
v0.1  ひたすら作って試す
ここからはひたすら作って試しては直しての繰り返しになります。
何よりもここで重視したのは、iOS7のホーム画面に置いた時に調和するかどうかだったので、実際ホーム画面に置いて実機で確認しました。



まずはiOS7アイコンテンプレートで角丸に対して、アイコンの中の紙部分の角丸を合わせて(若干合ってませんが)、紙の色合いをもっと明るくしました。シャドウも極力抑えています。

更にページのカールのエフェクトは、とりあえずアイコン全体の様子を見るためにここでは無しにしてます。

ホーム画面に置いてみたところ、まだまだ浮いて見えます。
アイコンの縁が際立ってしまっているのと、文字が濃すぎるのだと思います。
v0.2

カレンダーの文字をもっと細くしてみました。
若干マシになった気がします。
v0.3

金属のリングの部分が強調し過ぎだったので、とりあえず一時的に取り除きました。あと、紙の大きさを拡げて、木目の面積を狭めました。

木目の面積が減った事により、ホーム画面で見た時のアイコンの縁の強調が弱くなったと思います。
v0.4

まだまだカレンダーの文字が浮いていたので、フォントをiOS7の標準フォントであるHelvetica Neue UltraLightに変更してみました。ホーム画面上での調和が一気に上がった気がします。
v0.5

カレンダーの文字の上部の週(SUN、MON、TUE...)の部分が浮いていたので、それぞれ1文字に変更しました。
v0.6

文字の位置を全体的に内側に寄せて、バランスを整えました。
違いが判りにくいのでGIFアニメ↓



あと、アイコンの縁のエンボスを取り除きました。やはりiOS7では縁の立体感が無い方が調和する気がします。
v0.7

中身が大分整った(気がする)ので、カレンダー上部の穴を復活させました。金属のリングはまだ保留。あと紙の角丸を修正して、アイコン全体の木目の枠を整えました。
v0.8

ここで紙部分のカールを復活します。
iOS6以前ではページの右下がめくれたようになっていたのですが、フラットに寄せる為にiOS7からは廃止しました。

実際にはここでめちゃくちゃ試行錯誤していたのですが、没頭して途中経過を残すのを忘れました・・
v0.9

ページのめくれ方がちょっと地味で、ホーム画面上では判りにくかったのでやや角度を付ける。
v1.0 完成

ちょっとやり過ぎだったので、もう少し抑えめに。
以上で完成です。


全体の工程を通してのGIFアニメ↓



BEFORE



AFTER




以上、StaccalのアイコンiOS7対応でした。

色々と突っ込み所もあるかと思いますが、iOS7アイコンとしての1stバージョンはこのような感じで出しました。

今回アイコンをフラット化する作業を通して、余計な情報を削ぎ落としていくプロセスを行っていた気がしました。どの要素を捨てて、何を残すかという選択を行っているうちに、アプリのキャラクターと再び向き合った様な気がします。

まだまだフラットなiOSの世界は扉が開いたばかりなので、トレンドも変化していくでしょうし、今後もちょくちょく手を加える事もあるかと思います。