iOS7向けアイコンの角丸シェイプをほぼ確実に再現したPSDテンプレート公開。

icon_tmpl_ios7

WWDCで iOS 7が発表されてからというもの、新しくなったアイコンの角丸に対応すべく国内外含めて色々なところからテンプレートが出て来ていますね。

そんなテンプレート公開ラッシュも一段落した頃かな?と思いますが、遅ればせながら用意してみたので、ついでに公開。

自分の目でちゃんとしたソースを確認しないと安心出来ないタチなのですが、いつもながらAppleからの公式なテンプレートなどは用意されてないっぽいので、NDAなNDAを使ってNDA的なコトをしたりしなかったりなんかして、なんとかApple純正の1024pxサイズでの角丸リソースを確認することが出来たので、ちまちま調整かけて独自テンプレートを作ってみたよ、ってな塩梅でございます。

ちなみに下は、角丸がちゃんと合っているかを確かめるために用意した実機サイズのアイコン画像とそれをNDAシミュレータで実行したものをキャプチャした画像(拡大)です。
Icon-60@2x

120px_prev
実機サイズのアイコン画像の背景を青で塗りつぶし、内側に向けて1px(0.5pt)だけ縮めた角丸を乗せています。
もちろん外側の角丸はシステム側でマスク処理されたものですが、ちゃんと角に沿って1px幅でカーブしているのが分かるのではないかと。
(とは言っても、1px未満の微妙なズレは多少出てしまうものなので、実際のデザインではそれを吸収出来るような処理をしておくことをお薦めします。)

そして下の画像が1024pxでの確認です。

1024px_curve

とある元画像(ソース)にはグレーのアウトラインが描かれているのですが、その上に今回描いたパスの輪郭を半透明の赤線(1px)で乗せています。
、、、なんて説明をしても分からないくらいにキッチリ合わせられたかなぁ?とw

で、事前にサードパーティから公開された同種テンプレートを確認してみたのですが、結構マチマチで、部分的に1pxくらいズレているのは当たり前。アバウトなものは見事なまでに原型に沿っていないものもありました。

なので、角丸に沿うようなデザインをする場合には、サードパーティ製テンプレートは安易に信用せず、自分の目でちゃんと確認するのがオススメ。
(まぁ、iOS 7が公式リリースされればいくらでも正確な確認が出来ますので、予定がなければ実物を見てからの方が確実です。)

ってなワケでゴチャゴチャ書いちゃいましたが、下にPSDのリンクを張っておきますのでご自由に使ってくださいませ。

※ ただしご利用は各自自己責任でお願い致します<(_ _;)>

http://www.behance.net/gallery/App-Icon-Template-for-iOS-7-(PSD)/10204703

広告

iOS7向けアイコンの角丸シェイプをほぼ確実に再現したPSDテンプレート公開。」への10件のフィードバック

  1. ピンバック: 【iOS7対応】iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】 | iPhone・iPadアプリのレビュー掲載サイト Applision

  2. ピンバック: 【iOS7対応】iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】 | iPhone・iPadアプリのレビュー掲載サイト Applision

  3. ピンバック: 【iOS7対応】iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】 | iPhone・iPadアプリのレビュー掲載サイト Applision

  4. ピンバック: 【iOS7対応】iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】 | iPhone・iPadアプリのレビュー掲載サイト Applision

  5. ピンバック: 【iOS7対応】iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】 | iPhone・iPadアプリのレビュー掲載サイト Applision

  6. ピンバック: 【iOS7対応】iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】 | iPhone/iPadアプリ Applision(アプリジョン)

  7. ピンバック: クロソイド曲線のベクトルデータ iOSアイコン用EPS形式 | HTML and CSS Coding

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中